Bootstrap盒模型

关于盒模型有两种方案，可以通过box-sizing来控制，关于盒模型其实两种方案都是表示有margin,border,'padding','conent'组成，唯一的区别在于一个Dom的width1到底是指那部分。

box-sizing: content-box;

这时 width = content

box-sizing: border-box;

这时 width = border + padding + content

但是这两个哪一个才是w3c标准盒模型呢，我一直以为是第二个，也是就border-box,因为好像一直是这么用的啊。起码看到bootstrap确实用了这个啊。

但查看了MDN的文档才知道第一种才是w3c标准盒模型

那么为什么bootstrap选择了border-box

对于这个Twitter在发布bootstrap3的时候的一篇说明提到了:

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的大小，也更加容易实现和使用栅格系统

在栅格系统中，bootstrap3是通过百分比来控制Dom的大小，使用border-box只需要控制宽度即可，否者需要控制宽度和padding，实现上过于麻烦，而且padding容易被修改，一旦被修改就会影响其他的布局。所以bootstrap才选择了border-box作为框架的统一的盒模型。