CSS盒模型的理解

在面试中，我们常被问到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)