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 属性的使用,如有问题欢迎私信和评论