最近研究DOM，這是js操作的基礎，不深入了解，你沒法跟瀏覽器親密對話。廢話不多說，今天對client，offset，scroll及style寬高家族左翼深入探討，以chrome為例，其他瀏覽器可能有解析上的差別。

具體來說即：

1.clientWidth，clientHeight，clientLeft，clientTop；

2.offsetWidth，offsetHeight，offsetLeft，offsetTop；

3.scrollWidth，scrollHeight，scrollLeft，scrollTop；

4.height，width。

clientWidth

顧名思義，client，客戶端。具體到某一個元素比如html，body或者a，p，img指的就是這個元素，而非常規理解的客戶端諸如瀏覽器。

html標簽：

當html各種屬性為默認值時，內部是空的head及body元素，其clientWidth值即為視口寬度，比如我的電腦屏寬1366px，當縮放瀏覽器的時候，該值變成縮放后的寬度，而當豎直滾動條出現的時候，需減去滾動條的寬度（豎直滾動條在高度大于可視屏幕高度時出現，可能是html或其子元素撐開的）。而移動端瀏覽器是不支持縮放的，因此在默認情況下，這個值就是內置的視口寬度，所謂視口寬度不是硬件屏寬，而是虛擬寬度，比如iphone6為980px，實際屏寬沒這么大。

由于影響寬度的屬性有width，margin，padding，border，outline。我們逐一來看，當設置html有width，margin，padding，border，outline任意一個或累加的時候，clientWidth不受影響。也即html的clientWidth只與客戶端內置視口寬及用戶縮放行為有關。

如果內部元素body非默認值，而是設定width，margin，padding，border，outline任意一個或累加的時候，我們看看html的clientWidth的表現，經測試，無論設置多少不會對html的clientWidth造成影響，驗證了該值只與客戶端內置視口寬及用戶縮放行為有關的結論。

如果出現右側滾動條，一般是當元素高大于瀏覽器可見部分高時出現，該值需要減去滾動條的寬度，即16px。

以上測試使用的chrome瀏覽器，其他瀏覽器可能會有區別。總的一句話，html標簽該值只與客戶端內置視口寬及用戶縮放行為有關。

body標簽：

當body標簽各種屬性為默認值時，內部為空，父元素html為默認屬性。其clientWidth值跟html一樣，即受客戶端內置視口寬及縮放行為影響，如果出現滾動條，則需減去滾動條的寬度16px，而且body默認左右各8px的margin。

tips：body最大clientWidth為33554430px。

而若在其父元素，子元素各項屬性值保持默認的情況下，body設置以上width等5項值，會出現什么情況呢？當設置了寬，該值變為寬，當設置了padding，該值變為寬+padding，也即設置本身本身就具有了優先級，而設置另外三項則不受影響。這個寬度是不受限制的，小可到0，大可到無窮，當然這個無法驗證，數值太大，瀏覽器會崩潰。

而若本身保持默認值，父元素html進行5項值測試，設置寬，結果變成該寬值減去滾動條寬度16px，即便沒出現滾動條也是如此。而設置其他值不受影響。也即body的clientWidth是受父元素html的寬影響的，其他值不對該值造成影響。

若本身及父元素保持默認值，子元素變動5項值的時候，該值不受影響。

經以上驗證，body的該值只受本身的寬+padding及父元素html寬的影響，本身值更具優先級，也即一旦設置本身寬+padding，父元素的寬失效。

p標簽（block元素）：

當父元素，子元素及本身都為默認值時，該值需要減去父元素body默認的margin左右各8px，當出現滾動條還需減去滾動條的寬度。實際等同于父元素的寬，如果自身有border還需減去。

當父子元素默認，本身設置以上5值，除本身寬+padding外，其他值不影響，也即clientWidth值等于本身寬加上本身左右padding。該結論跟body一樣。

當本身及子元素默認，父元素設置5項，該值表現跟body一樣，即該值成為父元素寬度，其他四項不造成影響。

當本身及父元素為默認，子元素設置5項，該值恢復到各項都為默認值的時候，即屏寬減去左右padding各8px。

由此可見，block元素的clientWidth也只受本身寬+padding及父元素寬的影響，如果包括父元素往上追蹤皆未設置寬度，則會一直追到根元素html的默認值，在PC是客戶端可見寬，在移動端是內置視口寬。而若設置了本身寬，padding，或寬+padding，則該值即是這些值，棄用父元素及往上繼承的寬度。

video（inline-block元素）：

當父子及本身為默認時，該值為0。

當父子為默認，本身設置5值，該值為本身寬+padding。

當本身及子為默認值，父設置5值，該值為0，也即不受父元素寬度影響，這是跟block元素相區別的地方。

當本身及父元素為默認值，子元素設置5值，此類情況對于自閉合標簽不適用。該值恢復默認值，也即該元素內置的寬+padding。

因此對于inline-block元素來說，其clientWidth只受本身寬+padding的影響，不受其他影響。

a（inline元素）：

當父子及本身為默認時，該值為0。

當父子為默認，本身設置5值，該值為0。

當本身及子為默認，父為5值，該值為0。

當本身及父為默認，子為5值，該值為0。

一句話，對于inline元素來說，clientWidth這個值始終為0，即便內有文本元素也為0。

總而言之，根元素html只受默認視口及用戶行為影響；block元素，包括body及其他塊clientWidth受自身寬+padding及父元素寬的影響，且以自身為優先；inline-block只受自身寬+padding影響；inline不受任何影響，始終為0。再總結下，clientWidth實際就是自身所有的寬+padding。內聯元素皆無，內聯塊和塊級元素二者之和。

ok，按著這樣一梳理，這個屬性背后隱藏的東西就一目了然了，后面繼續家族中其他元素的驗證及解讀。前幾天看了網絡上的幾篇文章，有出入，因此決定自己一探究竟。