標準盒模型和怪異盒模型

盒子模型眾所周知，這裡先簡單介紹一下。

可以看到，在標準盒模型(box-sizing:content-box)下，width和height是內容區域即content的width和height。而盒子總寬度為

在標準模式下，乙個塊的總寬度= width + margin(左右) + padding(左右) + border(左右)

而ie盒模型(box-sizing:border-box)或怪異盒模型顯而易見的區別就是，width和height除了content區域外，還包含padding和border。盒子的總寬度為

乙個塊的總寬度= width + margin(左右)（即width已經包含了padding和border值）

當然這些大夥應該都知道，關鍵的是如何運用和選擇哪種盒模型。

首先，如何運用？

只要在文件首部加了doctype申明，即使用了標準盒模型，而不加，則會由瀏覽器自己決定，比如，ie 瀏覽器中顯示「ie盒子模型」，在 ff 瀏覽器中顯示「標準 w3c 盒子模型」。

然後，選擇哪種？

按理說，我們應該遵循w3c標準使用標準盒模型，但我發現很多ui框架使用的都是怪異盒模型，比如ionic,vux,和bootstrap,為什麼呢?我思考了很長時間。

不知道大家有沒有遇到過這種情況，本來我畫了兩個div,他們在flex布局下分別佔50%的寬度，很簡單，我們width設定為50%即可，當我們畫完了，很滿意的看了看頁。

**:

*

"display: flex;"
>
"width: 50%;background-color: blue;color: white;"
>我是左邊<
/div>
"width: 50%;background-color: red;color: white"
>我是右邊<
/div>
<
/div>效果:
這時候，乙個需求來了，左邊的部分要加上邊框,你一想，這不簡單麼，立馬給左邊加上了乙個邊框。但，意外出現了，左邊和右邊的不相等了。因為左邊加上了邊框，所以寬度溢位了，這時候右邊就會壓縮自己，這樣就導致兩邊不一致了
**:"display: flex;box-sizing: content-box"
>
"width: 50%;background-color: blue;color: white;border: 5px solid black"
>我是左邊<
/div>
"width: 50%;background-color: red;color: white"
>我是右邊<
/div>
<
/div>效果:
啊，崩潰，又得調半天，關鍵還不好調。因為border必須為數值，而其他的為百分比，這樣就很難知道左右該設多少比例，才能讓左右兩邊完全一致了。
而用怪異盒模型，這樣的問題就迎刃而解。
**:*
"display: flex;"
>
"width: 50%;background-color: blue;color: white;border: 5px solid black"
>我是左邊<
/div>
"width: 50%;background-color: red;color: white"
>我是右邊<
這樣不管你邊框是多寬，左右都是始終相等的。
然後，再請大家想一想，移動端都是需要自適應布局的，需要用到大量的百分數，這時候再用標準盒模型，邊框進來插一腳無疑會讓情況變得很複雜，對自適應布局很不友好，這大概就是很多框架都採用怪異盒子模型的原因吧。
以上純屬個人觀點，不對的地方，請大家指教。

標準盒模型和怪異盒模型

ie盒模型 怪異盒模型 和標準盒模型的區別就是，ie盒模型中width和height除了content區域外，還包含padding和border。盒子的總寬度為乙個塊的總寬度 width margin 左右 即width已經包含了padding和border值 在標準盒模型下，width和heigh...

標準盒模型和怪異盒模型

盒模型的組成，由內而外只要由 content，padding，border和margin組成。標準盒模型和怪異盒模型的主要區別就是所包含的內容。標準盒模型的內容就是content的大小 怪異盒模型的內容是content padding border 怪異盒模型的寬 content的寬 padding...

標準盒模型和怪異盒模型

盒子模型眾所周知，這裡先簡單介紹一下。可以看到，在標準盒模型下，width和height是內容區域即content的width和height。而盒子總寬度為 在標準模式下，乙個塊的總寬度 width margin 左右 padding 左右 border 左右 而ie盒模型或怪異盒模型顯而易見的區別...