CSS自定义属性(变量)
CSS box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。
没有CSS box-sizing属性
默认情况下,元素的宽度和高度计算如下:宽度+填充+边界=元素的实际宽度高度+填充+边界=元素的实际高度这意味着:当您设置元素的宽度/高度时,元素通常看起来比您设置的大(因为元素的边框和填充被添加到元素的指定宽度/高度)。下图显示了两个具有相同指定宽度和高度的& lt; div>元素:
<代码>学习Q-q-u-n: 784783012,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> ccs
& lt; style>
.div1 {
宽度:300 px;
身高:100 px;
边界:1 px固体蓝色;
}
.div2 {
宽度:300 px;
身高:100 px;
填充:50 px;
边界:1 px固体红;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=" div1 "在这个div更小(宽度为300 px高度为100 px)。;/div>
& lt; br>
& lt; div类=" div2 "在这个div更大(宽度也是300 px高度也是100 px)。;/div>
& lt;/body>
& lt;/html>
box-sizing属性解决了这个问题。
使用CSS box-sizing属性
box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。如果box-sizing: border-box;在元素填充上设置并且边框包含在宽度和高度中:
<代码>。div1 {
宽度:300 px;
身高:100 px;
边界:1 px固体蓝色;
box-sizing: border-box;
}
.div2 {
宽度:300 px;
身高:100 px;
填充:50 px;
边界:1 px固体红;
box-sizing: border-box;
}
由于使用它的结果box-sizing: border-box;非常好,许多开发人员希望他们页面上的所有元素都以这种方式工作。下面的代码确保以更直观的方式调整所有元素的大小。许多浏览器已经box-sizing: border-box;用于许多表单元素(但不是全部——这就是输入和文本区域在宽度上看起来不同的原因:100%;)。将其应用于所有元素是安全和明智的:
<代码> * {
box-sizing: border-box;
}
CSS盒大小调整属性
box-sizing定义如何计算元素的宽度和高度:是否应该包含填充和边框
