行内元素/块元素/行内块元素
行内元素：
1）宽高不可控；
2）它的宽度就是文字或者图片的宽度；
3）行内元素一行显示，当一行不够显示的时候换行。
块级元素：
1）宽高可控制；
2）块级元素的宽度默认为100%，除非设置了它的宽高；
行内块元素：
1）宽高可控制；
2）同一行显示。
怎么创建BFC (Block Fromatting Context)块级格式化上下文
BFC 特性(功能)
1）使 BFC 内部浮动元素不会到处乱跑；
2）和浮动元素产生边界。
怎么创建
1）float的值不是none。
2）overflow的值不是visible
3）position的值不是static或者relative。
4）display的值是inline-block、inline-flex、flex、table-cell、table-caption
清除浮动(清除浮动主要是为了解决父元素因为子元素浮动而引起内部高度为0的方法)
1）额外标签法：在最后一个浮动标签后，新增一个标签，给其设置clear:both
2）BFC 父元素｛overflow:hidden/auto;｝
3）伪元素：给父元素添加伪元素 :after{content:’’; display:block; clear:both;}
div垂直居中
1）postion+margin(定高):
设置父元素position:relative
子元素height:100px;postion:absolute;top:50px;margin-wop:-50px
2)position+transform(不定高):
设置父元素positon:relative
子元素position:absolute;top:50%;transform:translate(0,-50%)
3)百搭flex布局)(ie10+,不定高）
设置父元素display:flex;align-items:center
div水平居中
1)postion+margin(定宽):
设置父元素position:relative
子元素width:100px;postion:absolute;left:50px;margin-left:-50px
2)position+transform(不定宽):
设置父元素positon:relative
子元素position:absolute;left:50%;transform:translate(-50%,0)
3)百搭flex布局)(ie10+,不定宽）
设置父元素display:flex;justify-content:center;
4)子元素给宽
margin: 0 auto;
CSS外边距塌陷
什么是CSS外边距塌陷？
块的顶部外边距和底部外边距有时被折叠为单个边框，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷。
解决办法：
父元素添加代码段
1)padding:1px;
2)border:1px solid transparent;
3)overflow：hidden/auto;
4)float:left/right
5)position：absolute;
6)display:inline-block
