四個最詭異的 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 之父設計這兩個屬性時是否是考慮到了這一層😂有人提出過一個名詞叫「基於巧合的編程」，那麼這種規範叫作「基於巧合的設計」再好不過了

transform 中的 position: fixed 元素

固定定位（position: fixed）簡而言之（不太規範的描述）就是 固定 基於視口絕對 定位。

可是！！！標準又規定：當一個固定定位的元素的直接或間接父級有包含 transform 不爲 none 的元素時，這個元素會改成基於該父級元素元素絕對定位。

我估計很多移動端開發者都多遇到這樣的問題：某一天他終於受不了原生滾動的卡頓，痛定思痛上了 iscroll，而後發現其中全部的固定定位元素位置都跑掉了。WTF？

然而這個規範定義的卻不太尋常：position: fixed 定義在 css-position 規範裏。然後面的那個補充說明卻寫在 css-transforms 規範裏，後面還附帶了一個 ISSUE，好像標準的制定者彷佛不太情願指定這樣的規範。我簡單考據了一下，這個規範應該是瀏覽器先實現成了這樣，而後倒逼標準制定者加了這一條規範，能夠算是一個瀏覽器逆襲標準的例子。然而有人給 Chrome 開的 bug 已經被標記爲 won't fix，狀況不大可能（至少在短時間內）有什麼轉變。

逆來順受終歸是程序員的命。

不過話說回來，就像 padding-top: 50% 同樣，這個詭異的特性說不定也有用處：它提供了一種將絕對定位的參考元素跳過最近非 position: static 元素的一種方式。

http://jsfiddle.net/xnw59zcr/3/

示例中 當前顯示第n個菜單項 這個 li 自身是放在二級菜單裏的，直接使用 position: absolute 會跟隨二級菜單的位置變化不符合需求，而若是使用 position: fixed 元素相對視口的未知又不固定。這時，position: fixed 和 transform: scale(1) 連用這個 trick 就派上了用場。

完

你還見過哪些詭異的 CSS 特性呢？

https://jsfiddle.net/1b4swamw/