CSS之盒模型（一）

盒模型的理解

1. 盒模型主要有两种 标准模型（W3C）、IE模型

2. 标准模型和IE模型的区别(宽度计算方式不同)

标准模型包括margin、border、padding、content ，元素的width=content的宽度

IE模型包括margin、border、padding、content ， 元素的width=content+padding+border的宽度

3. 如何设置盒子模型？

box-sizing:content-box;

标准盒子模型尺寸(box-sizing)基准有两种，分别是content-box和border-box （默认是content-box），简单的来说就是计算宽度是是否加入border、padding

上图 content-box =200 ，border-box =250

4. JS 如何获取盒模型的宽和高？

dom.style.width/height

dom.currentStyle.width/height (渲染后的高宽，只兼容IE)

window.getComputedStyle.width/height (兼容Chrome，通用性更好一些)

dom.getBoundingClientRect().width.height