JS 的位置、元素宽高计算

为了更加清晰地了解和更好地计算元素的宽高，必须要先清楚 CSS 的盒模型。

1.CSS 盒模型

盒模型是 css 布局的基石，它规定了网页元素如何显示以及元素之间的关系。CSS 模型本质上是一个盒子，封装了周围了 HTML 元素，它包括边距、边框、填充和实际内容。盒模型可分为两种：W3C 盒模型（标准盒模型）、IE 盒模型（怪异盒模型），这两种盒模型都包括 margin、border、padding、content 四个部分，他们的说明如下：

• margin：外边距、外界。边框外的部分，该区域是透明的。
• border：边框。位于外边距和内边距之间，包含着填充区域（padding）和内容区域（content）。
• padding：内边距、填充。该区域包裹着实际内容区域。
• content：盒子的实际内容。
• width 和 height：指的是内容的宽度和高度（并不是指盒子的宽度和高度）。

1.1 标准盒模型

标准盒模型的范围包括：margin、border、padding、content
内容的范围包括：content
即 height 就是 content 的高度；
width 就是 content 的宽度。
标准盒模型的图文介绍如下图所示：

1.2 IE 盒模型

IE 盒模型的范围和标准盒模型一样，也包括：margin、border、padding、content
但其内容的范围包括：border、padding、content


即 height 表示 border、padding、content 三部分的高度之和；

width 表示 border、padding、content 三部分的宽度之和。
IE 盒模型的图文介绍如下图1-2所示：

2. 元素的宽高

2.1 clientHeight

元素可视区域的高度，包括元素的 content 和 padding 的高度，不包括 滚动条 的高度。

// height + padding-top + padding-bottom
document.getElementById('app').clientHeight

2.2 clientWidth

元素可视区域的宽度，包括元素的 content 和 padding 的宽度，不包括 滚动条 的宽度。

// width + padding-left + padding-right + border-left + border-right
document.getElementById('app').offsetWidth

2.3 offsetHeight

元素占据页面的高度，包括元素的 content 、 padding 和 border 的高度，也包括 滚动条 的高度。

// height + padding-top + padding-bottom + border-top + border-bottom + 滚动条的总高度
document.getElementById('app').offsetHeight

2.4 offsetWidth

元素占据页面的宽度，包括元素的 content 、 padding 和 border 的宽度，也包括 滚动条 的宽度。

// width + padding-left + padding-right + border-left + border-right + 滚动条的总宽度
document.getElementById('app').offsetWidth

2.5 scrollHeight

元素的总高度，也称为滚动高度。即当有滚动条时，滚动条从最上面滚到最下面实际走过的距离。看下面的例子可以更好地了解scrollHeight 属性。

<style>
    #zzz {
        width: 100px;
        height: 100px;
        overflow: scroll;
    }

    #app {
        background: pink;
        width: 200px;
        height: 200px;
        border: 20px solid cyan;
        margin: 50px;
        padding: 30px;
    }
</style>


<div id="zzz">
    <div id="app"></div>
</div>

<script>
    document.getElementById('zzz').scrollHeight // 400
</script>

</html>

2.6 scrollWeight

元素的总宽度，也称为滚动宽度。即当有滚动条时，滚动条从最左侧滚到最最右侧实际走过的距离。