基本概念
- 基于W3C标准的盒模型 又叫标准盒模型 又叫content-box
- W/H 计算的是 CW/H
- IE盒模型 又叫border-box
- W/H 计算的是 CPBW/H
- box-sizing: content-box|border-box|inherit;
- 父元素设置的box-sizing是不会天然继承给子元素的，因此box-sizing不是一个继承属性
- 在线例子证明了box-sizing不是继承属性，但是可以设置为继承
IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是标准盒模型。
DOCTYPE的设置可以让IE6及其以上的版本遵循标准兼容模式的方式工作，也就是所有的浏览器都会把盒模型解释为标准盒模型 css3的box-sizing属性可以切换CB BB
如果把margin算进去的那是盒子占据的位置，而不是盒子的大小！ 我们在编写页面代码时应声明DOCTYPE类型，不然的话，IE浏览器会将盒子模型解释为IE盒模型，FireFox等会将其解释为标准盒模型
若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为标准盒模型
- H5出来之前DOCTYPE这句话是很长的，H5之后这句话就很简洁了
- DOCTYPE必须放在最顶部
