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