资讯专栏INFORMATION COLUMN

一个常年更新的CSS采坑合集

chnmagnus / 2936人阅读

摘要:采坑合集这篇文章会常年更新,在项目中进行实现的时候,经常会遇到很多奇怪的问题,有些问题曾经遇到过但是又忘记了可能是记忆力衰退吧,所以这里做个合集,温故而知新。每个章节是大概的类型集合容器样式容器本章主要是和作为容器的元素相关的内容。

CSS采坑合集

这篇文章会常年更新,在项目中进行CSS实现的时候,经常会遇到很多奇怪的问题,有些问题曾经遇到过但是又忘记了(可能是记忆力衰退吧~),所以这里做个合集,温故而知新。
这个Collection会主要分成几个大的章节,章节不以元素类型作为切分标准,而是以功能作为标准。每个章节是大概的类型集合:

容器

样式hack

容器

本章主要是和作为容器的元素相关的内容。

... // 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打开哦。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113841.html

相关文章

  • 快应用采坑与flex布局讲解

    摘要:下面介绍有关的一些常用基本属性是定义主轴的方向,常用的有,。就直接讲一个稍微难一点的例子如果需要实现上面的情况,那么代码如下更多的就需要自己去探索,这里就不一一讲解了。 快应用之flex布局 在我们常用的布局中有display + position + float进行布局,但是这些布局或多或少都有些麻烦(虽然我最喜欢用position,哈哈啥都能干)。但是由于快应用只能够使用flex布...

    chnmagnus 评论0 收藏0
  • 【微信小程序】采坑之scroll-view组件

    摘要:使用中文类的组件时候也就是需要呈现中文的组件,不限于组件是会自动换行的,这时候需求在中强制不换行。在使用非中文组件时候就一切正常。至于为啥使用中文组件会有一部分留白,这个我不知道是个例还是,反正只需要用相对定位移一下就可以了。  一、摘要   今天在使用scroll-view组件的时候发现结果跟预想的不一样。其实也不是第一次用了,同样的写法却出现了意料之外的效果,所以认定是bug了。博主使用...

    张宪坤 评论0 收藏0
  • mac下安装JAVA开发工具(7)------mysql8.0.11链接采坑

    摘要:链接采坑安装出现各种链接问题准备工具更新包到最新版本连接池辅助包版本后分离出来的包,的时候还是只是一个包。 mysql8.0.11链接采坑 安装mysql8.0.11出现各种链接问题 1.准备工具 1.1 更新jar包到最新版本 c3p0-0.9.5.2.jar c3p0 mchange-commons-java-0.2.11.jar c3p0连接池辅助包 c3p0-0.9....

    wing324 评论0 收藏0
  • bootstarp table 采坑专辑

    摘要:首先这个组件是由国人大牛文翼开发的,地址我们在一次项目开发中使用到了原生的的前后分离技术。接口设计如,如果不知道那请百度把,返回的所有数据均为。 首先bootstarp table 这个组件是由国人大牛 文翼 开发的,github地址 https://github.com/wenzhixin/... 我们在一次项目开发中使用到了原生的php + html5的前后分离技术。 php接口设...

    wwq0327 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<