轉(zhuǎn)載自(http://web.jobbole.com/83915/)

盒子模型

Box-sizing屬性一直比較陌生，在樓主平時(shí)的開(kāi)發(fā)過(guò)程中一直都沒(méi)機(jī)會(huì)見(jiàn)識(shí)，以前遇到應(yīng)該用它解決的問(wèn)題，很無(wú)恥的用了其他偷工減料，拿驢湊馬的招來(lái)完成。后來(lái)才通過(guò)網(wǎng)上資料查到，原來(lái)它是設(shè)置box模型的計(jì)算方式的一種屬性。說(shuō)到box模型，了解w3c的同學(xué)一定不會(huì)陌生，它對(duì)盒子模型的定義如下：把每一個(gè)網(wǎng)頁(yè)中的元素都看作是一個(gè)盒子，這個(gè)盒子有邊框(border)，有內(nèi)容(content)，有和在其他外面的盒子的間距(margin)，有和在其內(nèi)盒子的邊距(padding)。它的高度和寬度，取決于它的內(nèi)容和邊框以及內(nèi)邊距的總和。在瀏覽器中，通過(guò)開(kāi)發(fā)者工具，我們可以很容易地看到一個(gè)元素的盒子模型：

從上圖可以看到，這個(gè)元素的寬和高分別是100px和100px。查看css代碼，我們也可以看到它的width和height分別為100px和100px。到此為止，一切都很簡(jiǎn)單，沒(méi)有問(wèn)題。但是，如果我們接下來(lái)給它設(shè)置一個(gè)border呢？那么他的寬和高是多少呢？

小問(wèn)題，大麻煩

來(lái)看一個(gè)經(jīng)常遇到的切換導(dǎo)航。在手機(jī)端經(jīng)常的設(shè)計(jì)中經(jīng)常可以遇到此問(wèn)題，頂部的tab切換標(biāo)簽。設(shè)計(jì)給的標(biāo)注是左右對(duì)半分，并且擁有各自的邊框，然后自由伸縮和切換。像下面那樣。

一開(kāi)始，你會(huì)感覺(jué)這很容易，因?yàn)闊o(wú)非是兩個(gè)寬度為50%的div并排排列了。但是開(kāi)始做的時(shí)候，你才會(huì)知道被設(shè)計(jì)師的邊框坑了。因?yàn)槿绻阍O(shè)置了width為50%，那么兩個(gè)div是100%，除此之外還有兩個(gè)div的左右邊框的長(zhǎng)度是沒(méi)地方放置的！也就是說(shuō)，當(dāng)你把它們并排放置在一起的時(shí)候，實(shí)際上它們總寬度是100% + 4px！，多出了4個(gè)px，這導(dǎo)致了右邊的box會(huì)掉下去（如果你用的float）。如果你用box布局，在使用了flex自由延伸后屬性（請(qǐng)見(jiàn)我之前的博客）不會(huì)出現(xiàn)這個(gè)情況，但如果你還不會(huì)box布局，而又希望簡(jiǎn)單解決此問(wèn)題（尤其是在考慮padding的固定填充距離后box布局也無(wú)法完美解決），那么是時(shí)候該學(xué)習(xí)box-sizing了（只需要1000ms）。

box-sizing:

box-sizing是css3中出現(xiàn)的屬性，它允許你設(shè)置或檢索對(duì)象的盒模型組成模式，通過(guò)修改屬性的值對(duì)盒子模型的概念做設(shè)置。我們知道，標(biāo)準(zhǔn)的盒子模型的寬是content+borderwidth+padding。box-sizing屬性的值中有一個(gè)就是解釋標(biāo)準(zhǔn)模型的值，它是默認(rèn)的content-box，一般情況下，我們不使用它。我們使用的是它的其他值，比如：border-box,含義是將盒子的border和padding計(jì)算到設(shè)置的width中，而不是實(shí)際寬度中。所以，如果你設(shè)置width為100px，而border為1px的時(shí)候，盒子的實(shí)際大小仍舊是100px而不是102px。用這個(gè)屬性，我們就可以完美地解決上面遇到的難題了：只需要在給兩個(gè)div的css上寫(xiě)下box-sizing:border-box就可以了，保證兩個(gè)div等寬，擁有1px長(zhǎng)度，至于它們的框度是不是50%，你可以喊設(shè)計(jì)師自己量。除了以上兩個(gè)值外，box-sizing還有一個(gè)padding-box值，顧名思義，就是把內(nèi)邊距計(jì)算在設(shè)置的框度內(nèi)，而border是不計(jì)算的。

兼容性

box-sizing 目前被大多數(shù)瀏覽器支持, 但I(xiàn)E家族只有IE8版本以上才支持，雖然現(xiàn)代瀏覽器支持box-sizing，但有些瀏覽器還是需要加上自己的前綴，Mozilla需要加上-moz-，Webkit內(nèi)核需要加上-webkit-，Presto內(nèi)核-o-,IE8-ms-，所以box-sizing兼容瀏覽器時(shí)需要加上各自的前綴。當(dāng)然，對(duì)于需要在i8以下的瀏覽器中解決上面提到過(guò)的tab排列問(wèn)題，你是不需要這個(gè)屬性的，因?yàn)樗鼈儗?duì)盒子模型的解釋默認(rèn)值就是border-box。這也是IE這個(gè)逐漸失勢(shì)的頑固的老古董和w3c對(duì)盒子模型解釋的差異。就像下面那張圖一樣：

結(jié)束語(yǔ)

對(duì)于box-sizing的屬性從無(wú)知到了解，最后到運(yùn)用自如，得益于老大的提點(diǎn)，簡(jiǎn)單的屬性在實(shí)際生產(chǎn)中解決了很多布局問(wèn)題。從根本上說(shuō)還是自己見(jiàn)識(shí)和基礎(chǔ)知識(shí)太少了，寫(xiě)這篇博客放到此處提醒自己，多學(xué)一點(diǎn)知識(shí)就多解決一點(diǎn)難題。