在网站布局中，我们会使用各种各样的元素，这些元素本质上就是一个个小的容器，也称之为盒子，盒子里面可以放置文本，图片，或者其他元素。
什么是 CSS 盒模型呢？
CSS 盒模型本质上是一个包裹每个 HTML 元素的盒子，包含 margin、border、padding 和 content 四个部分。
浏览器就是通过盒模型，来计算元素在网页中占据的空间大小的。
前面我们介绍过这些盒模型的要素：Content，表示盒子的内容，包含文本、图像等等。Padding，表示填充内容周围的一个区域，它是透明的。Border，表示围绕填充和内容的边框。Margin，表示边框以外的区域，它也是透明的。
我们来举个例子。
创建一个 019-css-box-model 文件夹，在文件夹里创建一个 box-model-1.html 文件和一个box-model-1.css 文件。
构建 html 基础代码，引入样式文件。为了便于比较效果，我们定义两个 div 元素，添加不同的类名，补全文本。
HTML
<div class="box1">
盒子模型组成部分:内容,内边距,边框,外边距
</div>
<div class="box2">
盒子模型组成部分:内容,内边距,边框,外边距
</div>
CSS
* {
margin:0;
padding:0
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: orange;
border:20px solid gray;
padding:20px;
margin:20px;
}
.box2 {
background-color: yellow;
}
打开 CSS 文件，定义通配符选择器，声明样式 margin: 0，padding: 0。取消所有元素默认的边距和填充样式。
定义 div 选择器，声明样式：width: 200px，height: 200px。为两个 div 元素添加宽度和高度。
定义 .box1 选择器，声明样式：background-color: orange。
定义 .box2 选择器，声明样式：background-color: yellow。
在浏览器里预览效果，两个有背景颜色的盒子就做好了。
给 box1 添加样式：border: 20px solid gray，为橙色的盒子增加一个边框。
对比黄色的盒子，橙色盒子总宽度增加了 40px，总高度也增加了 40px。
继续给 box1 添加样式：padding: 20px。
此时橙色的盒子继续变大。对比黄色的盒子，宽度和高度又增加了40px。
继续给 box1 添加样式：margin: 20px。
这时我们发现，因为添加了外边距，橙色盒子的位置发生了偏移。
通过这个例子我们发现，给元素添加内填充、边框以及外边距之后，盒子会变大并发生位置变化。
那么，如何在所有浏览器中正确设置一个元素的宽度和高度呢？这对于精确的页面布局，意义重大！
计算盒子的宽度和高度，请牢记这两个公式：
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
再次强调：当应用 CSS 设置一个元素的 width 和 height 属性时，只是设置了元素内容区域的宽度和高度。要计算一个元素的完整尺寸，必须要加上填充、边框和边距。
我们将上面这种计算元素大小的盒模型，称作标准盒模型。
那能不能给元素设置了 margin 和 padding 属性后，元素本身的宽高就固定为设置的这个值呢？这就要应用另外一种盒模型，叫做怪异盒模型。
给元素声明 box-sizing 属性，取值为 border-box，这个元素就按照怪异盒模型来呈现大小了。
我们先来做个例子。
在 019-css-box-model 文件夹下，创建一个 box-model-2.html 文件和一个box-model-2.css 文件。
构建 html 基础代码，引入样式文件。为了便于比较效果，我们还是定义两个 div 元素，添加不同的类名，补全文本。
HTML
<div class="box1">
我是一个div,用来演示怪异盒子
</div>
<div class="box2">
我是一个div,用来进行做比较
</div>
CSS
*{
margin:0;padding:0
}
div{
width: 200px;
height:200px;
}
.box1{
background-color: orange;
box-sizing: border-box;
border:20px solid gray;
padding:20px;
margin:20px
}
.box2{
background-color: yellow;
}
打开 CSS 文件，定义通配符选择器，声明样式 margin: 0，padding:0。取消所有元素默认的边距和填充样式。
定义 div 选择器：声明样式：width: 200px，height: 200px。
定义 .box1 选择器，声明样式：background-color: orange。
定义 .box2 选择器，声明样式：background-color: yellow。
在浏览器里预览效果，两个有背景颜色的盒子就做好了。
给 box1 添加样式：box-sizing: border-box，触发怪异盒模型。继续添加样式 border: 20px solid gray，padding:20px。
可以看到，box1 添加了边框和内边距，但是大小并没有改变，宽高仍然是200px。显而易见，内容的大小被压缩了。
继续为 box1 添加样式：margin: 20px。
大家可以猜一下，外边距会不会继续压缩内容呢？
仔细观察一下，box1 位置发生了偏移，观察一下容器的大小，并没有变化。
所以，怪异盒模型宽度和高度的计算公式为：
盒子的宽度 = CSS样式设置的 width 值 + 左边距 + 右边距
盒子的高度 = CSS样式设置的 height 值 + 左边距 + 右边距
实际上，box-sizing 属性还有一个值： content-box，就是用来触发元素的标准盒模型。这也是元素盒模型的默认值，如果没有给元素设置 box-sizing 属性，容器的大小就按照标准盒模型来计算。
回到样式代码，将 box1 的 box-sizing 属性值修改为 content-box。
我们发现，容器总宽高变为了 320px。
注释掉box-sizing: content-box，容器的总宽高仍然是 320px。
HTML
<!--回答问题: -->
<div class='box'></div>
<style>
div {
width:100px;
height:100px;
background-color:orange;
box-sizing:content-box;
border:10px solid gray;
}
.box {
width:200px;
padding:200px;
border-top:10px solid yellow;
margin:20px 30px;
}
</style>
