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 值。
    有内容溢出时，我们通过scrollWidth/scrollHeight获取的结果是一个约等于值。
    
    我们在项目中会这样使用这个属性


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

1. window.getComputedStyle/currentStyle

   window.getComputedStyle在IE6~8中不兼容。