标准盒模型和IE盒模型（含运行代码截图）
盒模型有两种
1W3C推出来的盒模型，称为标准盒模型
box-sizing属性是content-box ；宽度是content
2IE推出来的盒模型，称为IE盒模型（或者怪异盒模型）
box-sizing属性是border-box ；宽度是content + padding * 2 + border * 2
显然IE推出来的盒模型是比较合理的。
从我们经常用到的元素offsetWidth 属性（或平常的页面布局）就可以看出来
node.offsetWidth = content + padding * 2 + border * 2
box-sizing属性
css3推出box-sizing属性，因此盒模型语法如下
box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 |
| border-box | 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
运行图
Hello World!
<!DOCTYPE html>
<html>
<body>
<div style="box-sizing:border-box;margin:1px;padding:1px;border:1px solid #000;width:500px;"><p id="intro">Hello World!</p></div>
<script>
var txt=document.getElementById("intro");
console.log(txt.parentNode.scrollWidth);//498
console.log(txt.parentNode.offsetWidth);//500
console.log(txt.parentNode.clientWidth);//498
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div style="box-sizing:content-box;margin:1px;padding:1px;border:1px solid #000;width:500px;"><p id="intro">Hello World!</p></div>
<script>
var txt=document.getElementById("intro");
console.log(txt.parentNode.scrollWidth);//502
console.log(txt.parentNode.offsetWidth);//504
console.log(txt.parentNode.clientWidth);//502
</script>
</body>
</html>
更多理解
块级元素存在margin，padding(边距)，且都能生效。
行内元素也存在margin，padding(边距)，但不是都可以生效。
只有margin-left，margin-right和padding-left，padding-right可以生效（看到效果）。
<span id="pre" style="margin-left:12px;margin-right:12px;">Hello World!</span>
<span id="next" style="margin-left:12px;">Hello World!</span>
相邻的块级元素的margin-top、margin-bottom会交汇重叠。
比如下面两个相邻节点（pre和next）pre节点的margin-bottom和next节点的margin-top，绘制时只认最大的边距。
<p id="pre" style="margin-top:12px;margin-bottom:12px;">Hello World!</p>
<p id="next" style="margin-top:12px;">Hello World!</p>
再继续深讲盒模型，就到了BFC(块级格式化上下文)了
