1 前言
要想清楚这个属性的作用,首先要理解盒子模型,盒子模型是指:外边距(margin)+ border(边框) + 内边距(padding)+ content(内容),可以把每一个容器,比如div,都看做是一个盒子模型。
2 未设置box-sizing与设置的区别
- 比如你给一个div设置宽高为200px,padding:10px,border: 3px solid red。
- 未设置:200px实际上设置是content的宽高,该div元素实际宽高为padding + border + content = 226px。
- 设置:200px设置就是该div的宽高,该div元素实际宽高为padding + border + content = 200px。
- 下面我们来看代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
/*div1未设置*/
.div1 {
height: 200px;
width: 200px;
background-color: green;
padding: 10px;
border: 3px solid red;
}
/*div2设置*/
.div2 {
height: 200px;
width: 200px;
background-color: pink;
padding: 10px;
border: 3px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
</body>
</html>
- 效果图如下,我们可以看到div1盒子明显比div2盒子大。
- div1盒子模型
- div2盒子模型,我们可以看出,设置box-sizing后,我们指定的200px就是盒子的宽高了,添加padding和border后,content会跟随变化。