本篇将讲解盒模型以及外边距折叠的相关知识。
“CSS 盒模型”是一组规则，用于定义如何呈现 Internet 上的每个网页。 CSS 将 HTML 文档中的每个元素视为一个”框”或”盒”，其中包含一系列不同的属性，用于确定它在页面上的显示位置。
本章介绍了 CSS 框模型的核心组件: 填充，边框，边距，Block boxes 和 Inline boxes。可以将此视为 CSS 布局的”微观”视图，因为它定义了框的个别行为。在以后的章节中，我们将更多地了解 HTML 结构和 CSS 框模型如何组合以形成各种复杂的页面布局。
Block 元素和 Inline 元素
屏幕上呈现的每个 HTML 元素都是一个框，它们有两种形式: Block boxes 和 Inline boxes。
Block boxes 和 Inline boxes 的行为
- Block boxes 总是在前一个 Block 元素之后
- Block boxes 的宽度基于其父容器的宽度
- Block boxes 的高度基于其所容纳的内容
- Inline boxes 不会影响垂直间距，它们不是用于确定布局，只是用于构建块内的样式
- Inline boxes 的宽度基于其所容纳的内容，而与父容器的宽度无关
改变 Box 的行为
我们可以使用 CSS display 属性覆盖 HTML 元素的默认 box 类型。
|
这时，em 和 strong 元素的行为就跟 Block 元素一样了。
Content、Padding、Border and Margin
盒模型是一组规则，用于确定网页中每个元素的尺寸。它为每个 Box 提供了四个属性:
- Content: 一个元素的文本，图片或其他媒体内容
- Padding: box 的内容和边框之间的距离
- Border: box 的填充和边距之间的线
- Margin: box 和周围 box 之间的距离
Padding
|
注意背景颜色如何扩展以填充此空间。填充总是如此，因为它在边框内部，边框内的所有内容都有背景。
速记格式
两值速记
四值速记
注意: 是否想要使用速记表格主要取决于个人偏好和团队惯例。一些开发人员喜欢速记形式更加浓缩的事实，而另一些开发人员认为长形式一目了然(因此更容易维护)。
Border
Border 就是围绕内容和填充绘制的线，注意边框如何在填充旁边碰撞，两者之间没有空隙。
|
Margin
边距定义元素边框外的空间。或者更确切地说，一个盒子和它周围的盒子之间的空间。
|
margin 和 padding 有一样的速记形式。
边距和填充可以在很多情况下完成同样的事情，因此很难确定哪一个是”正确的”选择。
您选择其中一个的最常见原因是:
- 填充具有背景，而边距始终是透明的
- 填充包含在元素的单击区域中，而边距则不包括在内
- 边距会发生垂直折叠，而填充则不会
块级元素和内联元素之间最明显的对比之一是它们对边距的处理。Inline box 完全忽略元素的顶部和底部边距。
水平边距显示会像我们期望的那样，而元素周围的垂直空间没有变化。
|
如果我们将边距更改为填充，它会显示背景。但是，它不会影响周围盒子的垂直布局。
垂直边距折叠
盒子模型的另一个怪癖是”垂直边距折叠”。当你有两个垂直边距彼此相邻的盒子时，它们会折叠。不是将边距加到一起，而是仅显示最大的边距。
垂直外边距折叠最可能发生的两种简单情况:
- 两个紧邻的兄弟元素的外边距发生折叠
- 父子元素的外边距发生折叠
- 首子元素与父元素的上外边距发生折叠
- 尾子元素与父元素的下外边距发生折叠
预防边距折叠
有时我们确实希望防止边距折叠。做法就是在它们之间放置另一个不可见的元素。
一定要记住，填充不会折叠。
Content Boxes and Border Boxes
Content Boxes
我们定义的 width 属性仅表示内容的宽度。
我们可以通过修改 box-sizing 属性，使其变为不同的 Boxes。
|
Border Boxes
Border Boxes 的 width 属性表示包括内容 + 填充 + 边框的总宽度。
注意: 只有 Block 元素修改 width 属性才生效，Inline 元素修改 width 属性无效。height 属性同理。