【 CSS 盒模型/框模型 Box Model】

---

1. CSS 基础 框/盒模型 CSS Basic Box Model

• CSS 基础 框/盒模型 (CSS Basic Box Model)
  • ① 一个模块:
    • 是 CSS 规范的 一个模块，它定义了一种 长方形的盒子——
    • 包括 各自的内边距（padding）与外边距（margin），并根据 视觉 格式化模型 来 生成元素，对其进行 布置、编排、布局（layout）。
  • ② 名称: 盒子模型、盒模型 或 框模型。
  • ③ 针对单个元素:
    • CSS 基础 盒模型 一般仅针对 单个元素及其边距、内容进行布局，而 不是对多个元素 进行 综合的排版，即使外边距合并等特性 涉及二个或二个以上元素之间部分属性 的交互反馈。

---

2. 元素 和 盒子

• 元素 和 盒子:
  • ① 元素 表示为盒子:
    • 在布局文档时，浏览器的呈现引擎 根据标准的 CSS 基本 盒模型(CSS basic box model) 将 每个元素 表示为一个 矩形框/盒子(box)。
    • CSS 决定这些 盒子的大小、位置和属性(颜色、背景、边框大小等)。
  • ② 不是一 一对应: 盒子与元素并 不是 一 一对应的，有时 多个元素会合并生成 一个盒子，有时一个元素会生成 多个盒子（如匿名盒子）。

---

3. 盒子的 分区和分区边界

• ⑴ 盒子的 4个 组成区域的 边界图 : 每个区域 都有边界,共有 4个边界：(边界和边界之间,构成一个区域)
  • ① 内容边界: Content edge
    • 内容区 = 内容边界以内的区域
  • ② 内边距边界: Padding Edge
    • 内边距 = 内容边界和 内边距边界 之间空间
  • ③ 边框边界: Border Edge
    • 边框 = 内边距边界 和 边框边界 之间的空间
    • 边框设置宽度比较大的时候,能看得很明显
  • ④ 外边距边界:Margin Edge
    • 外边距 = 边框边界 和 外边距边界 之间的空间
    • 

---

• ⑵ 盒子的 4个分区:
  • 每个盒子 由四个部分/区域 组成，每个区域 = 各自的 边界之间的空间 定义。
    • 元素 框/盒子 分区的顺序: 内容区⇒ 内边距区⇒ 边框 ⇒ 外边距区
      • 盒子的最内部分是 实际的内容⇒ 直接 包围内容的是内边距⇒ 内边距的边界旁边 是边框⇒ 边框边界以外 是外边距
  • ① 内容区
    • 由内容边界 限制，容纳着 元素的“真实”内容
      • 例如 文本、图像，或是一个视频播放器。
    • 内容区大小: 内容宽度（或称 content-box内容框 宽度）和内容高度（或称content-box 内容框 高度）。
      • 内容区 大小控制: 如果 box-sizing:content-box;（默认），则内容区域的大小 可明确地通过 width、min-width、max-width、height、min-height，和 max-height控制。
    • 背景: 内容区 通常含有一个背景颜色（默认颜色为透明）或背景图像。
  • ② 内边距区
    • 由内边距边界 限制，扩展自 内容区边界(两边界之间的内容)
      • 负责延伸 内容区域的背景，填充 元素中 内容与边框的间距。
    • 内边距的大小:
      • padding-box 宽度 和 padding-box高度。
    • 内边距区的宽度/粗细:
      • 可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。
  • ③ 边框区
    • 由边框边界 限制，扩展自 内边距区域的边界，是 容纳边框的 区域。
    • 边框的大小:
      • 为 border-box 宽度 和 border-box高度。
    • 边框的 宽度/粗细:
      • 由 border-width 和简写的 border 属性控制。
    • 边框大小控制:
      • 如果 box-sizing: border-box;，那么 边框区域的大小 可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。
    • 边框和背景:
      • 框盒上设有背景（background-color 或 background-image），背景将会 一直延伸至边框的外沿（默认为在 边框下层延伸，边框会盖在背景上）。
      • 此默认表现 ,可通过 CSS 属性 background-clip 来改变。
  • ④ 外边距区
    • 由外边距边界 限制，用空白区域 扩展边框区域，以分开 相邻的元素。
    • 外边距颜色: 外边距默认是 透明的，因此不会遮挡 其后的任何元素。
    • 外边距大小:
      • 为 margin-box 宽度 和 margin-box 高度。
    • 外边距区域的大小:
      • 由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin控制。
    • 外边距合并/共享外边距:
      • 在发生 外边距合并 的情况下，由于 盒之间 共享外边距，外边距不容易弄清楚。
  • 

---

• ⑶ 行内元素和占用空间
  • 对于 不可替换的行内元素来说，尽管内容周围 存在 内边距与边框，但其占用空间（每一行 文字的高度）则由 行高 line-height 属性决定，即使 边框和内边距 仍会显示在内容周围。

---

4. 盒模型 涉及的属性

• ⑴ 控制 盒中 内容流 的属性
  • overflow
  • overflow-x
  • overflow-y
  • 详情查看:【 盒模型之 溢出和可见性 属性 overflow & visibility】
• ⑵ 控制 盒子大小 的属性
  • height
  • width
  • max-height
  • max-width
  • min-height
  • min-width
  • 详情查看: 【 CSS 尺寸/宽高 属性 height&width 】
• ⑶ 控制 盒子的外边距 的属性
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-trim
  • 详情查看:【 CSS 外边距属性 ( Margin )】
• ⑷ 控制 盒子的内边距 的属性
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • 详情查看:【 CSS 内边距属性（Padding）】
• ⑸ 其他属性
  • visibility
  • 详情查看: 【盒模型之 溢出和可见性 属性 overflow & visibility】

---

5. 盒模型 和 相关属性之间的影响

• ⑴ 盒模型和背景

  • 背景 默认应用位置: 应用于 由内容和内边距、边框组成的区域。

• ⑵ 盒模型的分区 可选性

  • 内边距、边框和外边距 都是可选的，默认值是0。

• ⑶ 浏览器默认的 内外边距:

  • 许多元素 将由 用户代理样式表 设置 外边距和内边距。
  • 内外边距的 浏览器兼容:
    • 将元素的 margin 和 padding 设置为 0 来覆盖 这些浏览器 默认样式。
      • 可以分别进行，也可以使用 通用选择器 对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

---

• ⑷ 盒模型和宽高
  • 内容区的宽高:
    • 在 CSS 中，width 和 height 指的是 内容区域的宽度和高度。
  • 元素框/盒子的 总尺寸:
    • 增加 内边距、边框和外边距 不会影响 内容区域的尺寸，但是会增加 元素框/盒子 的总尺寸。
    • 假设 框/盒子 的每个边上有 10px 的外边距和 5px 的内边距。要让 这个元素框/盒子 宽度达到 100px ，则应让 内容的宽度 设置为 width:70px ，如下图：
      • 100px = width+padding * 2 + border-width * 2 + margin * 2
      • 

---

♣ 结束语 和 友情链接

• 参考文章
  • CSS 框模型概述
  • CSS 基础框盒模型 | MDN

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/103392717
  • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！