(流动)Flow模型:网页默认布局模型

特征:
第一点:块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。
第二点:在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型float

可以实现块状元素并排显示。
任何元素在默认情况下是不能浮动的,但可以用css定义为浮动。
如div 、p、table、img等元素都可以被定义为浮动。

浮动模型可以是apdiv,并且可以在设计视图拖动来改变位置
.box { width: 100px; height: 100px; background-color: #FF0004; position: absolute; left: 561px; top: 185px; } (position: absolute:绝对定位)

apdiv

层模型

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。css定义了一组定位(positioning)属性来支持层布局模型。

层模型有三种形式:
  1. 绝对定位(position: absolute)
  2. 对于body的绝对位置
  3. 相对定位(position: relative)
  4. 相对于原来的位置再改变位置
  5. 固定定位(position: fived)
  6. 相对于浏览器窗口固定定位(例如网页弹窗广告)
    fived 固定定位
    .box2 { width: 100px; height: 200px; background-color:#0084E9; position: fixed; right: 1px; top: 200px; }



相对定位,相对于父级
父级为relative
子级为absolute