HTML5中div干啥用的?

html-css011

HTML5中div干啥用的?,第1张

小时候我们玩积木,一块块积木堆积起来,组成了一个完整的建筑模型,div就是这一块块小积木,用来组成一个完整的网页,浏览器很笨,他只认识人们给他定义好的语法,比如div,当浏览器看到div,就会自己去将div组建成网页。每块小积木还可以取个名字,比如有的叫做房顶,有的叫做底部根基,有的叫做房子主体。

这个div组成的房子里面可以住很多小伙伴,文字、图片、视频动画都是大家庭的一员。

在很多情况下都需要实现两个div的重叠(包含层级关系),实现的方法也和div中属性设置的不同也是不一样的,尤其是 position 和 display 的变化. 但是总体上就是对margin( 盒模型 )和top( 定位 )等的运用。margin是属于盒模型中的一部分,修改了margin,就是修改了div元素的大小,但是修改了定位,只是修改了 自己本身的位置 ,不修改元素占用的大小,也不会干扰其他元素的位置。 1. 但是依靠margin来重叠有很大的 局限性 ,图片如下: 这是设置了 黄色div块的margin-top 才实现的,你也可以设置 蓝色div的margin-bottom。 如果你设置黄色div的margin-bottom就不能实现重叠的效果。 2. 当两个div的position为 relative 时,可以同时使用盒模型和定位来实现重叠。使用定位来选择位置时,优先级为top>bottom,left>right,优先级高的会屏蔽低的。 3. 当两个div的position为 absolute 时,那么父元素必须设置一个 定位 属性(不能为默认的static),这样子div才能相对于父div布局。

可以用定时器setInterval

如果是有限的背景色切换,那把这些颜色放在一个数组里面,一秒切换一次

1234567

var arrColor=['green','red','blue']var i=0setInterval(function(){obj.style.backgroundColor=arrColor[i] if(i==arrColor.length-1) i=0 i++},1000)

如果是随机变颜色,我这里写了一个随机颜色的方法

12345678910

function randomColor() {var Str=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']var color="#"for(var i=0i<6i++){var index=Math.ceil(Math.random()*Str.length)color+=Str[index]}return color}

你可以参考一下