前端ABC开头先提问一个问题，一个设置了width为100px的div，它的宽度就一定是100px吗？？这100px是什么宽呢？？
这就要提到一个属性：box-sizing：有3个值供选择 content-box|border-box|inherit;
content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。（默认）
border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
举个栗子看的更明白
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.d1 {
width: 100px;
height: 100px;
padding: 5px;
border: 5px solid red;
margin: 10px;
}
.d2 {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 5px;
border: 5px solid red;
margin: 10px;
}
</style>
<body>
<div class="d1">d1</div>
<hr>
<div class="d2">d2</div>
</body>
</html>
在浏览器中效果更明显
d1的宽度为：content(100)+padding(5*2)+border(5*2) = 120
d2的宽度为：100
由此得出结论：
content-box中：设置的width:100px只是单纯内容区域的宽度
border-box中：设置的width:100px不仅包括conent，还有padding和border，他们挤占了content，这时content变成了80px
由此也回答了最开始提出的问题：
若是content-box(默认)：div的宽不一定就是100px，100px只是div内容的宽度
若是border-box：div的宽度一定是100px
欢迎分享本文，转载请保留出处：前端ABC » 加深一下对css盒模型的理解