CSS 布局模型

css包含3种基本的布局模型即为元素的3中布局模型,分别为 Flow/Float/Layer

Flow(流动模型)

标准文档流方式,元素从上至下,从左至右!是默认的网页布局方式

特点

  • 块状元素占据单独的一行,从上至下排列
  • 内联元素会从左至右排列

Float(浮动模型)

网页元素可通过设置float属性值浮动,利用浮动特性布局

Layer(层模型)

设置网页元素position来支持层布局模型

position: static

position 默认值,网页元素仍然处于标准文档流中,占据文档流中的位置

position: relative

特点:

  • 相对于自身原有位置进行偏移
  • 仍然处于标准文档流中
  • 随即拥有偏移属性和z-index 属性

position: absolute

特点:

  • 建立了以包含块为基准的定位(包含块为距离其最近设置了定位属性的上级元素,
    若无定位祖先元素,则以HTML元素为定位元素)
  • 完全脱离了标准文档流
  • 随即拥有偏移属性和 z-index 属性
  • 未设置偏移量时,无论是否存在已定位祖先元素,都保持在元素初始位置

position: fixed

特点:

  • 完全脱离标准文档流
  • 随机拥有偏移属性和 z-index 属性
  • 无论有无已定位祖先元素,均以浏览器窗口为偏移参照基准
  • 位置固定,不会随滚动条变化
  • 未设置偏移量时,仍然在标准文档流原位置

你可能感兴趣的:(CSS 布局模型)