關於li的排列，個人面試題

 

來到北京的第二週，收到了單位的面試，一面的時候面試官問了微信錢包裏的那個快速入口的排列，我當時在面試官的引導下答的還能夠，可是在實際中有不少的方法和各自不一樣的問題，我來總結下。

1.flex佈局，其實在移動端最合適的就是彈性佈局，在移動端上解決問題使用flex最爲合適，也很方便

#warp{
            display: flex;
            justify-content: flex-start;
            border: 1px solid gray;
        }

若是div過多，felx屬性 flex-wrap默認屬性nowrap，是不會換行的，只能默認的等比例壓縮素有的div，

 

 

咱們把flex-wrap設置爲wrap就能夠換行

 

固然除了從左到右，flex佈局還能夠這樣，右側對齊 flex-end

 

還能夠這樣 center

 

這樣 space-around（每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍）

這樣space-between(項目兩側對齊，項目之間的間隔相等)

詳細的就很少說，能夠去看阮老師的教程。

2.浮動float，雖然flex很方便，可是在pc上仍是有兼容問題，在pc上float用的比較多，可是float也是有一些問題須要解決。

代碼是這樣的

#warp div{
            background-color: #4cae4c;
            height: 80px;
            width: 200px;
            text-align: center;
            line-height: 80px;
            border: 1px solid crimson;
            float: left;
        }

而後咱們換個方向，注意順序

float就是這些問題

1.最重要的是高度塌陷，父容器這個div已經變成了兩條線，只剩下邊框了，浮動以後脫離了文檔流，父元素高度塌陷，咱們須要給父元素加上僞類，而後清除浮動

2.順序問題，當咱們使用浮動，要注意浮動的順序和咱們div排列的順序是一致的

3.display:inline-block 把元素設置爲行內-塊級元素，這樣這些div就會順序排列，這彷佛是一種很好的解決辦法，可是有空白。

這個空白實際上是空白符，由於 inline-block 會使元素在行內排列，也就是跟文字在一塊兒排列，而咱們源代碼中 div 和 div 之間的空格、Tab、換行符在瀏覽器裏會被合併成一個空白符，因此就會出現縫隙

經過給父元素設置 font-size: 0; ，使空白符不可見。但會致使子元素中繼承的字體大小也爲 0，解決方案： 

1. 能夠明確子元素內字體大小的，爲其單獨設置文字大小。
2. 可使用 rem 做爲字體大小單位來繼承 HTML 根元素的字體大小屬