CSS3 box-sizing属性

box-sizing 属性是在 CSS3 中引入的一个用于控制元素盒模型的属性。盒模型指的是 HTML 元素在页面布局中所占用的空间，包括元素的内容区域、内边距、边框和外边距。

默认情况下，浏览器的盒模型采用 W3C 标准盒模型，即宽度和高度只包含内容的宽度和高度，不包括内边距、边框和外边距。但在实际布局中，我们可能希望元素的宽度和高度能够包括内边距和边框。

box-sizing 属性就是用来控制盒模型的计算方式，有两个可能的取值：

• content-box：这是默认值。宽度和高度只包括内容的宽度和高度，不包括内边距、边框和外边距。换句话说，设置了元素的宽度和高度时，是指内容区域的宽度和高度。
• border-box：宽度和高度包括内容、内边距和边框，即设置了元素的宽度和高度时，是指整个盒子模型的宽度和高度。这种方式更为直观，也更容易控制元素在布局中的尺寸。

例如，如果你想要一个宽度为 200px 的元素，同时有 10px 的内边距和 2px 的边框，如果使用 content-box，你需要将宽度设置为 214px（200px + 10px + 2px），但如果使用 border-box，你只需要设置宽度为 200px 即可，内边距和边框会被包含在这个宽度内。

/* 设置盒模型为 border-box */
.example {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 2px solid black;
}

这样设置之后，.example 元素的总宽度会是 200px，而不会再加上内边距和边框的宽度。