CSS盒模型

盒模型

所谓的盒模型，就是浏览器在渲染一个DOM元素时，给其分配的块容器。主要包含如下4个部分

内容(content)、填充(padding)、边框(border)、边界(margin)

其中padding,border,margin都好说，问题就出现在这个content。
在W3C的标准盒模型中，我们设置的height或者width就是content内容区的大小
而在IE的盒子模型中，我们设置的height或者width就是content+padding+border

后来W3C发现IE的盒模型关于width和height的设置更方便，于是添加了一个新的属性box-sizing
其中box-szing: content-box;就是标准的盒模型
而box-sizing:border-box;就是IE的盒模型

列如我们设置如下css

.inner {
    height: 100px;
    width: 100px;
    padding: 20px;
    border: 2px solid #ccc;
    margin: 20px;
    box-sizing:content-box;
}

在chrome中，我们打开调试工具

当我们将上述css中的box-sizing改成border-box后

可以明显的看到，在图一中content的大小为100 x 100,图二中content的大小为56 x 56

由以上的两个列子我们就可以明显看出两个盒子模型的区别。

有一点需要注意：我们使用jquery时，获取的height实际是content的高度，比如图二中，我们使用$('.inner').height()得到的是56, 而不是100

JS获取DOM的高度的方法
1. dom.style.height | width
此方法只支持内联样式
2. dom.currentStyle().width | height
此方法只适用于IE,获取的是css设置的height | width 值
3. window.getComputedStyle(dom).width | height
此方法获取的是CSS设置的height和width值
4. dom.getBoundingClientRect().width | height
该方法返回的对象中包含6个属性
left | right | top | bottom | height | width
其中 height | width 是 CSS设置的height和width值，与box-sizing无关。