盒子模型、外边距、内边距、塌陷问题的解决办法

盒子模型

盒子的大小：border + padding +content组成

内边距

盒子模型的内边距padding，当盒子设置内边距之后，会撑大盒子的尺寸，为了保证盒子的尺寸不变，就要给盒子减去padding区域的尺寸

设置上下左右外边距

单属性：

padding-left:px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;

复合属性：

设置上下左右

padding:10px;

设置上下、左右的padding

padding:10px 5px;

设置上、左右、下的padding

padding:10px 20px 0;

设置上、下、左、右

padding:10px 20px 30px 40px;

外边距

是设置盒子与盒子之间的间距

单属性：

margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;

复合属性和padding一样

外边距合并

垂直方向排列两个块元素的时候，分别给上面的盒子设置一个向下的外边距，给下面的盒子设置一个向上的外边距，此时就会发生外边距合并，当两个值相同时，就是该值，当两个值不同时是较大的那个值

外边距塌陷

嵌套的两个块元素，给子元素（第一个）设置一个向上的外边距，此时父元素会跟着掉下来，形成外边距塌陷

因为这两个div处在同一个bfc（body元素）中所以会发生塌陷，解决办法就是放在两个不同的bfc中

解决方案：

1、给父元素设置上边框

2、给父元素设置overflow属性

3、给父元素设置浮动

4、给子元素设置浮动

5、绝对定位或者固定定位

块元素水平居中

margin:0 auto;