CSS3 box-sizing 属性

在 web 前端开发中，box-sizing 属性用于控制元素的盒模型的计算方式。默认情况下，元素的宽度和高度是指内容区域的宽度和高度，不包括边框和内边距。但是通过设置 box-sizing 属性，我们可以改变元素盒模型的计算方式，让元素的宽度和高度包括边框和内边距。

语法

box-sizing: content-box | border-box;

• content-box：默认值，元素的宽度和高度仅包括内容区域，不包括边框和内边距。
• border-box：元素的宽度和高度包括内容区域、边框和内边距。

示例

.box {
  width: 200px;
  padding: 20px;
  border: 1px solid #000;
  box-sizing: border-box;
}

<div class="box">Box-sizing Example</div>

在上面的示例中，设置了一个类名为 .box 的元素，宽度为 200px，内边距为 20px，边框为 1px 实线黑色。通过设置 box-sizing 为 border-box，元素的宽度和高度将包括内容区域、边框和内边距，最终元素的实际宽度为 200px，而不是 242px（200px + 20px2 + 1px2）。

box-sizing 属性在响应式布局和网页排版中非常有用，可以更精确地控制元素的尺寸，避免因为边框和内边距导致布局错乱的情况。通过灵活运用 box-sizing 属性，可以提高网页的美观性和用户体验。