盒子模型

盒子模型

1.CSS盒子模型由四部分構成：手動設定的寬高，padding，border，margin

2.JS盒子模型：可以通過系統提供的方法，來獲取元素的樣式；·

3.JS盒子模型中系統提供的屬性和方法：

1）client系列：clientWidth ?clientHeight clientLeft clientTop;

2) offset系列：offsetWidth offsetHeight offsetLeft offsetTop offsetParent

3) scroll系列：scrollWidth scrollHeight scrollLeft scrollTop;

4.關于父級：

結構父級 parentNode

在結構父級中，最大的元素是html元素

最大的節點是document節點

定位父級 offsetParent

在定位里面最大的是body元素

5.逐個解讀JS盒子模型的方法：

1）client系列：整個盒子，自己設定的寬跟高，不包括邊框

clientWidth/clientHeight:手動設定的寬度/高度+左右的padding/上下的padding

clientLeft/clientTop:左邊框的寬度/上邊框的寬度

跟內容溢出無關；

2）offset系列：整個盒子的寬高，包括邊框

- offsetWidth/offsetHeight:clientWidth/clientHeight+左右border/上下border; ? ?- offsetLeft/offsetTop:當前元素的外邊框（不算自己的邊框），到定位父級的內邊框之間的距離； ? ?跟內容溢出無關；

- 偏移參照----------定位父級offsetParent3)scroll系列：跟內容溢出有關：

當內容沒有溢出的情況：就是整個盒子的寬高

- ?scrollHeight:等于clientHeight ?- ?scrollWidth等于clientWidth ?- ?scrollTop：被瀏覽器卷去的高度 ? ?當內容溢出的情況：

- ?scrollHeight:溢出內容的高度+上padding,約等于上padding+真實內容的高度； ?- ?scrollWidth:溢出左右的寬度+左右padding ?- ?scrollTop:被瀏覽器卷去的高度 ?- ?scrollLeft:被瀏覽器卷去的左右的高度（左右滾動條，可滾動區域（左右溢出部分） ? ?約等于：

1）當內容溢出時，不同瀏覽器得到的值不同；

2）同一瀏覽器下，是否設置overflow:hidden得到的值也不同；

- ?window.onscroll(滑動滾輪的時候，多次觸發的可視窗口的滾輪條 ?)

- onload ?頁面加載之后立即執行 加載成功 ?- onerror 頁面加載失敗6:關于js盒子模型的小問題

1）以上屬性只能拿到復合值；無法拿到單獨的值--getCss(獲取非行間樣式)

2）以上屬性只能拿到整數，無法拿到小數--解決不了，四舍五入

3)關于js盒子模型的封裝--win;

4)offsetLeft只能求出當前元素的外邊框，距離定位父級的內邊框之間的距離，無法得到到body的距離

封裝 offset（求的是元素到body的偏移量）