#Css篇： box-sizing: content-box& box-sizing: border-box

定义

box-sizing 是 CSS 中的一个属性，用于指定元素的总尺寸应该如何计算。它有两种主要的值：

content-box（默认值）：

当设置为 content-box 时，元素的总宽度和高度由内容区的大小决定，不包括内边距（padding）和边框（border）。也就是说，当你设置一个元素的宽度（width）或高度（height）时，这个值仅仅作用于元素的内容区域。
Css
.example {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 10px solid black;
}
在上述例子中，元素的实际占用空间将是 200px（内容区域）+ 2 * 20px（左右内边距）+ 2 * 10px（左右边框）= 260px 宽度。

border-box：

当设置为 border-box 时，元素的总宽度和高度包含了内容、内边距和边框。这意味着你为元素设定的宽度和高度将同时包含这些部分。
Css
.example {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 10px solid black;
}
在这种情况下，元素的实际宽度将始终保持 200px，无论其内边距和边框如何变化。

使用 box-sizing: border-box; 可以简化布局计算，并在某些情况下更易于实现响应式设计，因为它确保了当给定一个固定的宽度或高度时，元素不会因为增加内边距或边框而意外地改变整体尺寸。

示例

box-sizing 是CSS中的一个属性，它决定了元素的总尺寸（总宽度和总高度）应该如何计算。在Web布局中，元素的尺寸由内容区、内边距（padding）、边框（border）共同构成。box-sizing属性有两种主要的计算模式：

content-box（默认值）：

这是大多数浏览器的默认行为。当

box-sizing

设置为

content-box

时，元素的总宽度和总高度等于内容区域的宽度和高度加上其内边距和边框。

Css

1.element {
2  box-sizing: content-box;
3  width: 100px; /* 只定义了内容区域的宽度 */
4  padding: 20px; /* 内边距不影响总宽度 */
5  border: 5px solid black; /* 边框也不影响总宽度 */
6  /* 实际占据的空间 = 内容区域 + 左右内边距 + 左右边框 */
7  /* 总宽度 = 100px + (20px * 2) + (5px * 2) */
8}

border-box：

当

box-sizing

设置为

border-box

时，元素的总宽度和总高度直接包含了内容、内边距和边框的尺寸。

Css

1.element {
2  box-sizing: border-box;
3  width: 100px; /* 定义的是内容、内边距与边框总宽度 */
4  padding: 20px; /* 此时内边距会影响总宽度 */
5  border: 5px solid black; /* 边框也会影响总宽度 */
6  /* 实际占据的空间 = 宽度声明值，即包含内容、内边距和边框 */
7  /* 总宽度 = 100px (已经包括了所有部分) */
8}