CSS nth-child 详解

举个例子: ul li:nth-child(3n + 3) { color: #ccc; } 总的来说 nth-child() 圆括号里面支持两个关键词:even 与 odd。他们应该很明显的,even 选择偶数标签,如第 2、第 4、第 6 等等。odd 选择奇数标签,如第 1,第 3,第 5。 正如你在第一个例子里面看到的,nth-child() 的圆括号里也支持方程式的,是最简单的...
CSS

移动端 CSS 适配笔记

红米手机 1 - 圆角外背景色溢出当我们在做手机 app 开发的时候常常会用到 Webview 模式,ui 部分全部用 html 和 css 来实现。 遇到一个问题,对一个 dom 元素设置了圆角 border-radius:10px;background:#fff。在红米下,四个圆角外面会溢出白色的背景。蛋疼。 解决方法: 在 dom 的样式上加上 background-clip:padd...
CSS

CSS 的结界 BFC

BFC 的定义BFC 全称 block formatting context,中文为”块级格式化上下文”。BFC 的表现原则为:如果一个元素具有 BFC,那么它的内部子元素再怎么翻江倒海,都不会影响外部的元素。因此,BFC 元素是不可能发生 margin 重叠的,另外,BFC 元素也可以用来清除浮动的影响。 那么满足什么条件才会有 BFC 呢?只要满足下面任意一个条件就会触发 BFC: h...
CSS

自定义浏览器滚动条的样式

编辑历史: 2018-05-01 增加 better-scroll 2018-02-06 增加 iScroll 2016-07-20 初版 前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开 Chrome 的调试工具看了一下,发现不是用 JavaScript 来模拟实现的,觉得有必要折腾一下。于是在各大浏览器中对比了一下,发现只用 Chrome 适用,也就是说这个用的是 Chr...
CSS

CSS3 text-overflow 字符串截取

WebKit 浏览器截取 1 行.text-cut { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 截取 2 行.text-cut-2 { display: -webkit-box; overflow: hidden; white-space: normal !important...
CSS

让页面的字体变得更清晰(css 实现)

css3 属性 -webkit-font-smoothing对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多。font-smoothing 是非标准的 CSS 定义。它被列入标准规范的草案中,后由于某些原因从 web 标准中被移除了。但是,我们可以用以下两种定义进行抗锯齿渲染 Webkit 在自己的引擎中支持了这一效果。-webkit-...
CSS

7 个你可能不认识的 CSS 单位

rem我们首先介绍下和我们熟悉的很相似的货。em 被定义为相对于当前对象内文本的字体大小。炒个栗子,如果你给 body 小哥设置了 font-size 字体大小,那么 body 小哥的任何子元素的 1em 就是等于 body 设置的 font-size。 <body> <div class="test">Test</div> </body> body { fo...
CSS