扯一下似乎被遺忘的盒模型

Barry_Ng 發(fā)布于2019-08-28 17:51 / 1083人閱讀

摘要：不過(guò)想想，現(xiàn)在都讓微軟給退下了，還有多少呢。接著就是要提到的一點(diǎn)，盒模型的計(jì)算方式，標(biāo)準(zhǔn)方式和模式是不同的，不知道又想知道的同學(xué)請(qǐng)問(wèn)谷哥或者度娘吧，記得幾年前我那本破書(shū)上也又提到，還做了一些測(cè)試。扯遠(yuǎn)了，盒模型大概的情況就是這樣。

前段時(shí)間為了組里在擴(kuò)充人員，在面試的過(guò)程中有過(guò)幾次扯到“盒模型”這個(gè)東西。對(duì)于“盒模型”以前是經(jīng)常提到，現(xiàn)在被CSS3的風(fēng)頭給蓋下去了，已經(jīng)沒(méi)多少人去講“盒模型”，也導(dǎo)致了很多了現(xiàn)在根本不知道什么是盒模型。

本來(lái)呢，我想從頭跟大家一起溫習(xí)一下盒模型，結(jié)果自己做了一些demo以及翻閱總結(jié)了一些資料之后，放棄了這個(gè)想法。從最簡(jiǎn)單的方面來(lái)說(shuō)，盒模型就是下面這個(gè)圖的東西，大家在瀏覽器的開(kāi)發(fā)者工具中都可以見(jiàn)到。

那我還說(shuō)什么呢，好像真沒(méi)什么說(shuō)的，在w3c網(wǎng)站上也有介紹，上面這張圖就是從w3c上拿的，地址是 http://www.w3.org/TR/CSS2/box.html。

在IE瀏覽器中，尤其是IE6，如果一個(gè)不小心你就有可能會(huì)觸發(fā)一個(gè)叫quirks模式，導(dǎo)致盒子計(jì)算不對(duì)，然后又不能margin:0 auto;居中。怎么觸發(fā)這個(gè)quirks模式呢，主要就是doctype文檔聲明不是在第一行（前面有其他字符），那就觸發(fā)了。不過(guò)想想，現(xiàn)在XP都讓微軟給退下了，IE6還有多少呢。

接著就是要提到的一點(diǎn)，盒模型的計(jì)算方式，標(biāo)準(zhǔn)方式和quirks模式是不同的，不知道又想知道的同學(xué)請(qǐng)問(wèn)谷哥或者度娘吧，記得幾年前我那本破書(shū)上也又提到，還做了一些測(cè)試。

扯遠(yuǎn)了，盒模型大概的情況就是這樣。然后現(xiàn)在CSS3的到來(lái)，引入了一個(gè)box-sizing，這個(gè)屬性又三個(gè)屬性值content-box、padding-box、border-box，對(duì)于這三個(gè)屬性值，F(xiàn)F都是支持的，表現(xiàn)效果也稍有不同，大家可以看后面我給出的demo效果，也可以自己寫(xiě)代碼測(cè)試，這里我只是提一下而已。

最后要提的是，微軟真的很厲害，現(xiàn)在大家用的box-sizing: border-box;其實(shí)就是IE的quirks模式啊～

幾個(gè)demo地址：

http://www.linxz.de/demo/box%20model/box%20model.html

http://www.linxz.de/demo/box%20model/box%20model%20[padding100].html

http://www.linxz.de/demo/box%20model/box%20model%20[quirks].html

http://www.linxz.de/demo/box%20model/box%20model%20[quirks][padding100].html

http://www.linxz.de/demo/box%20model/box-sizing%20[border-box].html

http://www.linxz.de/demo/box%20model/box-sizing%20[content-box].html

http://www.linxz.de/demo/box%20model/box-sizing%20[padding-box].html

demo就這幾個(gè)，具體的效果就不一一羅列，IE呢如果支持box-sizing的話(huà)效果應(yīng)該是有的，如果不支持那就肯定無(wú)視了，采用標(biāo)準(zhǔn)模式，因?yàn)榇a第一行是采用標(biāo)準(zhǔn)的doctype聲明。

需要說(shuō)明的是，box-sizing: padding-box;在PC端FF里測(cè)試過(guò)是OK的，其他效果又興趣的同學(xué)請(qǐng)自測(cè)。

網(wǎng)絡(luò)上一點(diǎn)點(diǎn)的參考資料

這些資料在谷哥上搜索box model會(huì)出來(lái)很多，我就隨便取了排在前面的幾個(gè)，又興趣的可以看看，看不懂的請(qǐng)找度娘來(lái)協(xié)助翻譯。

http://www.w3.org/TR/CSS2/box.html

https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

http://css-tricks.com/the-css-box-model/

http://css-tricks.com/box-sizing/

http://quirksmode.org/css/user-interface/boxsizing.html

最后

盒模型雖然現(xiàn)在很少遇到quirks模式，不過(guò)在IE10之類(lèi)瀏覽器中還是可以選擇相對(duì)應(yīng)的文檔模式的，稍微了解一下也總是可以的。就算不去了解這個(gè)，那就知道一下box-sizing這個(gè)也可以。

很不負(fù)責(zé)的廢話(huà)完畢，發(fā)覺(jué)現(xiàn)在真的沒(méi)有以前那股沖勁了，看著博客上好久沒(méi)更新跟技術(shù)有關(guān)的東西，又怕對(duì)不起這個(gè)易聯(lián)主機(jī)和linxz.de域名，就稍微折騰一點(diǎn)吧。

五花肉妹子說(shuō)，這個(gè)博客要更新啊，所以我就把前幾天的東西搬到這里來(lái)了，不知道會(huì)不會(huì)被人噴~！好怕~！