在面试中,我们常被问到CSS的盒模型,那么今天我们就来聊聊这个东东。
概念:
页面渲染是,DOM元素所采用的布局模型,可以通过 box-sizing 来进行设置。
分类:
标准盒模型 | IE盒模型 |
---|---|
width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。 | width 和 height 指的是内容区域+border+padding的宽度和高度。 |
图1:来自IE盒模型
图2:来自标准盒模型
如何获取盒模型对应的宽高
var oDiv = document.getElementsByClassName('box')[0]
console.log( window.getComputedStyle(oDiv).width)