CSS Box 模型
在 CSS 中， HTML 元素被视为盒子，这些元素在网页上的排列方式由CSS 盒模型控制，该模型是一组定义网页渲染方式的规则。
充分了解箱体模型将有助于您创建所需的布局。
现在，你可能会问：为什么 HTML 元素在 CSS 中会被视为一个盒子？
请创建 HTML 和 CSS 文件以跟随教程操作。确保 CSS 文件与 HTML 文件正确链接。如果您已阅读本系列之前的文章，应该知道所有 HTML 代码片段都将位于 `<head>` 标签内body。
根据以下代码片段：
<h1>Header 1</h1>
<h2>Header 2</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit aliqua.</p>
</div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<span>Lorem ipsum dolor sit amet, consectetur adipi</span>
<span>Lorem ipsum dolor sit amet, consectetur adipi</span>
* {
outline: 3px solid #1560bd;
margin-bottom: 1.5em;
background-color: #f9f9fa;
}
保存文件，然后在浏览器中加载HTML代码。
从上图可以看出，元素呈矩形，有些元素占据了页面的整个宽度（例如）h1，li而有些元素只占据页面的一小部分（例如span）。你可能会问，为什么呢？
在 CSS 中，这些框分为两类：
- 积木盒
- 内联框
积木盒
如果一个盒子被定义为块级元素，它将沿行内方向延伸以填充其容器（即其父元素）中的可用空间，而生成此类盒子的元素称为块级元素。例如div， `<div>`、 h1` li<div>` 等。这些盒子的其他一些特征包括：
- 必要时，他们会另起一条队伍。
- 它们的宽度和高度属性将适用
- 内边距、外边距和边框会导致其他元素远离盒子。
可以通过 CSS 中的属性来改变块状框的这种行为，display该属性接受诸如 `<block>`、`<block>`、`<block>` 之类的值inline。flex我们grid来看一个例子。
请更新您的 CSS 代码，使其与以下代码片段一致：
* {
outline: 3px solid #1560bd;
margin-bottom: 1.5em;
background-color: #f9f9fa;
display: inline; /* Add this */
}
保存并刷新浏览器，所有页面元素将呈现在同一行上，如果可用空间不足，则会换行显示。
内联框
顾名思义，这些方框会显示在一行上，默认情况下，宽度和高度属性不会生效。这些方框的其他行为包括：
- 内边距或外边距不会导致其他元素远离盒子。
- 他们不会开辟新的道路
与块级框一样，行内框的行为也可以通过display属性进行更改。
在HTML中class为元素添加属性：span
<span class="block">The first SPAN element</span>
<span class="block">The second SPAN element</span>
请将您的 CSS 代码更新为以下代码片段：
span.block {
display: block;
outline: 3px solid red;
}
保存文件并刷新浏览器。
可以将其display: block应用于其他行内元素，例如a（链接）、em等等strong。
综上所述，CSS 中的这些框由四个主要部分组成。它们是：
- 内容
- 填充
- 边界
- 利润
内容
这是元素中包含的文本、图像或其他媒体内容。
填充
这是元素边界和元素边缘之间的内部间距。元素边缘本身也可以有边框。是不是有点晕？让我们来写代码。
请更新您的 HTML 和 CSS 代码，使其与以下代码片段一致：
<header>
<h1>THIS IS H1</h1>
</header>
header {
border: 2px solid #1560bd;
}
h1 {
padding: 2em;
}
保存文件。刷新浏览器，然后执行以下步骤：
h1对元素使用“检查元素”功能- 导航至“布局”选项卡
- 点击盒式模型
- 将鼠标（或指针设备）悬停在内部的紫色方框上
- 浏览器会提示这是内边距，网页上相应的元素也会高亮显示。
从盒模型中，你会观察到内边距值应用于盒子的所有四个边。这是为什么呢？这是因为该padding属性实际上是以下代码的简写：
padding-toppadding-bottompadding-rightpadding-left
更有趣的是，如果你给这个属性提供两个值padding，浏览器会用第一个值设置顶部和底部，用第二个值设置右侧和左侧。你说什么？
h1 {
padding: 2em 2em;
}
但如果我们提供三个值会发生什么呢？第一个值将用于顶部，第二个值将用于左侧和右侧，第三个值将用于底部。
h1 {
padding: 2em 3em 2em;
}
您可以使用浏览器开发者工具来确认这一点：
边界
这是盒子内边距和外边距之间的分界线。要查看代码示例，请查看内边距说明中的代码（特别是元素border的属性声明header）。重复上述步骤以显示盒模型，但这次将鼠标（或指针设备）悬停在黑色区域上。这就是边框，浏览器会自动处理其余部分。
与 padding 属性类似，border可以使用该属性一次性声明边框的四个边。这四个边分别是：
border-topborder-rightborder-bottomborder-left
但与内边距不同，你不能使用属性声明四个边框的不同宽度border，你必须显式地更改每个边框的宽度。这意味着
header {
border: 1px solid green; /* this is valid */
}
与……不同
header {
border: 2px 3px solid green; /* this is invalid */
}
你必须改用这种方法：
header {
border-top: 3px dashed green;
border-right: 1px solid red;
border-bottom: 5px solid gold;
border-left: 4px solid maroon;
}
利润
边距控制页面上不同元素之间的间距。操作步骤与边框和内边距的说明类似，但这次您需要将鼠标（或其他指针设备）悬停在黄色区域上，这就是边距。
该margin房产名称也是其他四个房产名称的简称：
margin-topmargin-rightmargin-bottommargin-left
margin 属性的行为与该padding属性类似，您可以提供一个、两个或三个值，浏览器会处理剩下的事情。
这些部分（内容、内边距、边框和外边距）适用于块级元素和display属性设置block为 的行内元素。
这些部分汇总在下图：
元素的内边距、边框、外边距和内容决定了渲染后的元素在页面上占据特定的宽度和高度。大多数情况下，你需要知道如何计算元素的宽度和高度，以确保你的网页在所有浏览器中都能正确显示。
在进行这种计算时，您应该记住 CSS 中有两种盒模型。它们是：
- 标准箱式模型
- 另一种箱式模型
标准盒式模型
在标准的盒模型中，如果给一个盒子指定宽度和高度，这就定义了内容盒的宽度和高度。任何内边距和边框都会添加到这个宽度和高度上，从而得到盒子所占的总尺寸。
这意味着：在标准盒模型中，如果你为一个元素定义了宽度和高度，那么它的高度和宽度就变成了内容框的高度和宽度。那么，内容框是什么呢？
内容框是用于存放页面元素内容的框。例如，如果您有以下 HTML 代码：
<p>This is a paragraph</p>
内容将显示为“这是一个段落”。您可以使用浏览器开发者工具进行确认。如果您已在浏览器中打开 HTML 文件，请执行以下步骤：
- 对段落元素使用“检查元素”功能
- 导航至“布局”选项卡
- 点击盒式模型
- 将鼠标（或指针设备）悬停在方框的最内侧部分（蓝色部分）上。
- 开发者工具将显示“内容”一词，页面上相应的内容将被高亮显示。
现在，让我们举个例子来说明浏览器在这个盒模型中是如何进行计算的。
请更新您的 HTML 和 CSS，使其与以下代码片段匹配。
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid #1560bd;
}
根据上面的信息片段，我们的盒子会占用多少空间？如果你回答的是350，很抱歉，这不是正确答案，但你肯定已经很接近了。
该元素将占据一定空间410px，高度为210px。如何实现？
保存文件并刷新浏览器。对段落使用“检查元素”功能，然后导航到“布局”选项卡并单击“盒模型”，您应该会看到类似于下图的输出结果。
浏览器是如何得出这些值（或这些数值）的？如果你仔细观察，就会明白。不过，无论如何，现在需要做一些数学计算。
为了测量元素的宽度，我们从左边界到右边界开始计算。现在请看下图：
将上图中高亮显示的值相加：
- 5 + 25 + 350 + 25 + 5 => 410（浏览器计算出的宽度值）
要计算高度，我们从上边界开始到下边界。
总结上图中高亮显示的值：
- 5 + 25 + 150 + 25 + 5 => 210（浏览器计算出的高度值）
在某些情况下，您可能不希望使用默认的标准箱体模型计算。这就引出了替代箱体模型。
替代盒式模型
替代盒模型是在标准盒模型之后推出的。在这个模型中，任何宽度都是指页面上可见盒子的宽度，因此内容区域的宽度等于该宽度减去内边距和边框的宽度。什么？深呼吸。呼气。现在继续往下读。
与网络浏览器默认使用的标准盒模型相比，这种替代盒模型默认情况下未启用。
要使用替代盒模型，您需要调整 CSS 属性box-sizing。
请更新您的 CSS 代码，使其与以下代码片段一致。
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid #1560bd;
box-sizing: border-box; /* Add this */
}
保存文件并刷新浏览器。按照常规步骤在开发者工具中显示Box 模型，您应该会看到类似下图的输出结果。
如果将框中高亮显示的值相加，您将得到width与浏览器计算出的值相同的值。
浏览器现在使用的是我们在 CSS 中明确指定的宽度和高度值，即 `width` 和 `height` 350px。150px为什么呢？当你声明box-sizing属性并赋予其特定值时border-box，你实际上是在告诉浏览器：
将边框框设置为由您设置的任何大小定义的区域。
边框框是指从左边框到右边框的区域。浏览器也欣然接受，使用了我们在 CSS 中指定的宽度。
使用替代盒模型是开发人员（包括我自己）的常见选择，为了使其适用于网页中的所有元素，我们需要在元素box-sizing上设置该值html，并将所有其他元素设置为继承该值，如下面的代码片段所示。
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
附注：Internet Explorer 过去默认使用备选方框模型，没有切换机制。
我们在这篇文章中讨论了页边距，但你需要注意一个陷阱，那就是页边距折叠的概念。接下来我们会讨论这个问题。
文章来源：https://dev.to/ziizium/the-css-box-model-14k