站長(zhǎng)資訊網(wǎng)
本篇文章給大家通過(guò)圖文方式講解JS盒子模型的基本屬性：clientWidth/Height、offsetWidth/Height、offsetTop/Left、scrollWidth/Height、scrollTop/Left，希望對(duì)需要的朋友有所幫助！ 寫一個(gè)JS盒子 模型： clientWidth / clientHeight ：盒子內(nèi)部的寬高 clientTop / clientLeft ：左邊框和上邊框的寬度 offsetWidth / offsetHeight :盒子可見(jiàn)區(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) 沒(méi)有內(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)推薦
- 養(yǎng)AI龍蝦，為什么服務(wù)器選擇關(guān)乎你的數(shù)字主權(quán)
- 按場(chǎng)景選配置，養(yǎng)AI龍蝦不同用途需要什么檔次的服務(wù)器
- 養(yǎng)AI小龍蝦主流云服務(wù)器大比拼，阿里云、騰訊云、華為云怎么選
- 騰訊突然官宣：QQ 可以養(yǎng)小龍蝦了，只需兩步！
- 小白保姆級(jí)教程：不用寫代碼在阿里云分鐘級(jí)一鍵部署OpenClaw，打造你的專屬 AI 員工
- 小白保姆級(jí)教程：不用寫代碼在阿里云分鐘級(jí)一鍵部署OpenClaw，打造你的專屬 AI 員工
- 不用寫代碼一鍵部署OpenClaw最新教程
- 限量秒殺，拼手速！38元搶阿里云輕量應(yīng)用服務(wù)器
