CSS 盒子尺寸
CSS 盒子尺寸
CSS box-sizing 属性允许我们将填充和边框包含在元素的总宽度和高度中。
没有 CSS box-sizing 属性
默认情况下，元素的宽度和高度计算如下：
宽度 + 内边距 + 边框 = 元素的实际宽度
高度 + 内边距 + 边框 = 元素的实际高度
这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和填充被添加到元素指定的宽度/高度）。
下图显示了两个<div>具有相同指定宽度和高度的元素：
这个 div 较小（宽度为 300px，高度为 100px）。
这个 div 更大（宽度也是 300px，高度是 100px）。
他们俩<div>上面的元素最终具有不同的大小（因为 div2 指定了填充）：
这 box-sizing 属性解决了这个问题。
使用 CSS box-sizing 属性
这 box-sizing 属性允许我们将填充和边框包含在元素的总宽度和高度中。
如果你设置 box-sizing: border-box; 在元素上，填充和边框包含在宽度和高度中：
现在两个 div 的大小相同了！
万岁！
这是与上面相同的例子， box-sizing: border-box; 添加到两者<div>元素：
例子
.div1 {
宽度：300px；
高度：100px；
边框：1px 实心蓝色；
盒子尺寸：边框；
}
.div2 {
宽度：300px；
高度：100px；
填充：50px；
边框：1px 实心红色；
盒子尺寸：边框；
}
亲自尝试 »
由于使用的结果 box-sizing: border-box; 好多了，许多开发人员希望他们页面上的所有元素都能以这种方式工作。
下面的代码确保所有元素都以这种更直观的方式调整大小。许多浏览器已经使用 box-sizing: border-box; 对于许多表单元素（但不是全部 - 这就是为什么输入和文本区域在宽度：100％;时看起来不同）。
将其应用于所有元素是安全且明智的：
CSS 盒子尺寸属性
| 财产 | 描述 |
|---|---|
| 盒子大小 | 定义元素的宽度和高度如何计算：是否应包括填充和边框 |
