疑似 iOS 微信浏览器的 bug 监听 iOS 键盘事件 document.body.addEventListener("focusin", () => { console.log("键盘弹起"); }); document.body.addEventListener("focusout", () => { console.log("键盘收起"); ...

浏览器中有很多和高度、宽度相关的属性，那么他们到底有什么不一样呢？他们是如何定义的呢？ Element.clientWidth MDN 定义如下： The Element.clientWidth property is zero for inline elements and elements with no CSS; otherwise, it's the inner ...

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

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

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

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

截取 1 行 .text-cut { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 截取 2 行 .text-cut-2 { display: -webkit-box; overflow: hidden; white-space: ...

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

{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } ` ...

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