比喻
盒子模型的比喻:一个鸡蛋放在盒子里
鸡蛋肯定无法充满盒子,鸡蛋与盒子之间的空隙叫做margin留白
鸡蛋皮叫border,边界,边界是可以有厚度的,也是可以有颜色的
鸡蛋皮里面就是鸡蛋清,鸡蛋清就是padding,衬垫,像海绵一样,向母亲的羊水一样保护着里面的鸡蛋黄
鸡蛋黄是核心,是事物的本身
backgroud-color:鸡蛋清和鸡蛋黄,也就是鸡蛋皮里面的东西
color:鸡蛋黄里面的文本颜色
width,height:鸡蛋黄的宽度高度
innerWidth,innerHeight:鸡蛋皮内侧的宽度高度
outerWidth,outerHeight:鸡蛋皮外侧的宽度高度
鸡蛋皮是有厚度的,是有颜色的，所以有：
border-width：鸡蛋皮的厚度
border-color：鸡蛋皮的颜色
margin是留白，是鸡蛋皮和盒子之间的空间，是不属于“鸡蛋”的部分。
一个实例
<html>
<head>
<style>
.simple {
500px;
margin: 20px auto;
border-color: aqua;
background: rebeccapurple;
}
.fancy {
500px;
margin: 20px auto;
padding: 50px;
border- 10px;
border-color: aqua;
background: rebeccapurple;
}
</style>
</head>
<body>
<div class="simple">one</div>
<div class="fancy">two</div>
</body>
</html>
当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。
以前有一个代代相传的解决方案是通过数学计算。CSS开发者需要用比他们实际想要的宽度小一点的宽度，需要减去内边距和边框的宽度。值得庆幸地是你不需要再这么做了......因为有了CSS有了box-sizing属性
box-sizing
人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 box-sizing: border-box; ：
.simple {
500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fancy {
500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
这样可以确保所有的元素都会用这种更直观的方式排版。
不过 box-sizing 是个很新的属性，目前你还应该像我上面例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。