box-sizing 属性用于改变元素相对于其“盒模型”的大小的方式。
盒模型
我们首先再次将这个盒模型的图搬了上来。
标准盒模型
通常，当设置元素的大小时，width 和 height 属性确定元素的内容框的宽度和高度。添加到元素上任意的 padding 都将增加元素的总计算宽度和（或）高度 —— 这是默认的盒模型在调整元素大小时的工作原理。
因为这是盒子模型尺寸在 CSS 中的工作原理。如果你不知道这一点，你可能不会总是得到你最终想要的尺寸。
例如：
.element {
width: 100px;
height: 100px;
}
如果我们再添加一个 padding 属性：
.element {
width: 100px;
height: 100px;
padding: 20px;
}
因为 padding 区域的宽度将被添加到内容区域的宽度，因此总宽度（和高度）将增加。
原本的 100 x 100 像素的元素将变为一个 120 x 120 像素的元素。
你以为到这里就结束了？接着往下看：
我们一般会为我们的元素添加边框的。因此，我们再来添加一个 border 属性好了：
.element {
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #000;
}
此时，我们又添加了一个 border 属性，那么此时的盒模型大小再次发生了改变。
原本的 120 x 120 像素的元素将变为 130 x 130 像素的元素。
当然，你还可以再给其添加 margin 属性，我这里就不演示了，相信大家都理解并在这里复习了一遍。
box-sizing
我在前面为什么要使用盒模型作为铺垫内容呢？就是为了是大家更好地理解 box-sizing 这个属性的工作原理是什么。
box-sizing 属性允许你控制元素尺寸的大小如何工作。
使用 box-sizing 属性，你可以告诉浏览器在元素的宽度中包括 padding 的宽度和（或） border 宽度，而不是增加该宽度。
因此，在上面的示例中，你可以更改默认框大小从 content-box（记住：height 和 width 指定内容区域的高度和宽度）改为 padding-box ; 通过将其更改为 padding-box，你的元素将宽度为 110px，高度为 110px，内部宽度为 20px，因此只有 border 宽度添加到 width 和 height 属性的值。
当您创建流体（flow）和网格（grid）布局时，例如，你需要计算列的宽度时，这是特别有用的。而不必担心额外的 padding 和 border 宽度会破坏布局，使创建布局更容易。
接下来我们来看看它的参数：content-box（默认） | padding-box | border-box | inherit
- content-box：默认行为。指定的宽度高度（以及相应的 min-width，min-height 和 max-width，max-height 属性）分别适用于元素的内容框的宽度和高度。元素的
padding和border被布置并绘制在指定的宽度和高度之外。元素的指定宽度和高度不包括padding和border。
- padding-box：此元素上的指定宽度和高度（以及相应的 min-width，min-height 和 max-width，max-height 属性）确定元素的填充框。也就是说，在元素上指定的任何
padding都会布局并在此指定的宽度和高度内绘制。通过从指定的width和height属性中减去各边的padding宽度来计算内容宽度和高度。由于内容宽度和高度不能为负，因此该计算的值为 0。也就是说，如果padding对于指定的宽度和高度太大，则内容区域的大小可能为零。**元素的宽度和高度包括padding，但不包括border**。 - border-box：此元素上指定的宽度和高度（以及相应的 min-width，min-height 和 max-width，max-height 属性）确定元素的边框。也就是说，元素上指定的任何
padding或border都会在此指定的宽度和高度内进行布局和绘制。通过从指定的width和height属性中减去各边的padding宽度来计算内容宽度和高度。由于内容宽度和高度不能为负，因此该计算的值为 0。也就是说，如果padding对于指定的宽度和高度太大，则内容区域的大小可能为零。指定的宽度和高度包括padding和border。
我知道你们现在内心中有一种“太长不看”的心态，但是请耐着性子将上面那段话再重复地看一遍。其实很简单，只要理解到位了，中心思想就是：到底要不要包括 padding 和 border 在盒模型内部。
我们来看一个例子：
所有以下容器都使用 width 和 height 属性都被设置为相同的宽度和高度。第一个具有默认的框大小调整值，第二个框具有设置为 padding-box 的框大小，第三个框具有设置为border-box 的框大小。让我们一起来看看它们的区别：
box-sizing
以上所有三个框都有一个 200px 的宽度和高度，30px 的 padding（四边）和一个 10px的 border 。
如果你的浏览器不支持 padding-box 值，第二个框可能会与第一个框相同。
请记住，下面这句话很重要！
padding-box已从规范中移除。
因此，我们使用的时候只有 border-box 和 inherit 两个值可以使用（由于 content-box 为默认值我就省略了）。
以下是我使用的 webstorm IDE 的截图显示：
目前这个属性的兼容性已经很好了，因此可以放心的使用（旧版本 IE 不支持）。
兼容性
总结
本节我们介绍了 box-sizing 的相关知识，并且还将盒模型再次复习了一遍，不知道你有没有学习到新东西呢？
网友评论