js盒子模型-->瀏覽器提供一些獲取盒子位置資訊的屬性和方法
1、clientwidth/clientheight
clientwidth:width+左右padding
clientheight:height+上下padding
2、clienttop/clientleft
clienttop:上邊框的高度
clientleft:左邊框的寬度
不存在clientright和clientbottom，這兩屬性的是都是undefined
3、offsetwidth/offsetheight
offsetwidth:clientwidth+左右邊框
offsetheight:clientheight+上下邊框
高度不設定的話，高度會自適應，height的值就是實際內容的高度
4、scrollwidth/scrollheight
在沒有內容溢位的情況下和clientwidth/clientheight是一樣的
有內容的溢位情況(在每乙個瀏覽器中的值不太一樣,加上overflow: hidden和不加還有少許的區別):
scrollheight:約等於 真實內容的高度(包含溢位的內容)+上padding
scrollwidth:約等於 真實內容的寬度(包含溢位的內容)+左padding
console.log(odiv.scrollheight);
獲取當前瀏覽器一螢幕的寬度和高度
console.log(document.documentelement.clientwidth || document.body.clientwidth);
console.log(document.documentelement.clientheight || document.body.clientheight);
當前所有屏加起來的高度(當前網頁的高度)~=
console.log(document.documentelement.scrollheight||document.body.scrollheight);
5、offsetleft/offsettop
偏移量：當前盒子的外邊框距離父級參照物產生的位移
offsetleft：當前元素的外邊框距離父級參照物的左偏移量
offsettop
：當前元素的外邊框距離父級參照物的上偏移量
獲取curele距離body的偏移量:
function offset(curele)left += par.offsetleft;
top += par.offsettop;
par = par.offsetparent;
}return ;
}
前面的10個盒子模型的屬性都是唯讀的
6、scrollleft/scrolltop是可讀寫的
scrolltop:當前滾動條卷去的高度
scrollleft:當前滾動條卷去的寬度
回到頂部案例，延遲載入案例
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
html盒子模型 jquery盒子模型
最近學了jquery的盒子模型之後，感覺真的顛覆我之前對盒子模型的看法，我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件，那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...