css布局方式

(布局模型与盒模型一样都是 CSS 最基本、 最核心的概念,但布局模型是建立在盒模型基础之上)

  1. 流动模型(Flow)
  2. 浮动模型（Float）
  3. 层模型（Layer）：定位

定位

  1. position：定义元素在浏览器中的定位方式
  2. position:static默认值
  • position：absolute（绝对定位）
  • posttion：relative（相对定位）
  • position: fixed;（固定定位）
  • 通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置

作用

  1. position：absolute（绝对定位）
  • 元素添加绝对定位之后脱离文档流，不占位
  • 相对于具有定位元素（absolute，relative，fixed）的祖先元素进行定位，没有定位元素的祖先元素时相对于body进行定位
  1. 会随着滚动条而滚动
    根据这个特点，
  • 我们一般这样使用：子元素绝对定位，父元素相对定位。
  1. posttion：relative（相对定位）
  • 相对于元素本身应该所在的位置进行定位
  • 不脱离文档流，占位（保留原本的位置）
  • 相对定位经常使用但是不单独使用，跟绝对定位结合使用
  1. position: fixed；（固定定位）
  • 针对浏览器窗口进行定位
  • 不会随着浏览器的滚动而滚动
  • 一般用于页面中在浏览器中固定不变的地方
  • 固定定位的元素会脱离文档流，不占位

子元素绝对定位，父元素相对定位。

定位的特性

  • 定位不能滥用：页面布局使用浮动，局部微调使用定位
  1. 行内元素添加了绝对定位可以直接给高和宽不用转换
  2. 块元素添加了绝对定位，如果没有指定宽度，会自动收缩到内容的宽度。
  3. 绝对定位的盒子不受父盒子padding的影响
  4. 父元素有绝对定位，可以不需要清除浮动

堆叠属性

  1. z-index:规定元素的堆叠顺序
  • 这个属性只用于定位元素（fixed，absolute，relative）默认值是0.值越大，权重越高，元素越靠上，可以取负值
    注意：
  1. z-index的属性设置是同级判断，同级覆盖，同级定位元素可以随意调整层级关系，值越大，层级越靠上
  2. 父子之间的层级，无论父元素层级是多少，都无法高于子元素的层级，除非设置为同级，要想父元素层级大于子级，则不需要给父元素设置层级，只需要给子元素设置负的层级值即可