深入了解标准流以及脱标元素的特点

深入了解标准流以及脱标元素的特点

1.标准流（Normal Flow）

• 排布顺序：在浏览器中从左到右，从上到下顺序摆放；
• 默认情况下，元素互相之间不存在层叠现象；

2.什么情况下元素会脱标？

• 元素设置position，并且position的值为fixed或absolute；
• 元素添加浮动float，并且float的值不为none；

3.脱标元素的特点

• 可以随意设置宽高，宽高默认由内容决定。

  块级元素：

  标准流下的展示（默认占满父元素的宽度）；

  

• 脱标下的展示（宽高由内容撑开）；

  

4.脱标和display有什么关系？

inline-block

display: inline-block;

当不同元素进行了脱标，对应会展示成display的何种属性值？在MDN和W3C官方网站上都有进行解释，并且提供了参考表格：

• MDN中，以搜索float属性为例；

  

• 在W3C官方文档中，有关于

  display

  、

  position

  和

  float

  之间的关系进行了说明；

  

总结：

• 大部分元素在脱标后都会转换成

  block

  类型。
• 这里可以抛出一个疑问，

  block

  类型不是占据父元素的宽度么，为什么脱标元素最终是由内容撑开的？
• 解答：元素脱标后，已经不受标准流约束，其位置也是不局限在父元素之内，很难说父元素是谁，且块级（block）元素默认宽高都为

  auto

  ，难以参考父元素宽度，所以最好的展示形式就是默认由内容撑开。