网页的三种布局
- 流动模型(flow)
flow:默认的网页布局模型。 - 浮动模型(flow)
可以让块级元素显示在一行,用到float:left/right;
层模型(layer)
层模型有三种形式:
(a)position:absolute;
这种形式将元素从文档流中拖出,然后用left,right,top,bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位,如果不存在,则相对于body即浏览器窗口(b)
positon:relative;
通过left,right,top,bottom属性确定元素在正常的文档流中的偏移位置。相对定位首先按照static(float)方式产生一个元素(并且元素像层一样浮动),然后相对于以前的位置移动,移动前的位置不变(虽然div元素相对于以前的位置产生了偏移,但是元素以前的位置还是保留着)。(c)
position:fixed;
它的相对移动的坐标是视图(屏幕内网页窗口),不会随着浏览器窗口的滚动条而改变,不受文档流的影响background-attachment:fixed属性相同。
另外,relative和absolute组合使用使被设置元素不想对于浏览器定义
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
#box1{
width:200px;
height:200px;
position:relative;
}
#box2{
position:absolute;
top:20px;
left:30px;
}