行內(nèi)元素/塊元素/行內(nèi)塊元素
行內(nèi)元素：
1）寬高不可控坐搔；
2）它的寬度就是文字或者圖片的寬度何恶；
3）行內(nèi)元素一行顯示捌议，當一行不夠顯示的時候換行哼拔。
塊級元素：
1）寬高可控制；
2）塊級元素的寬度默認為100%瓣颅，除非設(shè)置了它的寬高倦逐；
行內(nèi)塊元素：
1）寬高可控制；
2）同一行顯示宫补。
怎么創(chuàng)建BFC (Block Fromatting Context)塊級格式化上下文
BFC 特性(功能)
1）使 BFC 內(nèi)部浮動元素不會到處亂跑檬姥；
2）和浮動元素產(chǎn)生邊界。
怎么創(chuàng)建
1）float的值不是none守谓。
2）overflow的值不是visible
3）position的值不是static或者relative穿铆。
4）display的值是inline-block、inline-flex斋荞、flex荞雏、table-cell、table-caption
清除浮動(清除浮動主要是為了解決父元素因為子元素浮動而引起內(nèi)部高度為0的方法)
1）額外標簽法：在最后一個浮動標簽后平酿，新增一個標簽凤优，給其設(shè)置clear:both
2）BFC 父元素｛overflow:hidden/auto;｝
3）偽元素：給父元素添加偽元素 :after{content:’’; display:block; clear:both;}
div垂直居中
1）postion+margin(定高):
設(shè)置父元素position:relative
子元素height:100px;postion:absolute;top:50px;margin-wop:-50px
2)position+transform(不定高):
設(shè)置父元素positon:relative
子元素position:absolute;top:50%;transform:translate(0,-50%)
3)百搭flex布局)(ie10+,不定高）
設(shè)置父元素display:flex;align-items:center
div水平居中
1)postion+margin(定寬):
設(shè)置父元素position:relative
子元素width:100px;postion:absolute;left:50px;margin-left:-50px
2)position+transform(不定寬):
設(shè)置父元素positon:relative
子元素position:absolute;left:50%;transform:translate(-50%,0)
3)百搭flex布局)(ie10+,不定寬）
設(shè)置父元素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
