1.组成部分
盒子 = content（内容） + padding（填充） + border（边框） + margin（边距）
1.标准模式
元素的width * height = content
box-sizing:content-box;
2.IE非标准模式
元素的width * height = content + padding + border
box-sizing:border-box;
3.特殊描边outline
outline是不占用原有盒子的空间，不影响布局，填充的内容只是渲染展示。
outline在border 外部描边。
<html>
<head>
<style>
body{
margin: 0;
padding: 0;
border: 3px solid red;
}
.outer {
border: 10px solid orange;
padding: 10px;
margin: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: olivedrab;
}
</style>
</head>
<body>
<div class="outer">
<div class="box"></div>
</div>
</body>
</html>
.outer {
border: 10px solid orange;
padding: 10px;
margin: 10px;
outline: 30px solid blue; /*设置描边*/
}
这里只在outer填充了 对应的边框蓝色，原有的大小和边距不变化。
