四个最诡异的 CSS 特性

JavaScript 作为一个创始人拍脑袋 10 天搞出的语言，JS 中包含了很多在今天看来很多不应该出现在现代语言中的诡异特性。其实，作为 Web 中必不可少的 CSS 语言也不逞多让。今天我就来聊聊我认为的那些最诡异的 CSS 特性。

overflow-x: scroll 和 overflow-y: visible

overflow 有个很诡异的特性。标准 规定：当 overflow-x overflow-y 其中有一项不为 visible，另一项中的 visible 值被计算为 auto

http://jsfiddle.net/yrvk6104/

这个诡异的设定经常会导致设计一些包含子菜单的侧边栏时出问题。侧边栏的 overflow-y: scroll 会强制将 overflow-x 设置为 auto，导致绝对定位的二级菜单显示不出来。解决方案只能是把一级菜单的 position: relative 去除（或直接改用固定定位），然后使用 JS 计算二级菜单应该摆放的位置。

值得一提的是：最近刚通过了一项 CSS 规范允许 overflow 一次指定两个值：https://github.com/w3c/csswg-...，它只是 overflow-x overflow-y 两属性连用的简写而已，对现有行为没有影响。

外边距折叠（margin collapsing，或简称边距折叠）

据说这个诡异的特性最初设计是为简化文章排版的。

https://jsfiddle.net/u3roktvg/1/

如示例：p 标签上下都有 1em 的边距，由于边距折叠的特性，上下相邻的 p 标签只相距 1em。第一个 p 标签和外层的 h1 也发生的边距折叠。如果打开 p 标签外层 div 的边框，可以看到 p 标签距离 h1 还应该更远。

边距折叠有几个基本的要求：

1. 只有上下边距会发生折叠
2. 发生边距折叠元素的 边距 必须位置上相邻（注意这里是边距占用的空间相邻，包括相邻同级元素的边距重合，和父子级元素边距重合）。边距之间不能有非外边距占用空间（例如 border、padding 等）阻隔

还有一种空元素的情况，我认为可以算是第二种情况的极端例子：https://jsfiddle.net/u3roktvg/2/

还有两个不发生边距折叠的情形：

1. 拥有新的块级格式上下文的元素（display: flow-root、overflow: hidden、position: absolute 等）其子元素不会和其外部其他元素发生边距折叠
2. 弹性布局元素的子元素之间不发生边距折叠

这两种情形通常可以用于规避边距折叠，给父元素设置 display: flex; flex-direction: column 可以解决一半以上边距折叠的情况了。

另外，css-tricks 上有一篇很好的文章：What You Should Know About Collapsing Margins

margin、padding 的百分比取值

标准规定：当元素的 margin、padding 取值为百分比时，其值始终按父元素的 宽度 计算，包括上下内外边距。

当然了，如果按照正常思维上下边距百分比取值基于父元素的高度计算，反而不如现在这样基于宽度计算有用：因为竟然有人想出了用这种特性实现保持元素的高宽比。

一个保持高宽比的例子：

https://jsfiddle.net/t75gnqwq/

不知道伟大的 CSS 之父设计这两个属性时是不是考虑到了这一层