css盒模型简介
1、css盒模型是网页布局的基石！盒模型从内到外一共包含四个区域：
内容区 、内填充（补白）、边框、外间距。其中内填充和外边距得以实现的途径要依靠padding和margin两个属性。
2、padding用法：
1、padding长在内容区与边框之间，在盒子内部；
2、padding是为了调整子元素在父元素里面的位置关系；
3、padding的特点：padding的值会把盒子撑大；
4、如果盒子要想保持原来的大小，需要在原来宽高的基础上减去padding值；
5、给与一个方向设定padding值：padding-left/right/top/bottom;
6、padding不能设置负值；
7、padding不会对背景图位置有影响；
8、如果一个盒子没有设定固定的宽高，加上padding值以后可以不用减。
3、margin用法：
1、margin长在元素之外；
2、margin控制同级元素之间的位置关系；
3、margin不会对盒子本身造成影响；
4、给单一方向添加margin值：margin-left/right/top/bottom；
5、margin可以设置负值；
6、控制子元素在父元素之间的位置关系，用padding最合适；
7、margin常出现的bug：
a、当父元素在第一个子元素没有设置浮动的状态下，如果第一个子元素添加margin-top/bottom会错误的把间距加到父元素上面；
b、上下相邻两个元素之间的margin值，不会叠加，按照最大值来设定。左右相邻两个元素之间的margin值会叠加
8、margin：0 auto；即上下0，左右auto，会让子元素在父元素中居中。