在 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 结构变化。 »