站長(zhǎng)資訊網(wǎng)
本篇文章給大家通過圖文方式講解JS盒子模型的基本屬性：clientWidth/Height、offsetWidth/Height、offsetTop/Left、scrollWidth/Height、scrollTop/Left，希望對(duì)需要的朋友有所幫助！ 寫一個(gè)JS盒子 模型： clientWidth / clientHeight ：盒子內(nèi)部的寬高 clientTop / clientLeft ：左邊框和上邊框的寬度 offsetWidth / offsetHeight :盒子可見區(qū)域的寬高 offsetParent：獲取它的父參照物（不一定是父元素） offsetTop / offsetLeft：距離其父參照物的上/左偏移（當(dāng)前元素的外邊框到父參照物元素的里邊框） scrollWidth / scrollHeight ：可視區(qū)內(nèi)部的真實(shí)寬高 scrollTop / scrollLeft：豎向/橫向滾動(dòng)條卷曲的高度/寬度
<style> .container { width: 300px; height: 300px; border: 3px solid red; margin: 50px; position: relative; } .box { padding: 30px; width: 100px; height: 150px; border: 10px solid lightblue; position: absolute; top: 50px; left: 50px; font-size: 15px; line-height: 100px; text-align: center; overflow: auto; } </style> <body> <div class="container"> <div class="box">盒子</div> </div> </body>
盒子的屬性：client
(1) clientWidth: 內(nèi)容width + 左右padding
(2) clientHeight: 內(nèi)容height + 上下padding
offset
(1) offsetWidth: clientWidth+ 左右border
(2) offsetHeight: clientHeight+ 上下border
父參照物的查找：
(1) 在同一個(gè)平面中，最外層元素是所有后代元素的父參照物；
(2) 而基于position：absolute/relative/fixed會(huì)讓元素脫離文檔流，成為一個(gè)新的平面，從而改變?cè)氐母竻⒄瘴铮?br /> (3) body的父參照物為null。
scroll
(1) 沒有內(nèi)容溢出時(shí): scrollWidth/Height = clientWidth/Height
(2) 有溢出的話不一樣，結(jié)果約等于盒子真實(shí)內(nèi)容的寬高:上下padding+真實(shí)內(nèi)容的寬高；
(3) 只要出現(xiàn)溢出的情況，overflow的值，也會(huì)一定程度地改變scroll的結(jié)果。
注：上面的屬性里，只有scrollLeft和scrollTop可以設(shè)置值，其他屬性都是只讀
最細(xì)講解JS盒子模型的基本屬性（圖文示例）
相關(guān)推薦
- 華納云香港高防服務(wù)器150G防御4.6折促銷，低至6888元/月，CN2大帶寬直連清洗，終身循環(huán)折扣
- RakSmart服務(wù)器成本優(yōu)化策略
- 2025年國內(nèi)免費(fèi)AI工具推薦：文章生成與圖像創(chuàng)作全攻略
- 自媒體推廣實(shí)時(shí)監(jiān)控從服務(wù)器帶寬到用戶行為解決方法
- AI時(shí)代，個(gè)人站長(zhǎng)如何用AI工具實(shí)現(xiàn)“一人公司”
- 個(gè)人站長(zhǎng)消亡論？從“消失”到“重生”的三大破局路徑
- raksmart法蘭克福云服務(wù)器延遲高嗎?
- 華納云高防服務(wù)器3.6折起低至1188元/月，企業(yè)級(jí)真實(shí)防御20G`T級(jí)，自營機(jī)房一手服務(wù)器資源
