亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

四個(gè)最詭異的 CSS 特性

yunhao / 2416人閱讀

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

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

overflow-x: scroll 和 overflow-y: visible

overflow 有個(gè)很詭異的特性。標(biāo)準(zhǔn) 規(guī)定：當(dāng) overflow-x overflow-y 其中有一項(xiàng)不為 visible，另一項(xiàng)中的 visible 值被計(jì)算為 auto

http://jsfiddle.net/yrvk6104/

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

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

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

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

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

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

邊距折疊有幾個(gè)基本的要求：

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

發(fā)生邊距折疊元素的 邊距 必須位置上相鄰（注意這里是邊距占用的空間相鄰，包括相鄰?fù)壴氐倪吘嘀睾希透缸蛹壴剡吘嘀睾希?。邊距之間不能有非外邊距占用空間（例如 border、padding 等）阻隔

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

還有兩個(gè)不發(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 的百分比取值

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

當(dāng)然了，如果按照正常思維上下邊距百分比取值基于父元素的高度計(jì)算，反而不如現(xiàn)在這樣基于寬度計(jì)算有用：因?yàn)榫谷挥腥讼氤隽擞眠@種特性實(shí)現(xiàn)保持元素的高寬比。

一個(gè)保持高寬比的例子：

https://jsfiddle.net/t75gnqwq/

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

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

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

相關(guān)文章

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

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

    Anchorer 評論0 收藏0

  • 雜談 CSS IN JS

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

    Nosee 評論0 收藏0

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

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

    JerryWangSAP 評論0 收藏0

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

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

    shadajin 評論0 收藏0

發(fā)表評論

0條評論

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