前一陣子遇到一個(gè)小問(wèn)題，在同樣的樣式（主要是寬高邊距之類(lèi)的）條件下，DIV在移動(dòng)端和PC端的寬度不一樣，排除了絕大多數(shù)樣式的問(wèn)題，但是有個(gè)比較陌生，就是box-sizing，其實(shí)經(jīng)?？吹?#xff0c;只不過(guò)沒(méi)怎么注意過(guò)，連具體的值都不知道有哪些，在開(kāi)發(fā)者工具里面試了一下，果然和這個(gè)樣式有關(guān)，因此查了一些資料并記錄一下。

盒子模型

首先，盒子模型大家都知道，W3C標(biāo)準(zhǔn)的Box Model由四部分組成——content、padding、border、margin

Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

如果我們給一個(gè)應(yīng)用了標(biāo)準(zhǔn)盒模型的div設(shè)置一個(gè)寬度，那么，實(shí)際上我們?cè)O(shè)置的是上文提到的content的寬度，也就是下圖這個(gè)樣子

• Element空間高度 = content height + padding + border + margin

還有個(gè)不那么“標(biāo)準(zhǔn)”的盒模型，就是IE6以下（也就是處于Quirks怪異模式）的瀏覽器所使用的，在這種情況下：

• Element空間寬度 = content Width + margin (Width包含了元素內(nèi)容寬度、邊框?qū)挾?、?nèi)距寬度)

這個(gè)時(shí)候如果我們給div設(shè)置一個(gè)寬度，那就是為元素的內(nèi)容+邊框+內(nèi)邊距設(shè)置了一個(gè)總值，如圖所示

上面張圖片都使用以下這段代碼

div {width: 200px;height: 100px;margin: 40px;padding: 20px;border: 10px solid blue; }

與box-sizing有什么關(guān)系

通過(guò)box-sizing這個(gè)樣式我們可以改變這種寬度計(jì)算方式，它的屬性值有兩個(gè)：content-box和border-box。默認(rèn)值為content-box，也就是標(biāo)準(zhǔn)的盒子模型，此時(shí)的計(jì)算公式為

• width = 內(nèi)容的寬度
• height = 內(nèi)容的高度

另一個(gè)屬性為border-box，它的width和height屬性包括內(nèi)容，內(nèi)邊距和邊框，但不包括外邊距?？吹竭@里相信大家都已經(jīng)明白了，我們用了一個(gè)新的屬性重現(xiàn)了一個(gè)不太“標(biāo)準(zhǔn)”的標(biāo)準(zhǔn)，被設(shè)置為border-box的元素在計(jì)算寬高時(shí)使用的就是IE6的模式。

我們?yōu)槭裁匆_(kāi)歷史的“倒車(chē)”

其實(shí)也不能那么說(shuō)，只是繞了一圈之后時(shí)間又證明了哪一種方式更合理而已，也并沒(méi)有誰(shuí)對(duì)誰(shuí)錯(cuò)的問(wèn)題，那么這種計(jì)算寬高的模式好在哪里呢？我們舉個(gè)簡(jiǎn)單的例子

<div id="container"><div id="header" class="content_box">header</div><div id="left" class="content_box">left</div><div id="right" class="content_box">right</div><div style="clear: both;"></div><div id="footer" class="content_box">footer</div> </div> .content_box {height: 48px; }#container {width: 480px;background: yellow; }#left {width: 120px;background: red;float: left; }#right {width: 360px;background: blue;float: left; }

這種左右布局的應(yīng)用可以說(shuō)十分廣泛，并且看起來(lái)很直觀且合理，但是如果我們隨便在left或right中加1px的內(nèi)邊距或border，整個(gè)布局就會(huì)被破壞，原因很好理解，按我們上面所說(shuō)，現(xiàn)代瀏覽器默認(rèn)是content-box模式，設(shè)定的寬度是內(nèi)容的寬度，當(dāng)我們?cè)黾恿藀adding或者border的時(shí)候，left+right就不再是120+360=480了，而是120+360+1=481，由于容器的寬度不夠，div就會(huì)自動(dòng)換到下一行，就變成了現(xiàn)在這個(gè)樣子：

bootstrap怎么解決的

說(shuō)到這里，已經(jīng)有人開(kāi)始想了，為什么以前沒(méi)有發(fā)現(xiàn)這個(gè)問(wèn)題，我也是最近才遇到這種情況，因?yàn)閎ootstrap已經(jīng)預(yù)先重置了默認(rèn)的box-sizing，而很多組件又是以bootstrap為基底來(lái)做文章，所以即使我們不知道box-sizing這一樣式，很可能也已經(jīng)熟悉了這種模式。

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }

另外，bootstrap并不是在所有地方都用border-box，在一些特定元素上還是使用content-box

hr {height: 0;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box; }input[type="checkbox"], input[type="radio"] {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 0; }

控件的box-sizing

當(dāng)看到bootstrap對(duì)控件單獨(dú)設(shè)置box-sizing時(shí)我產(chǎn)生一些疑問(wèn)，控件的默認(rèn)box-sizing難道不一樣嗎？事實(shí)證明確實(shí)不一樣，以常見(jiàn)的text和button來(lái)說(shuō)，text默認(rèn)就是content-box，而button則是border-box，這就不難理解為什么有時(shí)候我們給不同的控件設(shè)置同樣的寬高卻又無(wú)法對(duì)齊，這也是box-sizing在作祟。

注意甄別

不過(guò)對(duì)于這一樣式也有分歧，所以不同的樣式庫(kù)使用box-sizing標(biāo)準(zhǔn)就不太相同，當(dāng)我們引入了不同的庫(kù)之后就要額外甄別這一問(wèn)題，選擇項(xiàng)目最適合的那種。

關(guān)于padding值不包含在width里面的問(wèn)題，可能和box-sizing有關(guān) box-sizing

總結(jié)

以上是生活随笔為你收集整理的设置width不生效_关于padding被计算在width中问题——box-sizing相关的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。