Fork me on GitHub

前端必须了解的布局常识：普通流（normal flow）

目录

  • 一、概述
  • 二、块级元素和内联元素
    • 常见的块级元素
    • BFC
    • 常见的行内元素
    • IFC
    • 三、哪些情况会脱离普通流
    • 浮动
    • 绝对定位
    • 固定定位
    • display:none
  • 四、总结
  • 五、参考资料

一、概述

普通流（normal flow，国内有人翻译为文档流）：将窗体自上而下分成一行一行,
块级元素从上至下、 行内元素在每行中按从左至右的挨次排放元素,即为文档流。
了解文档流是css布局的基础。虽然 普通流 很基础， 但资料较少，之前对这个概念模糊，现总结如下，欢迎拍。

二、块级元素和内联元素

html元素根据普通流布局特性分为块级元素（block）和内联元素（inline）

块级元素

块级元素在布局的特性显示为:独占一行,下一个元素另起新行, 比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。表现为以下特性：

  • 处于常规流中时，如果 width 没有设置，会自动填充满父容器;
  • 可以应用 margin/padding;
  • 在没有设置高度的情况下会扩展高度以包含常规流中的子元素;
  • 处于常规流中时布局时在前后元素位置之间（独占一个水平空间）;
  • 忽略 vertical-align.
常见的块级元素

块级元素： p、h1、div、 ul、ol、li、 table、 form
display为block的元素

BFC

说到普通流块的布局，不得不说BFC了，
关于BFC这篇文章（ http://www.w3ctech.com/topic/865 ）解释的很清楚了。
总结来说，就是以下两点：
BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。

  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算

哪些元素会产生BFC

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

内联元素

内联元素,表现为行内样式,当当前行放不下的时候,再另起新行.表现为以下特性：

  • 水平方向上根据 direction 依次布局;
  • 不会在元素前后进行换行;
  • 受 white-space 控制;
  • margin/padding 在竖直方向上无效，水平方向上有效;
  • width/height 属性对非替换行内元素无效，宽度由元素内容决定;
  • 非替换行内元素的行框高由 line-height 确定，替换行内元素的行框高;由 height , margin , padding , border 决定;
  • 浮动或绝对定位时会转换为 block;
  • vertical-align 属性生效
常见的内联元素

input、 a、 img、 span
display为inline的元素

IFC

同样相对BFC,行内元素有IFC

IFC布局规则

  1. 框会从包含块的顶部开始，一个接一个地水平摆放。
  2. 摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
  3. 行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。

详细可查看：inline-formatting: http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

三、哪些情况会脱离普通流

有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位,隐藏元素。

浮动

　　浮动元素不占任何正常文档流空间， 而浮动元素的定位照样基于正常的文档流父级元素 ，然后从文档流中抽出并尽能够远的挪动至左侧或许右侧。当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

但浮动元素，与行内元素相遇， 行内元素 并不会占用浮动元素的空间. 用浮动实现布局，父级元素 塌缩就是因为浮动元素不在正常流中。

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it .

绝对定位

基于文档流，理解以下的定位形式:

相对定位：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
绝对定位：即完全离开文档流, 相关于position属性非static值的比来父级元素进行偏移。

absolute：绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
注：当只设置position:absolute,不设置 left，right，top，bottom时，元素的位置，还是在原来的位置。
CSS

<divclass="a">
<divclass="b">b</div>
<divclass="c">c</div>
</div>

HTML

.a
{
position:relative;
width:300px;
border:1px solid blue;
padding:3px;
}
.b,.c
{
height:50px;
border:1px solid red;
background-color:#eee;
}
.c
{
width:100%;
position:absolute;
/*top:0;*/
}

显示效果如下：



当.c类加了top:0;显示效果如下。


固定定位（fixed）

固定定位：即完全离开文档流，相关于视区进行偏移。
对于定位要注意：

  • 对于absolute和fixed定位的固定尺寸（设置了width和height属性值）元素，如果设置了top和left属性，那么设置bottom和right值就没有作用了，应该是top和left优先级高，否则同时写了浏览器怎么知道按照谁定位
  • 对于absolute和fixed定位的元素，如果设置了top、left、bottom、right的值后margin属性也就不起作用了
  • 对于absolute和fixed定位的元素，如果设置了top、left、bottom、right的值后float属性同样会失效
    块元素如果设置了float属性或者是absolute、fixed定位，那么vertical-align属性不再起作用

隐藏元素

display:none
不在渲染树中，肯定不在文档流中。
diplay:none和visibility:hidden的区别:

  • display :none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，
    就当他从来不存在。 脱离文档流.
  • visibility:hidden
    隐藏对应的元素，但是在文档布局中仍保留原来的空间。不脱离文档流.

四、总结

文档流是css布局的基础，以上简单介绍了的文档流的概念，根据文档流元素的的分类，什么会脱离文档流，和BFC等布局特性，可能会有错误，欢迎指正。

五、参考

[1].文档流与div定位http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html
[2].普通流http://www.w3.org/html/ig/zh/wiki/CSS2/visuren#block-formatting
[3].inline-formatting: http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

posted @ 2016-05-06 07:35  Lucien!  阅读(3411)  评论(0)  编辑  收藏  举报