CSS box-sizing

CSS box-sizing 属性定义了浏览器应如何计算一个元素的总宽度和总高度，属性允许我们在元素的总宽度和高度中包含内边距和边框。

box-sizing 属性可选值：

• content-box: 默认值。 height 和 width 属性设置的只是内容框的高度和宽度。可参考 CSS 盒模型。
• border-box: height 和 width 属性设置高度和宽度包含了边框、内边距和内容框，这使得我们更容易地设定一个元素的宽高。

! border-box 不包含外边距。

没有 CSS box-sizing 属性

默认情况下，元素的宽度和高度是这样计算的：

• 元素的实际宽度 = width + padding + border
• 元素的实际高度 = height + padding + border

这意味着：当您设置元素的宽度/高度时，元素通常看起来比您设置的要大（因为元素的边框和内边距会添加进来）。

下面的例子中，两个 <div> 设置了相同的高宽，但是因为第二个元素设置了内边距为 50px，导致看起来比第一个大很多。实际两个的内容区的高宽是一样的。

两个 <div> 元素因内边距不同而大大小不同：

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

我们可以通过 box-sizing 属性解决这个问题。

使用 CSS box-sizing 属性

box-sizing 属性允许我们在元素的总宽度和高度中包含内边距和边框。

如果在元素上设置 box-sizing: border-box; ，则宽度和高度中包含内边距和边框：

下面的例子中，两个 <div> 设置了相同的高宽，虽然第二个元素设置了内边距为 50px，但是因为两个元素都设置了 box-sizing: border-box; ，他们的大小还是一样的。

这是与上面相同的示例，box-sizing: border-box; 添加到两个 <div> 元素：

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

由于使用 box-sizing: border-box; 更容易控制元素的高宽，许多开发人员希望他们页面上的所有元素都以这种方式工作。

许多浏览器已经使用在一些表单元素使用了 box-sizing: border-box;，但不是全部。这解释了为什么 input 和 textarea 在宽度 100% 上看起来不同。

下面的代码将 box-sizing: border-box; 应用到所有的元素，并且是安全的。

为所有远射设置 box-sizing：

* {
  box-sizing: border-box;
}

CSS 框大小属性