超级会员免费看
CSS Box Sizing属性改变元素的宽高计算方式，让宽度和高度包含内边距和边框。默认情况下，元素的实际尺寸会因内边距和边框增加。通过设置`box-sizing: border-box;`，元素的指定宽度和高度将包括内边距和边框，使得尺寸更加可控。应用此属性能实现更直观的元素大小调整。
CSS Box Sizing
CSS box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。
假如不指定 CSS box-sizing 属性
默认情况下，元素的宽度和高度是这样计算的：
- width + padding + border = 元素的实际宽度
- height + padding + border = 元素的实际高度
这意味着：当您设置元素的宽度/高度时，该元素通常看起来比您设置的更大（因为元素的边框和内边距已被添加到元素的指定宽度/高度中）。
下图展示了两个有相同指定宽度和高度的 <div> 元素：
上面的两个 <div> 元素在最终结果中呈现出不同的尺寸（因为 div2 指定了内边距）：
实例
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
&l
订阅专栏 解锁全文
3506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
