四個最詭異的 CSS 特性

yunhao 發布于2019-08-29 15:18 / 2357人閱讀

摘要：作為一個創始人拍腦袋天搞出的語言，中包含了很多在今天看來很多不應該出現在現代語言中的詭異特性。今天我就來聊聊我認為的那些最詭異的特性。和有個很詭異的特性。外邊距折疊，或簡稱邊距折疊據說這個詭異的特性最初設計是為簡化文章排版的。

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 還應該更遠。

邊距折疊有幾個基本的要求：

只有上下邊距會發生折疊

發生邊距折疊元素的邊距必須位置上相鄰（注意這里是邊距占用的空間相鄰，包括相鄰同級元素的邊距重合，和父子級元素邊距重合）。邊距之間不能有非外邊距占用空間（例如 border、padding 等）阻隔

還有一種空元素的情況，我認為可以算是第二種情況的極端例子：https://jsfiddle.net/u3roktvg/2/

還有兩個不發生邊距折疊的情形：

擁有新的塊級格式上下文的元素（display: flow-root、overflow: hidden、position: absolute 等）其子元素不會和其外部其他元素發生邊距折疊

彈性布局元素的子元素之間不發生邊距折疊

這兩種情形通常可以用于規避邊距折疊，給父元素設置 display: flex; flex-direction: column 可以解決一半以上邊距折疊的情況了。

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

margin、padding 的百分比取值

標準規定：當元素的 margin、padding 取值為百分比時，其值始終按父元素的寬度計算，包括上下內外邊距。

當然了，如果按照正常思維上下邊距百分比取值基于父元素的高度計算，反而不如現在這樣基于寬度計算有用：因為竟然有人想出了用這種特性實現保持元素的高寬比。

一個保持高寬比的例子：

https://jsfiddle.net/t75gnqwq/

不知道偉大的 CSS 之父設計這兩個屬性時是不是考慮到了這一層

云服務器 GPU云服務器忽略css特性加皮膚后的詭異問題四個節點的服務器數據分析的四個步驟

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113227.html

Java核心技術教程整理，長期更新

以下是Java技術棧微信公眾號發布的關于 Java 的技術干貨，從以下幾個方面匯總。 Java 基礎篇 Java 集合篇 Java 多線程篇 Java JVM篇 Java 進階篇 Java 新特性篇 Java 工具篇 Java 書籍篇 Java基礎篇 8張圖帶你輕松溫習 Java 知識 Java父類強制轉換子類原則一張圖搞清楚 Java 異常機制通用唯一標識碼UUID的介紹及使用字符串...

Anchorer 2019-08-16 12:33 評論0 收藏0
雜談 CSS IN JS

摘要：缺乏高級編程特性影響同樣深遠，社區發展的預處理器能夠有效緩解，，，殊途同歸，異軍突起，基本實現變量嵌套變量混合擴展和邏輯等。前言關注點分離（separation of concerns）原則多年來大行其道，實踐中一般將 HTML、CSS、JavaScript 分開編寫維護，早期框架 angularjs 即是如此，直到 React 爭議中問世，引領關注點混合趨勢，驅使開發者重新審視 ...

Nosee 2019-08-29 14:03 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

JerryWangSAP 2019-08-02 15:21 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

shadajin 2019-08-19 11:45 評論0 收藏0