CSS | box-sizing 属性

在 CSS 布局中，元素的大小很重要。 box-sizing 属性用于更好地控制元素的大小和尺寸。它定义元素框的尺寸计算方式。

box-sizing 属性语法

该属性有两个可能的值：

• content-box：默认值。元素的宽度和高度只包括内容（内容的大小不包括填充、边框和外边距）。在元素大小指定为 width 和 height 的情况下，元素框的总宽度是 width，其总高度是 height。
• border-box：元素的宽度和高度包括填充和边框，但不包括外边距。在元素大小指定为 width 和 height 的情况下，元素框的总宽度是 width，其总高度是 height 再加上填充和边框的总和大小。

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

box-sizing 属性实例

实例 1

在 content-box 模式下，一个元素的总宽度和高度为 300 像素（包括内容、填充和边框）。在 border-box 模式下，一个元素的总宽度和高度为 200 像素（包括内容、填充和边框）。

<div class="content-box-example">content-box</div>

<div class="border-box-example">border-box</div>

.content-box-example {
  width: 300px;
  height: 300px;
  padding: 25px;
  border: 5px solid black;
}

.border-box-example {
  width: 300px;
  height: 300px;
  padding: 25px;
  border: 5px solid black;
  box-sizing: border-box;
}

实例 2

在 content-box 模式下，一个元素的总宽度和高度为 300 像素（包括内容和填充）。在 border-box 模式下，一个元素的总宽度和高度为 300 像素（包括内容和填充再加上边框）。

<div class="content-box-example">content-box</div>

<div class="border-box-example">border-box</div>

.content-box-example {
  width: 300px;
  height: 300px;
  padding: 25px;
  border: 5px solid black;
}

.border-box-example {
  width: 300px;
  height: 300px;
  padding: 25px;
  border: 5px solid black;
  box-sizing: border-box;
}

总结

box-sizing 属性可用于设置元素框的尺寸计算方式。在 content-box 模式下，元素的尺寸只包括内容；而在 border-box 模式下，元素的尺寸包括内容、填充和边框。