前端必知必会-CSS box-sizing 属性

---

CSS 框尺寸

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

没有 CSS box-sizing 属性

默认情况下，元素的宽度和高度按以下方式计算：

宽度 + 填充 + 边框 = 元素的实际宽度
高度 + 填充 + 边框 = 元素的实际高度

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

下图显示了两个具有相同指定宽度和高度的 <div> 元素：

上面的两个 <div> 元素最终的大小不同（因为 div2 指定了 padding）：

示例

.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 属性允许我们将 padding 和 border 包含在元素的总宽度和高度中。

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

太棒了！

这是与上面相同的示例，使用 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%; 时看起来不同的原因）。

将其应用于所有元素是安全且明智的：

示例

* {
box-sizing: border-box;
}

CSS 框尺寸属性

属性	描述
box-sizing	定义元素的宽度和高度的计算方式：是否应包括填充和边框

---

总结

本文介绍了CSS box-sizing 属性的使用，如有问题欢迎私信和评论