一個常年更新的CSS採坑合集

CSS採坑合集

這篇文章會常年更新，在項目中進行CSS實現的時候，常常會遇到不少奇怪的問題，有些問題曾經遇到過可是又忘記了（多是記憶力衰退吧~），因此這裏作個合集，溫故而知新。
這個Collection會主要分紅幾個大的章節，章節不以元素類型做爲切分標準，而是以功能做爲標準。每一個章節是大概的類型集合：

1. 容器
2. 樣式hack

容器

本章主要是和做爲容器的元素相關的內容。

<img>的父元素不可以被正確撐開

問題

當咱們用一個div嵌套着img標籤的時候，通常爲了自適應圖片的高度，都會將圖片的寬度指定，而高度自適應。這時候若是不指定父元素，也就是div標籤的高度，那麼父元素的高度可能會出現錯誤。

復現

以下圖，能夠看到灰色區域和紫色區域有留白：

解決方案

形成這樣狀況的緣由在於<img>標籤是replaced inline element，用做圖片的佔位符，在CSS渲染過程當中會帶有部分行內元素的效果，這裏若是想要撐開父元素，直接爲其設置display: block;便可。
在這裏能夠看到示例

樣式hack

本章主要是一些樣式實現的hack，大部分都是常常須要使用到的樣式。

移動端水平滾動元素

需求

這裏指的不是整個頁面的水平滾動，而是在移動端開發常見的頁面某一個橫向溢出元素水平滾動。常常會被使用在各類banner，navigation，selector中。

方案

也沒有太多好說了，查了不少文章，首先，通常這類元素都是一個列表，進行橫向滾動來讓用戶進行選擇（固然能夠不是列表）。
當列表寬度不足一整行的時候，正常顯示便可。超出一整行的時候，能夠進行橫向滾動。
這裏不考慮採用JavaScript的實現，對於低端設備來講，這種實現對於設備的壓力過大。
考慮overflow-x: scroll;屬性，這個屬性用來指定某個元素在x軸方向上的溢出處理，除了scroll屬性值，還有其餘和overflow的屬性值相似。這樣就保證了第一點，溢出能夠滾動。
第二點就是要將這些元素排列到一行中，不容許其換行。white-space: nowrap;，對於這個屬性，W3C標準上說的是：

文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。

那麼就須要保證須要滾動的子元素列表須要具備行內元素的性質，爲子元素加上display: inline-block;，在行內元素性質的基礎上保證塊級元素的特性。

// html
<ul class="x-scroll">
    <li class="item"><img src="https://via.placeholder.com/350x150" /></li>
    ...
</ul>
// less
.x-scroll {
    list-style: none;
    overflow-x: scroll;
    white-space: nowrap;
    .item {
        display: block;
    }
}

進階

經過上面的方法能夠實現到橫向排列的列表能夠水平滾動，可是會有一個很是醜陋的滾動條，通常在PC設備上，這種效果並不嚴重，而在移動端上，滾動條會給用戶很很差的體驗，消除這個滾動條，能夠經過固定父元素高度，讓子元素偏移，這樣父元素能夠遮蓋住子元素的滾動條。
固然這不是最優解，由於移動端須要自適應的狀況很是多，鑑於大部分移動端都是套在webkit內核的瀏覽器中的，因此使用::-webkit-scrollbar僞選擇題來設置webkit中的滾動條樣式，就能夠隱藏掉了。

//less
.x-scroll {
    &::-webkit-scrollbar {
        width: 0; // 或者height: 0;也能夠，根據你的視覺稿進行調整。
    }
}

上述具體代碼能夠見codepen上面的DEMO,記得用Safari或者Chrome打開哦。