最細講解JS盒子模型的基本屬性（圖文範例）-js教程-PHP中文網

最細講解JS盒子模型的基本屬性（圖文範例）

藏色散人

發布： 2022-08-06 17:52:37

轉載

1931 人瀏覽過

這篇文章給大家用圖文解釋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>

登入後複製

模型：
最細講解JS盒子模型的基本屬性（圖文範例）
# 盒子的屬性：

client

##clientWidth / clientHeight ：盒子內部的寬高
(1) clientWidth: 內容width 左右padding
(2) clientHeight: 內容height 上下padding

clientTop / clientLeft ：左邊框與上邊框的寬度
##offset

offsetWidth / offsetHeight :盒子可見區域的寬高

(2) offsetHeight: clientHeight 上下border

#offsetParent：取得它的父參照物（不一定是父元素）
父參照物的查找：
(1) 在同一個平面中，最外層元素是所有後代元素的父參照物；
( 2) 而基於position：absolute/relative/fixed會讓元素脫離文檔流，成為一個新的平面，從而改變元素的父參照物； (3) body的父參照物為null。
offsetTop / offsetLeft：距離其父參照物的上/左偏移（目前元素的外邊框到父參照物元素的里邊框）

#scroll

scrollWidth / scrollHeight ：可視區內部的真實寬高

###scrollTop / scrollLeft：垂直/橫向捲捲捲曲的高度/寬度############註：上面的屬性裡，只有scrollLeft和scrollTop可以設定值，其他屬性都是唯讀################################相關推薦：【###JavaScript影片教學###】###

以上是最細講解JS盒子模型的基本屬性（圖文範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！