CSS矿坑合集本文全年更新。在项目中实现CSS时，我们经常会遇到很多奇怪的问题。有些问题遇到了却忘记了（可能是失忆了~），所以在此收藏，温故知新。本合集将主要分为几个大篇章。章节不是按元素类型划分的，而是按功能划分的。每一章都是类型的总集：containerstylehackcontainer这一章主要讲元素作为容器。![]()
的父元素无法正确展开。我们在用div嵌套img标签的时候，一般为了适配图片的高度，会指定图片的宽度，高度自适应。这时候如果不指定父元素，即div标签的高度，父元素的高度可能是错误的。重现下图，可以看到灰色区域和紫色区域有空白：将包含在CSS渲染过程中。一些内联元素的效果。这里如果想展开父元素，可以直接设置display:block；为了它。在这里您可以看到示例样式hacks。本章主要是一些样式实现的hack，大部分都是常用的样式。移动端对水平滚动元素的要求这里不是指整个页面的水平滚动，而是移动端开发的普通页面中某个水平溢出元素的水平滚动。它经常用于各种横幅、导航和选择器。解决方法就不多说了。我查了很多文章。首先，这类元素一般是一个列表，横向滚动让用户选择（当然也可以不是列表）。当列表宽度小于整行时，可以正常显示。当它超过整行时，水平滚动是可能的。这里不考虑使用JavaScript的实现。对于低端设备，这种实现对设备的压力太大。考虑overflow-x:scroll;属性，用于指定元素在x轴方向的溢出处理。除了scroll属性值外，还有其他类似于overflow的属性值。这样就保证了第一点，溢出可以滚动。第二点是将这些元素排成一行，不允许它们换行。white-space:nowrap;，对于这个属性，W3C标准说：文本不会换行，文本会在同一行继续，直到遇到
标签。然后需要保证需要滚动的子元素列表需要有内联元素的属性，添加display:inline-block;给子元素在行内元素属性的基础上保证块级元素的特性。//html...//less.x-scroll{列表样式：无；溢出-x：滚动；空白：nowrap；.item{显示：块；}}Advanced通过上面的方法，列表可以水平排列水平滚动，但是会出现非常难看的滚动条。一般在PC设备上，这种影响并不严重，但是在移动端，滚动条会给用户带来非常不好的体验。要消除这个滚动条，可以通过固定父元素的高度，偏移子元素，让父元素覆盖子元素的滚动条。当然这不是最优方案，因为有很多情况需要移动端自适应。由于大部分移动端都在浏览器中设置了webkit内核，所以使用::-webkit-scrollbar伪选题设置webkit的滚动条样式可以隐藏。//less.x-scroll{&::-webkit-scrollbar{宽度：0;//或者height:0;也可以根据您的模型进行调整。}}上面的具体代码可以在codepen上的DEMO中找到，记得用Safari或者Chrome打开。
