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会跟随变化。
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
