普通流布局
普通流布局：display : inline-block！這是一個傳說中取代float布局的存在?？戳艘恍┚W(wǎng)站，PC端浮動為主，移動端的也用的不多啊，已經(jīng)有些使用flex的了，說好的inline-block一統(tǒng)江湖呢？
使用inline-block之前先處理點小障礙：inline-block元素會有4px左右的空隙，這個是因為我們寫代碼時候的換行符所致。
解決辦法很簡單：在inline-block的父元素中設(shè)置樣式font-size：0；letter-spacing: -4px; 然后設(shè)置inline-block的所有兄弟元素 font-size：值；letter-spacing: 值px; 恢復(fù)正常的顯示。
另外還有一點需要注意的是inline-block默認(rèn)是基線對齊的，而inline-block的基線又跟文本基線一致，所以在內(nèi)容不同的時候并不能水平對齊。只需要用vertical-align顯式聲明一下top/bottom/middle對齊即可。這里補充一下基線的內(nèi)容，沒你想的那么簡單哦。分有文字和無文字兩種情況：
1）無文字：容器的margin-bottom下邊緣。與容器內(nèi)部的元素沒一毛錢關(guān)系。
2）有文字：最后一行文字的下邊緣，跟文字塊（p,h等）的margin、padding沒關(guān)系！注意是最后一行，無論文字在什么子對象容器內(nèi)在什么位置都沒關(guān)系，瀏覽器會找到最后一行文字對齊底部。
你們感受一下：
