外边距叠加问题
当两个外边距相遇时(中间没有border、padding等)
凡是未形成块级格式化上下文(BFC)的盒子。均会与相邻的盒子产生外边距叠加的效果
BFC形成条件
1.float
2.position：absolute/fixed
3.inline-block/table-cell/table-captions(display: table也会有清除浮动效果，但是不是形成了bfc)
4.block元素+overflow
BFC的特点
1.阻止外边距的叠加(外边距不会与其他盒子叠加)
2.BFC边框(或者隐形边框)不能与它内部的元素外边框重叠
3.可以包含浮动
清除浮动
利用bfc或者伪元素 + clear: both
水平垂直居中
1.利用display: table-cell属性
2.利用行内元素vertical-align: middle + 伪元素height: 100%
.demo-outer {
width: 800px;
height: 800px;
margin: auto;
text-align: center;
border: 1px solid #000;
}
.demo-outer:after {
content: "";
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
.demo-inner {
display: inline-block;
vertical-align: middle;
}
3.利用行内元素+父元素line-height = height
