1. 视觉/可视化 格式化模型 和 文档树
- 视觉/可视化 格式化模型 和 文档树:
- ① 获取/处理/显示 文档树:
- 在CSS中，CSS 视觉 格式化模型（
visual formatting model）描述了 用户代理 如何获取 文档树，以及 如何处理和显示它。
- ② 适用于 连续/分页媒体: 这包括 连续媒体(如 计算机屏幕)和 分页媒体(如通过 浏览器 打印功能 打印的书籍或文档)。
- 连续媒体(
continuous media): 内容 没有间断 的环境，即其 流动性 是连续的。 - 分页媒体(
paged media): 属性 控制打印 或 能够将 内容拆分 成离散页面的 任何其它媒体内容的呈现。
2. 元素和盒子
- 元素和盒子
- ① 根据模型 生成盒子:
- 在 可视化 格式化模型 中，文档树中 的每个元素 根据 框模型/盒模型, 生成零个或多个框/盒子。
- ② 盒子的布局 的 影响因素
- ❶ 盒子的尺寸：
- ❷ 盒子的类型：
- 行内盒子（
inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）
- ❸ 定位方案（
positioning scheme）：
- ❹ 文档树中 元素之间的关系
- ❺ 外部信息
- ❻ 其他的 某些外部因素
3. 盒子和包含块
- 盒子 和 包含块
- ① 渲染盒子:
- 包含块: 该视觉 格式化模型 会根据 盒子的包含块（
containing block）的边界 来渲染盒子。
- ② 包含块和溢出:
- 不受包含块限制: 通常，盒子会创建 一个 包含其后代元素的 包含块，但是盒子 并不由包含块 所限制，当盒子的布局 跑到包含块的外面时 称为溢出（
overflow）。
4. 盒子 相关的术语
- ⑴ 块：
block
- 独立的区域: 一个抽象的概念，一个块 在文档流上 占据一个 独立的区域
- 垂直依次排序: 块与块之间, 在垂直方向上 按照顺序 依次堆叠。
- ⑵ 包含块：
containing block
- ⑶ 盒子：
box
- 生成:
元素⇒ 盒子
- 根据内容 创建: 一个抽象的概念，由 CSS 引擎 根据 文档中的内容 所创建
- 用途: 主要用于 文档元素的定位、布局和格式化等用途。
- 并非一对一:
- 盒子与元素并不是一 一对应的，有时, 多个元素 会合并生成 一个盒子，有时 一个元素 会生成多个盒子（如 匿名盒子）。
- ⑷ 块级元素：
block-level element
- 元素的
display : 为 块 block、列表项list-item、表格table 时，该元素 将成为 块级元素。 - 不用于 格式化: 元素 是否是块级元素 仅是元素本身的属性，并不直接用于 格式化上下文的 创建或布局。
- ⑸ 块级盒子：
block-level box
- 生成:
块级元素⇒ 块级盒子
1:1,1:n关系:
- 一个 块级元素 至少会生成 一个块级盒子，但也有可能 生成多个（例如 列表项
list-item元素）。
- ⑹ 块容器盒子：
block container box 或 block containing box
- 块容器盒子= 块级盒子/行内盒子
- 要么只包含其 它块级盒子
- 要么只包含 行内盒子 并同时创建一个 行内格式化上下文（
inline formatting context）。 - 块容器盒子, 侧重于 当前盒子 作为“容器”的这一角色
- 它不参与 当前块的布局和定位，它所描述的仅仅是 当前盒子与其后代之间的关系。
- 换句话说，块容器盒子 主要用于确定 其子元素的定位、布局等。
- ⑺ 块盒子：
block box
- 生成:
块级盒子+块容器盒子⇒ 块盒子 (交集)
- 如果一个 块级盒子 同时也是一个 块容器盒子（见下），则称其为 块盒子。
- 块盒子分类: 具名块盒子+匿名块盒子
- 除 具名块盒子 之外，还有一类 块盒子 是匿名的，称为 匿名块盒子（
Anonymous block box），匿名盒子 无法被 CSS 选择符选中。 
- ⑻ 行内级元素：
inline-level element
display为: inline、inline-block、inline-table的元素 称为行内级元素。- 与块级元素一样，元素是否是 行内级元素 仅是元素本身的属性，并不直接用于 格式化上下文的创建或布局。
- ⑼ 行内级盒子：
inline-level box
- 生成:
行内级元素⇒ 行内级盒子
- 行内级盒子 分类:
- 行内盒子 原子行内级盒子
- 区别在于: 该盒子 是否参与 行内 格式化 上下文的创建。
- ⑽ 行内盒子：
inline box
行内盒子 = 行内级盒子+参与格式化
- 参与 行内格式化 上下文创建的 行内级盒子 称为行内盒子。
- 与块盒子类似，行内盒子 也分为
- 具名行内盒子 和 匿名行内盒子（
anonymous inline box）两种。
- ⑾ 原子 行内级盒子：
atomic inline-level box
原子 行内级盒子 = 行内级盒子 + 不参与格式化
- 不参与 行内 格式化上下文创建 的 行内级盒子。
- 原子行内级盒子一开始叫做 原子行内盒子（
atomic inline box），后被修正。
- 不拆分多行:
- ⑿ 块和块级的 区分:
- 盒子分为“块盒子”和“块级盒子”两种
- 但元素只有“块级元素”，而没有“块元素”。“行内级元素”也是一样。
行内级元素⇒ 行内级盒子
5. 盒子的生成
- ⑴ 盒子的生成:
元素 ⇒ 盒子
- 是 CSS 视觉格式化模型的一部分，用于从 文档元素 生成盒子。
- 盒子和格式化方法:
- 盒子有不同的类型，不同类型的盒子 的格式化方法 也有所不同。
- ⑵ 盒子的类型: 取决于 CSS
display 属性: 元素⇒ 盒子
- ① 块级盒子:
块级元素⇒ 块级盒子
- ❶ 块盒子:
块级盒子+块容器盒子⇒ 块盒子 - ❷ 块级元素：
block-level element
- 元素的
display : 为 块 block、列表项list-item、表格table 时，该元素 将成为 块级元素。
- ② 行内级盒子:
行内级元素⇒ 行内级盒子
- ❶ 行内盒子:
行内盒子 = 行内级盒子+参与格式化 - ❷ 原子 行内级盒子:
原子 行内级盒子 = 行内级盒子 + 不参与格式化 - ❸ 行内级元素：
inline-level element
display为: inline、inline-block、inline-table的元素 称为行内级元素。
5.1 块级元素与 盒子
- ⑴ 块级元素与 盒子
- 当元素的
display: block| list-item |table 时⇒ 块级元素。 - ① 块级元素 ⇒ 块 ⇒ 垂直方向依次排列
- 一个块级元素 会被格式化成 一个块（例如文章的一个段落），默认 按照垂直方向 依次排列。
- ② 块级元素 ⇒ 块级盒子⇒ 参与格式化
- 每个块级盒子 都会 参与 块格式化上下文（
block formatting context）的创建
- ❶ 主块级盒子:
- 而每个块级元素 都会至少生成一个块级盒子，即 主块级盒子（
principal block-level box）。 - 主块级盒子 包含由 后代元素生成的盒子 以及内容，同时 它也会参与 定位方案。
- ❷ 列表项 和 多个块级盒子:
- 有一些元素，比如 列表项 会生成额外的盒子 来放置 项目符号，而那些 会生成 列表项的元素 可能会生成 更多的盒子。不过，多数元素 只生成一个 主块级盒子。
- ⑵ 块级盒子 和 块容器盒子 的区别和联系
- 块级盒子: 由块级元素生成, 强调的是 “块”, 描述了元素 与其父元素和兄弟元素之间 的行为
- 块容器盒子: 强调盒子是个"容器", 描述了元素 跟其后代之间 的行为。
- 块容器盒子= 块级盒子/行内盒子
- 要么只包含其 它块级盒子
- 要么只包含 行内盒子 并同时创建一个 行内格式化上下文（
inline formatting context）。
- 一个块级盒子, 可能 是/不是 一个块容器盒子。
- 块级盒子≠块容器盒子
- 块容器盒子 ≠ 块级盒子
- 而有些块容器盒子 也不是块级盒子，比如 非替换行内块 和 非替换 表格单元格。
- ⑶ 匿名盒子
- 匿名盒子 = 不能被 CSS 选择符选中
- 在某些情况下 进行视觉格式化时，需要添加 一些 增补性的盒子，这些盒子 不能用 CSS 选择符选中，因此称为 匿名盒子（
anonymous boxes）。
- ⑷ 匿名盒子的属性值
- CSS 选择器 不能作用于 匿名盒子(
anonymous boxes)，所以它不能被样式表 赋予样式。也就是说，此时
- 所有可继承的 CSS 属性值都为:
inherit - 所有 不可继承的 CSS 属性值都为:
initial。
- ⑸ 匿名块盒子:
- 块级盒子的前后,没有 被标签包裹的文本, 创建 匿名块盒子。
- 示例1:
<div> 和 <p>都保持 默认的样式（即 它们的display: block;）
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
- 显示为
- 两个 匿名块盒子：块级盒子的前后,没有 被标签包裹的文本
- 一个是
<p>元素 前面的那些文本（Some inline text） - 另一个是
<p> 元素后面的文本（followed by more inline text.）。此时会 生成下面的块结构： 
5.2 行内级元素 和 盒子
- ⑴ 行内级 元素: 一个元素
display: inline| inline-block| inline-table;，则称该元素为 行内级元素。
- 行内级元素的 显示:
- 显示时，它 不会生成 内容块，但是 可以与其他行内级内容 一起显示为 多行。
- 包含 多种格式内容（如 强调文本、图片等）的段落，就可以由 行内级元素组成。
- ⑵ 行内级元素 ⇒ 行内级盒子 ⇒ 行内盒子 / 原子 行内级盒子
- ① 行内盒子
- 既是行内级盒子，也是一个 其内容会参与创建其容器的行内格式化上下文的 盒子
- 比如 所有具有
display:inline 样式的非替换盒子。
- ② 原子 行内级盒子
- 一个行内级盒子的内容 不参与行内格式化上下文的创建，则称其为 原子行内级盒子
- 而通过 替换行内级元素或
display: inline-block| inline-table; 的元素 创建的盒子 不会像行内盒子一样 可以被拆分为 多个盒子。
- (一个行内块元素,行内表格,会一直单独占据一个块,不会因为自动换行,换成好几行)
- ⑶ 匿名行内盒子
- 类似于块盒子，CSS 引擎有时候也会 自动创建 一些行内盒子。
- 这些行内盒子无法 被 CSS 选择符 选中，因此是匿名的，它们从父元素那里 继承那些可继承的属性，其他属性保持默认值
initial。 - 当一个字符串 被一个 内联元素分割时，就会创建 匿名行内盒子.
6. 定位规则
- 定位规则: 生成盒子 ⇒ 定位 ⇒ 完成布局
- 一旦生成了盒子 以后，CSS 引擎 就需要定位它们 以完成布局。
- 定位盒子时 使用的规则：
- ① 普通流：按照次序 依次定位 每个盒子
- ❶ 依次放置: 在普通流中，盒子会依次放置。
- 在块格式化上下文中，盒子在垂直方向 依次排列；
- 而在行内格式化上下文中，盒子则 水平排列。
- ❷ 普通流: 静态定位 和 相对定位:
- 当 CSS的
position 属性为 static 或 relative，并且 float 为 none 时，其布局方式为普通流。 - 静态定位:
- 确切位置: 此时每个盒子 根据普通流 所计算出的确切位置 来定位。
- 相对定位
- 偏移: 此时每个盒子还会根据
top、bottom、left和 right 属性的值 在其原本所在的位置上 产生指定大小的 偏移。
- ② 浮动：将盒子 从普通流中 单独拎出来，将其 放到外层盒子 的某一边
- ❶ 在浮动定位中，浮动盒子 会浮动到 当前行的开始或尾部位置。
- 内容流动: 这会导致 普通流中的文本 及其他内容 会“流”到 浮动盒子的边缘处，除非元素通过
clear 清除了 前面的浮动。
- ❷ 静态/相对定位 下的 浮动定位:
- 一个盒子的
float 值不为 none，并且其 position 为 static 或 relative 时，该盒子为 浮动定位。 - 左浮动: 如果将
float: left
- 右浮动: 如果设置
float: right
- 浮动盒子 会定位到当前行盒子的 尾部位置（右侧）。
- 不管是左浮动 还是右浮动，行盒子 都会伸缩 以适应 浮动盒子的大小
- ③ 绝对定位：按照 绝对位置 来定位盒子，其位置 根据盒子的包含元素 所建立的绝对坐标系 来计算，因此绝对定位元素 有可能会 覆盖其他元素
- ❶ 从流中移除:
- 在绝对定位中，盒子会 完全从当前流中 移除，并且不会再与其 有任何联系
- 此处仅指 定位和位置 计算，而绝对定位的元素 在文档树中 仍然与其他元素有父子或兄弟等 关系）
- ❷ 其位置会使用
top、bottom、left和right 相对其包含块 进行计算。 - ❸ 如果元素的
position 为 absolute 或 fixed，该元素为 绝对定位。
- 对固定位置的元素 来说，其包含块为: 整个视口，该元素 相对视口 进行绝对定位，因此滚动时 元素的位置 并不会改变。
♣ 结束语 和 友情链接
- 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭
- 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/103396154
- 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
