盒子模型
盒子模型
1.CSS盒子模型由四部分構(gòu)成：手動(dòng)設(shè)定的寬高，padding，border，margin
2.JS盒子模型：可以通過系統(tǒng)提供的方法，來獲取元素的樣式；·
3.JS盒子模型中系統(tǒng)提供的屬性和方法：
1）client系列：clientWidth ?clientHeight clientLeft clientTop;
2) offset系列：offsetWidth offsetHeight offsetLeft offsetTop offsetParent
3) scroll系列：scrollWidth scrollHeight scrollLeft scrollTop;
4.關(guān)于父級(jí)：
結(jié)構(gòu)父級(jí) parentNode
在結(jié)構(gòu)父級(jí)中，最大的元素是html元素
最大的節(jié)點(diǎn)是document節(jié)點(diǎn)
定位父級(jí) offsetParent
在定位里面最大的是body元素
5.逐個(gè)解讀JS盒子模型的方法：
1）client系列：整個(gè)盒子，自己設(shè)定的寬跟高，不包括邊框
clientWidth/clientHeight:手動(dòng)設(shè)定的寬度/高度+左右的padding/上下的padding
clientLeft/clientTop:左邊框的寬度/上邊框的寬度
跟內(nèi)容溢出無關(guān)；
2）offset系列：整個(gè)盒子的寬高，包括邊框
- offsetWidth/offsetHeight:clientWidth/clientHeight+左右border/上下border; ? ?- offsetLeft/offsetTop:當(dāng)前元素的外邊框（不算自己的邊框），到定位父級(jí)的內(nèi)邊框之間的距離； ? ?跟內(nèi)容溢出無關(guān)；
- 偏移參照----------定位父級(jí)offsetParent3)scroll系列：跟內(nèi)容溢出有關(guān)：
當(dāng)內(nèi)容沒有溢出的情況：就是整個(gè)盒子的寬高
- ?scrollHeight:等于clientHeight ?- ?scrollWidth等于clientWidth ?- ?scrollTop：被瀏覽器卷去的高度 ? ?當(dāng)內(nèi)容溢出的情況：
- ?scrollHeight:溢出內(nèi)容的高度+上padding,約等于上padding+真實(shí)內(nèi)容的高度； ?- ?scrollWidth:溢出左右的寬度+左右padding ?- ?scrollTop:被瀏覽器卷去的高度 ?- ?scrollLeft:被瀏覽器卷去的左右的高度（左右滾動(dòng)條，可滾動(dòng)區(qū)域（左右溢出部分） ? ?約等于：
1）當(dāng)內(nèi)容溢出時(shí)，不同瀏覽器得到的值不同；
2）同一瀏覽器下，是否設(shè)置overflow:hidden得到的值也不同；
- ?window.onscroll(滑動(dòng)滾輪的時(shí)候，多次觸發(fā)的可視窗口的滾輪條 ?)
- onload ?頁面加載之后立即執(zhí)行 加載成功 ?- onerror 頁面加載失敗6:關(guān)于js盒子模型的小問題
1）以上屬性只能拿到復(fù)合值；無法拿到單獨(dú)的值--getCss(獲取非行間樣式)
2）以上屬性只能拿到整數(shù)，無法拿到小數(shù)--解決不了，四舍五入
3)關(guān)于js盒子模型的封裝--win;
4)offsetLeft只能求出當(dāng)前元素的外邊框，距離定位父級(jí)的內(nèi)邊框之間的距離，無法得到到body的距離
封裝 offset（求的是元素到body的偏移量）
