CSS采坑合集
这篇文章会常年更新,在项目中进行CSS实现的时候,经常会遇到很多奇怪的问题,有些问题曾经遇到过但是又忘记了(可能是记忆力衰退吧~),所以这里做个合集,温故而知新。
这个Collection会主要分成几个大的章节,章节不以元素类型作为切分标准,而是以功能作为标准。每个章节是大概的类型集合:- 容器
- 样式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
- ...
进阶
通过上面的方法可以实现到横向排列的列表可以水平滚动,但是会有一个非常丑陋的滚动条,一般在PC设备上,这种效果并不严重,而在移动端上,滚动条会给用户很不好的体验,消除这个滚动条,可以通过固定父元素高度,让子元素偏移,这样父元素可以遮盖住子元素的滚动条。
当然这不是最优解,因为移动端需要自适应的情况非常多,鉴于大部分移动端都是套在webkit
内核的浏览器中的,所以使用::-webkit-scrollbar
伪选择题来设置webkit
中的滚动条样式,就可以隐藏掉了。 //less.x-scroll { &::-webkit-scrollbar { width: 0; // 或者height: 0;也可以,根据你的视觉稿进行调整。 }}
上述具体代码可以见,记得用Safari或者Chrome打开哦。