我们来上一组对比图:
两个图像的代码如下:
<style>
.a1 {
width: 200px;
height: 200px;
background-color: pink;
}
.a2 {
width: 200px;
height: 200px;
background-color: pink;
/* box-sizing: border-box; */
padding: 10px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="a1">这是一个比较小的框</div>
<div class="a2">这是一个比较大的框</div>
</body>
我们在代码中设置两个图像的width和height是一样的,然后唯一的不同就是比较大的框加上了border和padding,很明显撑大了盒子。
这个时候,我们添加box-sizing:border-box这段代码,得到如下:
<style>
.a1 {
width: 200px;
height: 200px;
background-color: pink;
}
.a2 {
width: 200px;
height: 200px;
background-color: pink;
box-sizing: border-box;
padding: 10px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="a1">这是一个比较小的框</div>
<div class="a2">这是一个比较大的框</div>
</body>
图像变成了这个样子:
很明显,box-sizing中的border-box能够起到防止撑大盒子的作用,最简单的意思就是:让盒子的宽高包含了padding值和border的值。