关于CSS盒模型

分类

  • 标准模型
    • 只包含 content
  • IE 模型
    • 包含 content、padding、border 三部分

CSS3有一个属性 box-sizing,属性值 border-box 对应的是 IE 模型,content-box(默认) 对应的是 标准模型

获取盒模型大小

下面介绍获取宽度方法,获取高度将 width 换成 height 即可

elem.style.width

只能获取内联样式设置的宽高

elem.currentStyle.width

只有 IE 浏览器支持此属性

window.getComputedStyle(elem).width

通用的处理方法

elem.getBoundingClientRect.width

通用的处理方法