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