DOM盒模型

CSS中的盒模型

1. 传统盒模型
   在传统盒子模型中我们说的宽度和高度是指该块元素内容的宽度和高度。
   而一个块元素的宽度是

   width === width+padding(left/right)+border(left/right);

   相应的一个块元素的高度是

   height === height+padding(top/bottom)+border(top/bottom);

2. CSS3中的盒模型
   在css3中新增加了盒子模型
   .box{

   border-sizing: border-box;

   }
   此时块元素的的width和height仅仅是这个块元素的宽度和高度。它包含了这个块元素的padding和border。在这个基础上我们在修改padding或者border块元素的宽度讲不会发生变化。改变的是内容的宽高。

JS中的盒模型

JS中也提供了一些属性和方法用来描述当前元素的样式,主要有以下几种：
备注：通过JS盒子模型属性获取的结果是不带单位的。而且只能是整数（它会自动四舍五入，进行计算）

1. clientWidth/clientHeight
   clientWidth/clientHeight：当前盒子可视区域的宽度和高度
   可视区域是指：内容的宽高+padding

   clientWidth = width + padding(left + right);
   clientHeight = height + padding(top + bottom);

   可视区域和内容是否溢出以及我们是否设置了overflow：hidden没有关系
   在我们的项目中，我经常这样使用这两个属性

   //获取当前页面一屏幕的宽度
   W = document.documentElement.clientWidth||document.body.clientWidth;
   //获取当前页面一屏幕的高度
   H = document.documentElement.clientHeight||document.body.clientHeight;

   利用这个就可以实现让一个盒子水平和垂直居中。
   即实现相对定位，计算出来left和top就可以实现

   //width和height是盒子的宽高
   left = (W-width)/2;
   top = (H-height)/2;

2. clientLeft/clientTop

   clientLeft:盒子左边框的宽度。
   clientTop:盒子上边框的高度。
   它俩获取的结果其实就是border-width。
   JS中只有clientLeft和clientTop，没有clientRight和clientBottom这两个属性。

3. offsetWidth/offsetHeight

   offsetWidth/offsetHeight就是在clientWidth和clientHeight的基础上加上盒子的边框。
   即：

   offsetWidth === clientWidth + border(left/right);
   offsetHeight === clientHeight + border(top/bottom)

   和内容是否溢出没有关系。
   在我们的项目中，如果想获取一个盒子的宽度和高度，我们一般用offsetWidth（而不是clientWidth）和offsetHeight，因为border也算是当前盒子的一部分。

4. scrollWwidth/scrollHeight

   1) 没有内容溢出情况下：

   获取的结果和clientWidth/clientHeight是一样的

   2) 有内容溢出的情况下:

   真实内容的宽度和高度（包含溢出的内容），在加上左边的padding 和上边的padding 值。

   //有横向滚动条时，获取当前页面的真实宽度
       document.documentElement.scrollWidth||document.body.scrollWidth;
       //有纵向滚动条时，获取当前页面的真实高度
       document.documentElement.scrollHeight||document.body.scrollHeight;

5. window.getComputedStyle/currentStyle

   在JS中获取元素具体的样式值：例如获取某个元素的paddingLeft值。
   方法一：
   currentElement.style.XXX
   例如：

   box.style.paddingLeft

   注意这个方法是获取当前元素的行内样式。只能获取当前元素的行内样式，内嵌或者外联样式是不能获取的。

   方法二：
   通过 window.getComputedStyle/currentStyle可以获取所有经过浏览器计算过的样式。

   或者当前元素的paddingLeft值，使用例子：

   window.getComputedStyle(box, null).paddingLeft
   //或者下面这个方法，box是当前元素，第二个参数是当前元素的伪类，一般为
   window.getComputedStyle(box, null)['paddingLeft']

   window.getComputedStyle在IE6~8中不兼容。不兼容的原因是因为在IE6~8下，window对象没有getComputedStyle属性发放导致的。所以在IE6~8中我们使用currentStyle属性。备注currentStyle只有IE中才有，其他浏览器中都没有这个属性。使用方法例子：

   box.currentStyle['paddingLeft'];
   //或者
   box.currentStyle.paddingLeft