CSS盒模型

css盒模型是html+css中最核心的基础知识，那么什么是盒模型？
css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：

标准盒模型和IE盒模型

盒模型有标准盒模型和IE盒模型两种模式，两者的区别在于对元素的width和height的计算方式不同：

在标准盒模型中：盒子的大小就是element的width和height；而在IE盒模型中：盒子的宽=element的width+(padding-left)+(padding-right)+(border-left)+(border-right);盒子的高=element的height+(padding-top)+(padding-bottom)+(border-top)+(border-bottom)

设置box-sizing属性为 content-box可以将一个盒模型设置成标准盒模型，设置box-sizing属性为border-box可以将一个盒模型设置成IE盒模型；浏览器中默认使用的事标准盒模型。

如何通过JS获得盒模型的宽度和高度

dom.style.width/height

可以通过style属性获取盒子宽度高度，上面写的dom代表页面上的元素（如：通过document.getElementById获取到的元素，下面的dom代表同样的意思），利用元素的style属性是可读可写的，也就是说可以通过style属性获取到某个元素的宽高，通过设置style属性宽高的值也可以设置元素的宽高。我们都知道在给元素写样式的时候有几种方式，可以直接写在标签上面，在标签内设置style属性，通常称为内联样式；也可以在页面上使用<style>标签来为页面上的元素添加样式，这种也被人称为内嵌样式；还有一种就是写一个专门的css文件，用来放页面样式代码，这种常被称为外联样式。但是值得一提的是，通过style属性只能获取到内联样式上面设置的属性值，通过style属性获取到的值是没有经过浏览器渲染的值。

运行结果如下：

dom.currentStyle.width/height

currentStyle属性完美解决了上面style的两个问题，它可以获取到通过任何方式设置的元素的样式，获取到的样式的值是经过浏览器渲染后的，最终显示的值；但是，它也存在一个问题，这个属性只在IE上能正确运行。

window.getComputedStyle()

window.getComputedStyle(“元素”,”伪类”)可以获取到指定元素的所有属性和样式，其返回值是一个对象。想要获取不同的属性值，可直接在window.getComputedStyle()的返回对象上取得相应值。这种方式获得的值也是浏览器渲染后的值，前面说过，这个方法的返回值是一个对象，其中包括元素的所有样式，如果某个样式没有在样式中显示设置，也可以获得浏览器为该元素设置的默认的值，也即是浏览器渲染后显示的样式。
这种方式的缺点是不支持IE8及以下版本的IE，在其他的浏览器基本上都支持采用这种方式获取页面渲染后的样式。

运行结果如下

dom.getBoundingClientRect().width/height

getBoundingClientRect()方法可以获得元素相对于视口的左上角位置而言的距离，如下图所示：

其返回值为对象，包括top,right,bottom,left,width,height,x,y几个属性，可以分别获得这些属性的值，这些值都是经过浏览器渲染后的结果。其中top,right,bottom,left可以兼容所有浏览器，而width,height在IE8及以下版本不能正确获得。

运行结果如下：