html开发中CSS普通流解析

普通流

默认情况下，所有框都在普通流中定位，CSS 普通流包括块级框的块格式化、行内级框的行格式化、块级框和行内级框的相对定位。

在普通流中，不同类型的框，会参与不同的格式化上下文（Formatting Context），格式化上下文就是框的布局上下文，它规定了该上下文中的框如何排列，以及这些框之间的关系和相互作用。

普通流中的每个框，只能参与某一种格式化上下文，要么是块格式化上下文，要么是行格式化上下文。块级框参与块格式化上下文，行内级框参与行格式化上下文。

行格式化上下文

只有行内级框参与的格式化上下文，称作行格式化上下文（Inline Formatting Contexts，简称IFC），它规定了内部的行内级框如何排列。

在行格式化上下文中，行内级框从包含块的顶部开始，一个接一个地水平排列。在布局时，水平方向的外边距、边框和内边距都有效，并通过水平方向的外边距来调整框之间的水平距离。两个相邻的行内级框之间的水平距离，等于第一个框的 margin-right 与第二个框的 margin-left 之和。如图 5?1 所示：

图5-1 行内元素的水平外边距

把包含了一行内所有行内级框的矩形区域，称作行框（line box）。行框是本行一个虚拟的框，是浏览器渲染模型中的一个概念，并没有实际显示出来。

通常情况下，行框的宽度等于其包含块内容区的宽度。行框的左外边界，会紧贴其包含块的左内边界，行框的右外边界，会紧贴包含块的右内边界。

假设在一个段落中，包含三个 span 元素：

 

?? inline element 1

?? inline element 2

?? inline element 3

 

上述代码中，包含块就是 p 元素的内容边界，行框的边界就是p 元素的内容边界。为了查看效果，为 p 元素定义了内边距和边框，为 span 元素也定义了边框：

p {

?? ?padding: 10px;

?? ?background: #eee;

?? ?border: 1px solid #ccc;

}

span {

?? ?background: #fff;

?? ?border: 1px dashed #ccc;

}图5-2 行框

span:nth-child(2) {

??? float: left;

}图5-3 行框内存在浮动框

为该段落中的重点强调的文本设置外边距、边框和内边距

现在，在 strong 元素的左右两侧各添加 1em 的内边距和 1em 的外边距。为了便于观察，为容器 p 添加了 1px的实线边框，为 strong 元素添加了 1px 的虚线边框：

p {

?? width: 240px;

?? padding: 10px;

?? border: 1px solid #ccc;

}

strong {

?? margin: 0 1em;

?? padding: 0 1em;

?? background: #eee;

?? border: 1px dashed #444;

}图5-4 行内框被分割

strong {

?? margin: 1em;

?? padding: 1em;

?? line-height: 1;

?? background: #eee;

?? border: 1px dashed #444;

}图5-5 行内框的高度

img {

?? margin: 10px;

?? padding: 10px;

?? background: #ccc;

?? vertical-align: middle;

?? border: 1px dashed #444;

}

图5-6 原子行内级框的高度

图5-7 不同行框的高度