成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

四個最詭異的 CSS 特性

yunhao / 2386人閱讀

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

JavaScript 作為一個創(chuàng)始人拍腦袋 10 天搞出的語言，JS 中包含了很多在今天看來很多不應(yīng)該出現(xiàn)在現(xiàn)代語言中的詭異特性。其實，作為 Web 中必不可少的 CSS 語言也不逞多讓。今天我就來聊聊我認為的那些最詭異的 CSS 特性。

overflow-x: scroll 和 overflow-y: visible

overflow 有個很詭異的特性。標準 規(guī)定：當 overflow-x overflow-y 其中有一項不為 visible，另一項中的 visible 值被計算為 auto

http://jsfiddle.net/yrvk6104/

這個詭異的設(shè)定經(jīng)常會導致設(shè)計一些包含子菜單的側(cè)邊欄時出問題。側(cè)邊欄的 overflow-y: scroll 會強制將 overflow-x 設(shè)置為 auto，導致絕對定位的二級菜單顯示不出來。解決方案只能是把一級菜單的 position: relative 去除（或直接改用固定定位），然后使用 JS 計算二級菜單應(yīng)該擺放的位置。

值得一提的是：最近剛通過了一項 CSS 規(guī)范允許 overflow 一次指定兩個值：https://github.com/w3c/csswg-...，它只是 overflow-x overflow-y 兩屬性連用的簡寫而已，對現(xiàn)有行為沒有影響。

外邊距折疊（margin collapsing，或簡稱邊距折疊）

據(jù)說這個詭異的特性最初設(shè)計是為簡化文章排版的。

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

如示例：p 標簽上下都有 1em 的邊距，由于邊距折疊的特性，上下相鄰的 p 標簽只相距 1em。第一個 p 標簽和外層的 h1 也發(fā)生的邊距折疊。如果打開 p 標簽外層 div 的邊框，可以看到 p 標簽距離 h1 還應(yīng)該更遠。

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

只有上下邊距會發(fā)生折疊

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

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

還有兩個不發(fā)生邊距折疊的情形：

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

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

這兩種情形通?？梢杂糜谝?guī)避邊距折疊，給父元素設(shè)置 display: flex; flex-direction: column 可以解決一半以上邊距折疊的情況了。

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

margin、padding 的百分比取值

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

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

一個保持高寬比的例子：

https://jsfiddle.net/t75gnqwq/

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113227.html

相關(guān)文章

  • Java核心技術(shù)教程整理，長期更新

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

    Anchorer 評論0 收藏0

  • 雜談 CSS IN JS

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

    Nosee 評論0 收藏0

  • Web前端開發(fā)學習推薦--菜鳥必看

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

    JerryWangSAP 評論0 收藏0

  • Web前端開發(fā)學習推薦--菜鳥必看

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

    shadajin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<