JasmineHua's blog

css布局小结

发表于 | 分类于

前言

因很早之前看过寒冬前辈的一篇博客谈谈面试与面试题 。于是一直想写篇文章将css布局方面的知识总结一下。

position的常见取值与行为

1.static

默认值。静态位置。属于正常文档流。offset属性无作用。

2.relative

相对定位。属于正常文档流。相对于正常流的位置根据offset属性进行偏移（offset值不会影响文档流），所以它原本占据的空间仍存在。

3.absolute

绝对定位。脱离文档流。以第一个position属性值不为static的父类为参考点，若不存在此父类，则以body为参考点，根据offset属性进行偏移（即该元素的containing block）。

4.fixed

固定定位。脱离文档流。以浏览器窗口为定位原点根据offset属性进行偏移。

normal flow(正常流)

正常流是默认的定位方式。任何没有具体指定{position:absolute}或者{position:fixed}属性以及没有被浮动的元素都将默认获得此属性。

containing block(包含块)

包含块是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的，这个长方形就被称之为元素的 containing block。

一个元素的 containing block 按以下方式定义：

  1. 用户代理（比如浏览器）选择 根元素 作为 containing block（称之为初始 containing block）。
  2. 对于除绝对定位的元素，containing block由最近的 块级祖先 元素盒子的内容边界组成。
  3. 如果元素有属性‘position:fixed’，containing block 由 视口 建立。
  4. 如果元素有属性‘position:absolute’，containing block 由最近的 position不是static的祖先 建立，按下面的步骤：
    4.1 如果祖先是块级元素，containing block 由祖先的 padding edge 形成。
    4.2 如果祖先是内联元素，containing block 取决于祖先的 direction 属性。
    4.2.1 如果 direction 是 ltr（左到右），祖先产生的第一个盒子的上、左内容边界是 containing block的上方和左方，祖先的最后一个盒子的下、右内容边界是 containing block 的下方和右方。
    4.2.2如果 direction 是 rtl（右到左），祖先产生的第一个盒子的上、右内容边界是 containing block的上方和右方，祖先的最后一个盒子的下、左内容边界是 containing block 的下方和左方。如果没有祖先，根元素盒子的内容边界确定为 containing block。

margin collapse(外边距叠加)

margin collapse发生的条件有，处于normal flow，块元素间的垂直margin。

下面是margin collapse的几种情况：

  1. 一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。
  2. 一个常规文档流元素的margin-top与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。
  3. 一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 ‘height’ 为 0 或 ‘auto’， ‘min-height’ 为 ‘0’，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。

Block formatting contexts(块级格式化上下文)

W3C定义

浮动元素，绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow:visible以外的块级元素（除非该值已经扩散到了视口），都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘会触碰到容器的左边缘（对于从右到左的格式来说，则触碰到右边缘）。即使在浮动的情况下也是成立的（虽然浮动可能导致盒子的线框收缩），除非建立一个新的BFC（在这种情况下，盒子本身可能由于浮动变窄）

作用

  1. 可以阻止元素被浮动元素覆盖
  2. 可以包含浮动元素。
  3. 可以消除不同的BFC产生的margin collapse。