這篇文章給大家用圖文解釋JS盒子模型的基本屬性:clientWidth/Height、offsetWidth/ Height、offsetTop/Left、scrollWidth/Height、scrollTop/Left,希望對需要的朋友有幫助!
寫一個JS盒子
<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>
模型:
# 盒子的屬性:
(1) clientWidth: 內容width 左右padding
(2) clientHeight: 內容height 上下padding
clientTop / clientLeft :左邊框與上邊框的寬度
#offsetParent:取得它的父參照物(不一定是父元素)
父參照物的查找:
(1) 在同一個平面中,最外層元素是所有後代元素的父參照物;
( 2) 而基於position:absolute/relative/fixed會讓元素脫離文檔流,成為一個新的平面,從而改變元素的父參照物; (3) body的父參照物為null。
offsetTop / offsetLeft:距離其父參照物的上/左偏移(目前元素的外邊框到父參照物元素的里邊框)
以上是最細講解JS盒子模型的基本屬性(圖文範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!