盒子模型：

什么是盒子模型：

1、根据盒子模型的概念，每个在页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子。
2、标准盒模型、IE盒模型的区别

如何使用盒子模型：

每个元素都是一个长方形盒子，有几个属性能确定这个盒子的大小。盒子的核心属性是元素的宽高，这两个值可能是由元素的display属性、元素的内容或具体的width，height属性值生成的。内边距padding和边框border拓展了元素的高宽。最后是我们定义的在边框外的外边距margin。
盒子模型对应的CSS属性为:width，height，padding，border，margin

• 例子：

div {
  border: 6px solid #949599;
  height: 100px;
  margin: 20px;
  padding: 20px;
  width: 400px;
}

根据盒子模型，元素的总宽度计算如下

margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

使用上述公式，就能算出示例中的高宽值

• Width：492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
• Height：192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

盒子模型和ＩＥ模型的区别：

1、在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
2、IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

JS如何设置、获取盒模型对应的宽和高：

方式一：通过DOM节点的 style 样式获取

element.style.width/height;

缺点：通过这种方式，只能获取行内样式，不能获取内嵌的样式和外链的样式

方式二（IE独有的）

element.currentStyle.width/height;

获取到的即时运行完之后的宽高（三种css样式都可以获取）。但这种方式只有IE独有。

方式三（通用型）

window.getComputedStyle(element).width/height;

方式三和方式二一样。只不过，方式三能兼容 Chrome、火狐。是通用型方式