一个常年更新的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打开哦。