盒模型是面试中常考的一个内容，今天写这个笔记的原因就是：想让大家认真的理解IE盒模型和标准盒模型的区别。
那什么是IE盒模型呢？
盒模型是CSS中重要的一个概念，但是在IE5.5及更早的IE浏览器用的不是标准的盒模型，我们称之为IE盒模型。
那IE盒模型和标准盒模型的区别是什么呢？
答案是：IE的盒模型与标准盒模型（W3C盒模型）的区别在与width的计算。我们从下面的图来看一看：
标准盒模型的width就是content内容区域的宽度，而IE盒模型的width包括了content内容区域和border区域以及padding区域（即content+border+padding）
可能大家在看到上面的解释时有点懵，那下面我们来举一个例子：
我们先来看一下标准盒模型：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
border: 10px solid burlywood;
padding: 0 20px;
background: greenyellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
此时我们可以看到标准盒模型的宽度等于：200px + 20px * 2 + 10px * 2 = 260px;
接下来我们在来看看IE盒模型：
此时之需要加上box-sizing: border-box;即可设置IE盒模型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
box-sizing: border-box;
width: 200px;
height: 200px;
border: 10px solid burlywood;
padding: 0 20px;
background: greenyellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
此时神起的事情发生了，我们会发现IE盒模型的width为200px，它的实际内容conten为：width - 2 * border - 2 * padding = 200px - 2 * 10px - 2 * 20px = 140px
同理height的计算和width的计算是一样的，如果有兴趣的同学可以私下敲代码进行试验一下。
总结：box-sizing:border-box || content-box || inherit；
当使用content-box时：页面将采用标准模式来解析计算，content-box也是默认模式；
当使用border-box时，页面将采用怪异模式解析计算，怪异模式也称为IE模式；
当使用inherit时：页面将从父元素继承box-sizing的值。
