盒子的属性：width、height、padding、border、margin
盒子分两种：
1.标准W3C盒子模型
标准W3C盒子模型包括margin、border、padding、content，并且content不包括其他部分。
2.IE盒子模型
标准W3C盒子模型包括margin、border、padding、content，并且content包括border和padding。
ICSS盒模型和IE盒模型的区别：
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
在IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
温馨提示：<body>标签也有margin
很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的。
正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。
解决方案：可以在网页里清除所有的margin与padding，代码如下：
*{
padding:0;
margin:0;
}
但是，*的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
关于width、height
真实占有宽度 = 左border + 左padding + width + 右padding + 右border
真实占有宽度不变，所以 width+ ==>padding-
关于padding
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域。
padding：30px 20px 10px 5px
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
padding: 20px 40px 60px;（上20px；左、右40px；下60px。）
后者居上。比如：padding: 20px;padding-left: 30px;
所以正确的是：padding：20px 20px 20px 30px
认识border
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
border综合属性：border:1px solid red;拆分开来，border包括：border-width、border-style、border-color。
css 外边距合并（叠加）
两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：
实际开发中遇到的和框模型相关的应用及小问题。
1 margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题）
以第一个子元素的margin-top 为例：
当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：
（1）给父元素加边框border （副作用）
（2）给父元素设置padding值 （副作用）
（3）父元素添加 overflow：hidden （副作用）
（4）父元素加前置内容生成。（推荐）
2 浏览器间的盒子模型。
（1）ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。
（2）标准盒子模型与IE模型之间的差异：
标准的盒子模型就是上述介绍的那种，而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。解决办法就是：在html模板中加doctype声明。
3 用盒子模型画三角形
详细了解：
https://blog.csdn.net/qq_34382449/article/details/81234653
http://www.cnblogs.com/blosaa/p/3823695.html
