盒模型
所谓的盒模型,就是浏览器在渲染一个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无关。