边框会影响盒子实际大小
边框会额外增加盒子的实际大小，因此我们有两种方案解决：
1.测量盒子大小的时候，不量边框
2.如果测量的时候包含了边框，则需要width/height减去边框宽度
内边距
如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子，解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。这个特点用于父子盒子模型中，如果子跟父盒子同样宽，就不用设置子盒子的宽度。
外边距典型应用
外边距可以让块级盒子水平居中，但是必须满足两个条件：
1、盒子必须指定了宽度（width）。
2、盒子左右的外边距都设置为auto。
.header { width: 960px; margin: 0 auto;}
行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
嵌套块元素垂直外边距的塌陷问题
对于两个嵌套（父子关系）的块元素，给子元素添加上外边距，父元素会塌陷较大的外边距值。
解决方案：
1、可以为父元素定义上边框。border:1px solid transparent;
2、可以为父元素定义上内边距。padding:1px;
3、可以为父元素添加overflow: hidden
还要其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷的问题。
清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
* {
padding: 0;
margin: 0;
}
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是如果转换为块级元素，上下左右都可以设置了。
