關(guān)于盒模型有兩種方案，可以通過box-sizing來控制，關(guān)于盒模型其實(shí)兩種方案都是表示有margin,border,'padding','conent'組成，唯一的區(qū)別在于一個(gè)Dom的width1到底是指那部分。
box-sizing: content-box;
這時(shí) width = content
box-sizing: border-box;
這時(shí) width = border + padding + content
但是這兩個(gè)哪一個(gè)才是w3c標(biāo)準(zhǔn)盒模型呢，我一直以為是第二個(gè)，也是就border-box,因?yàn)楹孟褚恢笔沁@么用的啊。起碼看到bootstrap確實(shí)用了這個(gè)啊。
但查看了MDN的文檔才知道第一種才是w3c標(biāo)準(zhǔn)盒模型
那么為什么bootstrap選擇了border-box
對(duì)于這個(gè)Twitter在發(fā)布bootstrap3的時(shí)候的一篇說明提到了:
Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system.
可以看到之所以選擇border-box是為了更加方便控制Dom的大小，也更加容易實(shí)現(xiàn)和使用柵格系統(tǒng)
在柵格系統(tǒng)中，bootstrap3是通過百分比來控制Dom的大小，使用border-box只需要控制寬度即可，否者需要控制寬度和padding，實(shí)現(xiàn)上過于麻煩，而且padding容易被修改，一旦被修改就會(huì)影響其他的布局。所以bootstrap才選擇了border-box作為框架的統(tǒng)一的盒模型。
