一、简述
- 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
- CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：Margin外边距，Border边框，Padding内边距，和Content实际内容。
- 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型.png
二、思考
下面我们来看下这个例子，给出下面的HTML代码，将他放到Chrome浏览器中运行，问：三个box的蓝色区域的宽分别是多少px?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<style type="text/css">
div{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 10px solid red;
background-color: blue;
}
#box2{
box-sizing: border-box;
}
#box3{
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
</body>
</html>
三、结果分析
box1.png
box2.png
从上面的结果可以看出第一个和第三个盒子的蓝色区域的宽是120px，第二个盒子的蓝色区域的宽是80px，很明显content-box是标准盒子模型，而border-box是怪异盒子模型。
四、总结
- 给标准盒子模型设置width和height属性时，它只是包含了Content实际内容部分，增加的其他部分是另外计算的，而给怪异盒子模型设置width和height属性时，它是包含了Border + Padding + Content三个部分。
- 不管是标准盒子模型还是怪异盒子模型，background-color样式总是对Padding + Content两个部分生效的。
更多个人文章
