在 Web 内容中使用系统字体
某天（2016.07.12）发现 GitHub 的字体比原来宽了一些，打开开发者工具一看，字体设置中多了两个奇怪的玩意： body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe »
等宽列背后的表格布局算法
引子 网页开发中，经常需要实现等宽列效果，比如 Web App 中的 TabBar、Slider 底部的等宽指示条，而且往往元素的个数是不确定的，无法设定固定的百分比宽度。 虽然借助 flexbox 可以轻松实现： .container { display: flex; } .item { flex: 1; } 但是，你别忘了国情，我朝一些倔强的 UA 并不支持 »
Flexbox 完全指南
背景 CSS Flexbox Layout（Flexible Box）模块（目前为 W3C 最终草案2016.03.01 更新为 CR —— 候选推荐规范）致力于提供一种更高效的布局方式，即便子项尺寸未知（或动态）的情况下，对齐、分布容器子项之间的空间，因此谓之「flex」。 弹性布局背后的主要思想是让容器能够改变子项的宽、高以及顺序，以最合适的方式填充可用空间（ »
HTML 和 Body 在 CSS 中的区别
在 CSS 中，<html> 和 <body> 的区别往往被忽略，全局样式或者定义在 <html> 上，或者定义在 <body> 上。实际上，两者是有区别的，不论是 CSS 老鸟还是新手， »
:nth-child 和 :nth-of-type 的区别
基本语法 :nth-child(an+b) 选择符匹配有父元素、前面有 an+b-1 个兄弟元素的元素。 element:nth-child(an + b) { style properties } :nth-of-type 选择符匹配有父元素、前面有 an+b-1 个同名兄弟元素的元素。 element:nth-of-type(an + b) { style »
五种鲜为人知的 CSS / JS 交互方式
使用 JavaScript 获取伪元素样式属性 众所周知，JS 可以使用 style 属性获取普通元素的 CSS 样式，那伪元素呢？也是可以的。 // Get the color value of .element:before var color = window.getComputedStyle( document.querySelector('. »
将HTML和CSS解耦
多年来，Web 标准社区一直在谈论关注分离（separation of concerns），就是将 CSS 、JavaScript、HTML 分开放在各自的文件里。我们也已经这样做了。 CSS Zen Garden （CSS 禅意花园）证明相同的 HTML 结构可以通过改变 CSS 来实现许多不同设计，但我们只看到了一面。我们在项目中经常可能发生的是： HTML 结构变化。 »