12個(gè)很少被人知道的CSS事實(shí)

CSS不是一門很復(fù)雜的語(yǔ)言，但是即使你已經(jīng)寫css很多年了，也很有可能遇到一些新玩意兒-某些屬性從來沒用過，某些值從來未曾考慮，或者某些規(guī)范細(xì)則你從來不知道。

我經(jīng)常會(huì)遇到一些css小細(xì)節(jié)，所以我想在這片文章中和大家分享，需要承認(rèn)的是，這篇文章中的很多東西并不具有實(shí)操價(jià)值，但也許你可以留作后用。

body上的color不只是應(yīng)用于文字

讓我們從最簡(jiǎn)單的開始吧，color屬性是被廣泛運(yùn)用的屬性，某些人可能不曾注意，它并不僅僅只是定義文本的顏色。

讓我們看這個(gè)例子：

請(qǐng)注意我們只是給body設(shè)定了color為yellow，但是你可以看到，頁(yè)面里的元素都變成了黃色，他們包括:

• 圖片的alt文字的值，就是當(dāng)圖片源載入不了時(shí)顯示的文字
• 列表元素的邊框
• 無(wú)序列表的點(diǎn)
• 有序列表的數(shù)字
• hr元素

有趣的是，hr元素默認(rèn)是不會(huì)繼承color屬性得，我需要強(qiáng)制他繼承border-color: inherit，這對(duì)我來說有點(diǎn)怪異。

W3c規(guī)范是這么定義的:

這個(gè)屬性用來描述元素的文本的前景顏色，附帶被用來為其他接受顏色值的其他屬性提供潛在的間接的值。

我不是很明確地知道有哪些是被當(dāng)做所謂的前景的，如果你知道的話，請(qǐng)?jiān)谠u(píng)論中告訴我。

visibility還可以設(shè)置 “collapse”值

你可能已經(jīng)用過visibility上千遍了，最常用的是visible和hidden，用來使元素顯示或者隱藏。

還有第三個(gè)很少被用到的值是collapse，除了在表格的行，列中使用有差異外，他和hidden的作用是等同的。

下面讓我們看看在表格元素中，collapse是怎么工作的，不過前提是table的border-collapse需要設(shè)定成separate才會(huì)有效果哦！

CSS-Trick 網(wǎng)站的Almanac同學(xué)說不要用這個(gè)屬性，因?yàn)檫@個(gè)屬性存在兼容問題。

我的測(cè)試結(jié)果是：

• 在Chrome中，collapse和hidden的表現(xiàn)并無(wú)不同（請(qǐng)看bug報(bào)告和討論）
• 在firefox，opera和ie11中，collpase的工作是正常的，那就是，表格的行被清除了，而且不再占據(jù)空間。

我得承認(rèn)，這個(gè)值可能很少會(huì)被用到，但是他確實(shí)是存在的。

background這個(gè)簡(jiǎn)寫又有了新值

在css2.1中，background是這5個(gè)值的縮寫，background-color, background-image, background-repeat, background-attachment, background-position?，F(xiàn)在，在css3中，又有三個(gè)成員被加進(jìn)來了，現(xiàn)在總共有8個(gè)值，他們是：

background: [background-color] [background-image] [background-repeat]
        	[background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

請(qǐng)注意那個(gè)正斜杠，和font，border-radius類似，這個(gè)正斜杠允許你在寫完position后加上background-size。

另外，還有兩個(gè)可選的值是background-origin和background-clip。

實(shí)操中語(yǔ)法會(huì)變成這個(gè)樣子

.example {
  background: aquamarine url(img.png)
              no-repeat
              scroll
              center center / 50%
              content-box content-box;
}

讓我們?cè)赿emo中來一起 感受它:

這些新值在現(xiàn)代瀏覽器中工作完美，但是你可能需要為不支持的瀏覽器優(yōu)雅降級(jí)。

clip只對(duì)absolute元素和fixed元素有效

上邊我們談到了backgrond-clip，現(xiàn)在我們談?wù)刢lip，我們一般是這么寫的:

.example {    
  clip: rect(110px, 160px, 170px, 60px);
}

我們用這個(gè)方法來剪切元素的一部分，但是它的前提是這個(gè)元素必須是absolute定位的(這里有解釋)，所以代碼變成這樣

.example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

你可以看到當(dāng)我們切換這個(gè)元素absolute定位的時(shí)候，clip也會(huì)跟著變化:

你也可以通過設(shè)定position：fixed來讓clip變得有效，因?yàn)楦鶕?jù)規(guī)范，fixed元素有資格被當(dāng)做absolute元素。

垂直百分比是根據(jù)父層的寬度計(jì)算的，而不是父層高度計(jì)算的

這個(gè)說起來有一點(diǎn)麻煩，你應(yīng)該知道百分比寬度是根據(jù)父層的寬度計(jì)算的，但是如果像padding，margin這樣的屬性用上百分比的時(shí)候，最終的結(jié)果是根據(jù)父層的寬度計(jì)算的，而不是根據(jù)父層的高度計(jì)算。

大家來看這個(gè)例子：

注意當(dāng)我們滑動(dòng)滑塊的時(shí)候，只是改變了父層容器的寬度，但是padding-bottom的值卻產(chǎn)生了變化。

border實(shí)際上是簡(jiǎn)寫屬性的簡(jiǎn)寫

我們都寫過這樣的語(yǔ)句:

.example {
  border: solid 1px black;
}

border屬性是border-style，border-width，border-color的簡(jiǎn)寫 但是請(qǐng)不要忘了，這三個(gè)屬性每個(gè)屬性都包含有自身的簡(jiǎn)寫，比如:

.example {
  border-width: 2px 5px 1px 0;
}

這樣會(huì)讓四個(gè)border獲得不同的寬度，同理，border-color和border-style也是這樣：

這里的重點(diǎn)是，你沒法用border這個(gè)屬性為四條邊做出不同的顏色，寬度，樣式，所以屬性簡(jiǎn)寫再簡(jiǎn)寫后，表達(dá)就變得不那么精確了。

text-decoration實(shí)際上是三種屬性的簡(jiǎn)寫

我知道這篇文章所說的的可能會(huì)讓你有一點(diǎn)點(diǎn)暈。

根據(jù)w3c規(guī)范，現(xiàn)在這個(gè)語(yǔ)句是符合標(biāo)準(zhǔn)的:

a {
  text-decoration: overline aqua wavy;
}

text-decoration現(xiàn)在是這三個(gè)屬性的縮寫：text-decoration-line, text-decoration-color和text-decoration-style.

不幸的是，目前只有firefox一家支持這個(gè)新屬性:

在這個(gè)demo中，我們用了類似text-decoration-color這樣的寫法，我知道這樣寫很不爽，因?yàn)槟壳昂芏酁g覽器不支持，如果我們直接寫text-decoration: overline aqua wavy;的話，無(wú)疑目前的瀏覽器識(shí)別不了這樣的寫法，于是只能不解析有，所以為了向下兼容，我們只能這么寫了。

border-width 支持關(guān)鍵字值

這個(gè)并不是那么驚天地泣鬼神，但是除了接受標(biāo)準(zhǔn)的值外（像5px或者1em），border-width同時(shí)還接受三個(gè)關(guān)鍵字值: medium, thin,和 thick。

實(shí)際上，border-width的初始值是medium，下面這個(gè)例子中用的是thick:

當(dāng)瀏覽器渲染這些關(guān)鍵字值得時(shí)候，規(guī)范并沒有要求他們用特定的寬度值，但是在我的測(cè)試中，所有的瀏覽器都是把這三個(gè)值轉(zhuǎn)化成了1px，3px，和5px。

很少有人用border-image

我曾經(jīng)寫過一篇關(guān)于css3的 border-image的文章，這個(gè)特性已經(jīng)被現(xiàn)代瀏覽器很好的支持了，除了ie10及以下版本。但是有人在意嗎？

如果你不喜歡閱讀英文，你可以閱讀我早前寫的一篇關(guān)于CSS3的border-image的基礎(chǔ)教程?！狜大漠

它看起來是一個(gè)很優(yōu)美的特性，允許你創(chuàng)建流動(dòng)的圖片邊框，在這個(gè)例子中，你可以縮放窗口來觀察圖片邊框的流動(dòng)。

不幸的是，border-image仍然像一個(gè)新奇事物一樣并未被很多人使用。但也許我是錯(cuò)的。如果你知道有哪個(gè)真實(shí)案例中有使用border-image，或者你就使用過它的話，請(qǐng)?jiān)谠u(píng)論中讓我知道，我會(huì)很樂意承認(rèn)我錯(cuò)了。

還存在empty-cells 這樣一個(gè)屬性

這個(gè)屬性是被廣泛支持的，包括ie8，它寫起來是這個(gè)樣子的：

table {
  empty-cells: hide;
}

你也許已經(jīng)知道了，它是用在表格中的，它告訴瀏覽器是否顯示空的單元格。試著點(diǎn)擊切換按鈕來觀察empty-cells的效果：

在這個(gè)例子中，需要確保表格的邊框是可見的，而且border-collapse沒有被設(shè)定成 collapsed。

font-style 還有一個(gè)值是“oblique”

當(dāng)我們使用font-style屬性得時(shí)候，經(jīng)常用到的兩個(gè)值是normal和italic，但是你還可以給它另一個(gè)值oblique:

但是它到底是個(gè)神馬意思呢？還有就是它和italic看起來一樣嗎？

規(guī)范對(duì)于oblique是這么解釋的：

應(yīng)用oblique樣式，如果沒有的話就用italic樣式

規(guī)范對(duì)于italic的解釋和oblique基本上差不多，oblique這個(gè)詞是一個(gè)排版術(shù)語(yǔ)，表示是在normal的基礎(chǔ)上傾斜的字體，而不是真正的斜體。

由于css處理oblique的方式，其實(shí)它和italic是通用的，除非這個(gè)字體就是一個(gè)oblique字體。

而我從未聽說過有oblique字體，但是也許我是錯(cuò)的。我的研究是，oblique是當(dāng)一個(gè)字體沒有真斜體的時(shí)候的一個(gè)仿斜體。

所以，如果我沒有錯(cuò)的話，這就意味著如果一個(gè)字體沒有真斜體字體，那么如果我們寫了font-style:italic實(shí)際上會(huì)讓字體變成font-style:oblique的形式。

下邊這個(gè)圖可以很直觀的知道仿斜體和真斜體的區(qū)別。灰色的是oblique仿斜體。 ——@大圓 12個(gè)很少被人知道的CSS事實(shí)

word-wrap和overflow-wrap是等同的

word-wrap不是一個(gè)被經(jīng)常用到的屬性，但在某些情況下是非常有用的，一個(gè)常見的例子是讓長(zhǎng)url換行，以免它撐開父容器，例子如下：

由于這個(gè)屬性是微軟原創(chuàng)的，所以它被所有的瀏覽器支持了，包括ie5.5。

盡管它跨瀏覽器，而且被一貫地支持，W3C依然決定把word-wrap換成overflow-wrap- 我猜是之前的命名有點(diǎn)名不副實(shí)？ overflow-wrap和word-wrap有著同樣的值，而word-wrap被當(dāng)作是overflow-wrap的一個(gè)后補(bǔ)語(yǔ)法。

現(xiàn)在有一些瀏覽器是支持overflow-wrap的，但這么做貌似是無(wú)意義的，因?yàn)樗信f的瀏覽器都把word-wrap解析得很好，而且由于歷史原因所有的瀏覽器都被要求繼續(xù)支持word-wrap。

我們可以在瀏覽器升級(jí)后開始使用overflow-wrap，但是直到現(xiàn)在，我依然看不到換成新語(yǔ)法的意義何在。

這里邊有多少是你不知道的呢？

不知你從這篇文章中有沒有學(xué)到什么，我希望是這樣，也許大多數(shù)有經(jīng)驗(yàn)的css開發(fā)者知道很多，但是對(duì)于css新手應(yīng)該會(huì)受益多一點(diǎn)。

大家都來扒一扒有幾條是新發(fā)現(xiàn)呢？歡迎在評(píng)論中告訴我們！

注

英文出處：http://www.sitepoint.com/12-little-known-css-facts/

中文譯文：http://www.w3cplus.com/css/12-little-known-css-facts.html