默认情况下，所有框都在普通流中定位，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 不同行框的高度
如对本文有疑问， 点击进行留言回复！！
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
深入理解CSS background-blend-mode的作用机制
我要评论
网友评论