盒模型一共有两种模式：标准盒模型和怪异盒模型
盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。它允许我们在其它元素和周围元素边框之间的空间放置元素
一、标准盒模型
标准盒模型又称W3C标准盒模型，其中标准盒模型的 width 等于 content 的宽度，标准盒模型的 height 等于 content 的高度。
标准盒大小计算公式：width(content) + padding + border + margin
二、怪异盒模型
怪异盒模型又称IE盒子模型，其中怪异盒子模型的 width 等于 content + padding + border 的宽度，怪异盒子模型的 height 等于 content + padding + border 的高度。
怪异盒大小的计算公式：width(content + padding + border) + margin
三、css样式
在 css3 中添加了对盒模型设置的属性 box-sizing
四、代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box {
margin: 30px;
padding: 20px;
width: 80px;
height: 40px;
border: 10px solid #00007e;
background: #fec997;
/* 设置怪异盒子类型
border-box ----怪异盒子类型
content-box ----标准盒模型
*/
box-sizing: border-box /* 设置怪异盒子类型 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
