css盒子模型

盒子模型分类

• 标准盒模型 （除IE浏览器其他浏览器默认设置）

  元素的width和height属性只包含内容content部分，不包含内边距padding和边框border部分

• ie盒模型

      元素的width和height属性同时包含内容content，内边距padding和边框border部分，即：

      width = content + padding + border

设置

除了ie浏览器大多数浏览器默认的是标准盒模型，如果要设置为IE盒模型可以通过设置 box-sizing: border-box;属性即可，标准的为box-sizing: content-box;属性即可

js获取盒模型对应的宽和高

• dom.style.width/height 该属性只能获取内联样式设置的宽和高
• dom.currentStyle.widht/height 该属性表示当前元素的计算后的宽和高，但是只能ie浏览器用
• window.getComputedStyle(dom).widht/height 该属性表示当前元素的计算后的宽和高，但是ie高版本和其他浏览器均可以用
• dom.getBoundingClientRect()该属性用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，同时还有当前元素的宽和高