置換和非置換元素

置換和非置換元素

原作者：doyoe
原文鏈接：http://blog.doyoe.com/2015/03/15/css/%E7%BD%AE%E6%8D%A2%E5%92%8C%E9%9D%9E%E7%BD%AE%E6%8D%A2%E5%85%83%E7%B4%A0/

先進(jìn)一個(gè)題外話(huà)

在面試一個(gè) 重構(gòu)（各大公司的叫法可能不太一樣）時(shí)，我喜歡從一個(gè)點(diǎn)開(kāi)始問(wèn)，然后一直延展下去成為一條線(xiàn)，甚至是一個(gè)面，直到問(wèn)到不會(huì)的地方，然后又換另外一個(gè)點(diǎn)。

例如：我可能會(huì)說(shuō)，能簡(jiǎn)單聊聊 行內(nèi)級(jí)元素 和 塊級(jí)元素 的區(qū)別嗎。

一般這時(shí)，候選人都會(huì)說(shuō)到 行內(nèi)級(jí)元素 不會(huì)換新行，而 塊級(jí)元素 會(huì)格式化為塊狀，即換行。但也有些遺憾的方面（如：混淆了塊元素和塊級(jí)元素，行內(nèi)元素和行內(nèi)級(jí)元素），當(dāng)然這看起來(lái)似乎不是特別重要。

這時(shí)我會(huì)繼續(xù)問(wèn)，行內(nèi)元素 能夠定義寬度和高度嗎？

不少候選人會(huì)說(shuō)：不能

我會(huì)繼續(xù)問(wèn)，說(shuō)幾個(gè)你熟悉的 行內(nèi)元素 吧

于是 span, strong, em, ins… 答案我還是比較滿(mǎn)意的。

我仍然會(huì)繼續(xù)，img 是行內(nèi)元素么？

候選人這時(shí)通常會(huì)遲疑一下，可能意識(shí)到我接下來(lái)想問(wèn)啥了，但還是會(huì)回答：是

于是我會(huì)說(shuō)，那 img 能定義寬度和高度么？

有的候選人這時(shí)會(huì)猶豫，因?yàn)槿绻卮鹗?，就?huì)推翻他之前說(shuō)的 行內(nèi)元素不能定義寬高，如果回答不是，似乎又和他所熟知的經(jīng)驗(yàn)不一致。但通常最后還是會(huì)回答：能

那我就又得問(wèn)，你之前不是說(shuō) 行內(nèi)元素不能定義寬高 嗎？為什么 img 可以？

到這里，候選人基本上不知道要怎么回答好了，最后可能會(huì)告訴我，因?yàn)?img 是特殊元素

當(dāng)然，雖然這么回答也不能說(shuō)是錯(cuò)誤的，但基本上也能知道候選人對(duì)這條線(xiàn)的基礎(chǔ)的掌握程度了。

但我希望聽(tīng)到的答案是通過(guò)解釋置換元素相關(guān)的概念從而給出答案。

什么是置換元素？

一個(gè) 內(nèi)容 不受CSS視覺(jué)格式化模型控制，CSS渲染模型并不考慮對(duì)此內(nèi)容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱(chēng)之為置換元素。

什么是非置換元素？

w3c并沒(méi)有給出明確的非置換元素的解釋?zhuān)艽_定的是除置換元素之外，所有的元素都是非置換元素。

行內(nèi)級(jí)置換和非置換元素的寬度定義

對(duì)于行內(nèi)級(jí)非置換元素，寬度設(shè)置是不適用的。

對(duì)于行內(nèi)級(jí)置換元素來(lái)說(shuō)，其寬度的設(shè)置需遵循以下幾點(diǎn)：

• 若寬高的計(jì)算值都為 auto 且元素有固有寬度，則 width 的使用值為該固有寬度；

典型的例子是：擁有默認(rèn)寬高的 input 當(dāng)寬度的計(jì)算值為auto時(shí)，則寬度使用值為其默認(rèn)的固有寬度

• 若寬度的計(jì)算值為 auto 且元素有固有寬度，則 width 的使用值為該固有寬度；

例子同上

• 若寬度的計(jì)算值為 auto 且高度有 非auto 的計(jì)算值，并且元素有固有寬高比，則 width 的使用值為 高度使用值 * 固有寬高比；

典型的例子：img 當(dāng)只定義了其高度值時(shí)，其寬度將會(huì)根據(jù)固有寬高比進(jìn)行等比設(shè)置

• 除此之外，當(dāng) width 的計(jì)算值為 auto 時(shí)，則寬度的使用值為 300px

典型的例子：比如iframe, canvas

其它類(lèi)型的置換元素，其寬度的定義都參照行內(nèi)置換元素的定義。

行內(nèi)級(jí)置換和非置換元素的高度定義

對(duì)于行內(nèi)級(jí)非置換元素，高度設(shè)置是不適用的。

對(duì)于行內(nèi)級(jí)置換元素來(lái)說(shuō)，其高度的設(shè)置需遵循以下幾點(diǎn)：

• 若寬高的計(jì)算值都為 auto 且元素有固有高度，則 height 的使用值為該固有高度；
• 若高度的計(jì)算值為 auto 且元素有固有高度，則 height 的使用值為該固有高度；
• 若高度的計(jì)算值為 auto 且寬度有 非auto 的計(jì)算值，并且元素有固有寬高比，則 height 的使用值為：寬度使用值 / 固有寬高比；
• 若高度的計(jì)算值為 auto 且上述條件完全不符，則 height 的使用值 不能大于150px，且寬度不能大于長(zhǎng)方形高度的2倍。

其它類(lèi)型的置換元素，其高度的定義都參照行內(nèi)置換元素的定義。