关于盒模型有两种方案,可以通过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
作为框架的统一的盒模型。