欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html开发中CSS普通流解析

程序员文章站 2022-09-25 12:29:44
普通流 默认情况下,所有框都在普通流中定位,CSS 普通流包括块级框的块格式化、行内级框的行格式化、块级框和行内级框的相对定位。 在普通流中,不同类型的框,会参与不同的格式化上...

普通流

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

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

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

行格式化上下文

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

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

html开发中CSS普通流解析图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;

}html开发中CSS普通流解析图5-2 行框

span:nth-child(2) {

??? float: left;

}html开发中CSS普通流解析图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;

}html开发中CSS普通流解析图5-4 行内框被分割

strong {

?? margin: 1em;

?? padding: 1em;

?? line-height: 1;

?? background: #eee;

?? border: 1px dashed #444;

}html开发中CSS普通流解析图5-5 行内框的高度

img {

?? margin: 10px;

?? padding: 10px;

?? background: #ccc;

?? vertical-align: middle;

?? border: 1px dashed #444;

}
html开发中CSS普通流解析
图5-6 原子行内级框的高度
html开发中CSS普通流解析
图5-7 不同行框的高度