CSS 盒模型
CSS 盒模型
CSS 的 box-sizing 属性允许我们将内边距和边框包含在元素的总宽度和高度中。
没有 CSS 盒模型属性
默认情况下，元素的宽度和高度计算如下
宽度 + 内边距 + 边框 = 元素的实际宽度
高度 + 内边距 + 边框 = 元素的实际高度
这意味着：当您设置元素的宽度/高度时，元素通常看起来比您设置的更大（因为元素的边框和内边距会添加到元素指定的宽度/高度中）。
以下图示显示了两个具有相同指定宽度和高度的 <div> 元素
此 div 较小（宽度为 300px，高度为 100px）。
此 div 较大（宽度也为 300px，高度为 100px）。
上面的两个 <div> 元素在结果中最终具有不同的尺寸（因为 div2 指定了内边距）
示例
.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: border-box; 设置为元素，则内边距和边框将包含在宽度和高度中
现在两个 div 的尺寸都相同！
太好了！
以下是与上面相同的示例，其中 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;（但并非所有 - 这就是为什么输入和文本区域在 width: 100%; 时看起来不同的原因）。
将其应用于所有元素是安全和明智的
CSS 盒模型属性
| 属性 | 描述 |
|---|---|
| box-sizing | 定义元素宽度和高度的计算方式：是否包含内边距和边框。 |
