网页标签的各种高度

测试界面代码在文末

关于标签高度属性介绍
以height进行记录 (width计算方式默认相同，若width计算方式不同会单独列出。)

属性	介绍
clientHeight	可见区域高度 content + padding - 内部scroll高度(chrome下scroll测试为17px)
scrollHeight	包括被隐藏内容的所有展示区域高度 （无论是否含有滚动条overflow:scroll/hidden）
scrollTop/Left	（纵向/横向）滚动条滚动的高度 含有DTD时最外部滚动条使用html高度document.documentElement 不含DTD时最外部滚动条使用body高度document.body
offsetHeight	标签的像素高度。 简单来说就是含border以内的高度。
offsetTop/Left	返回离上层最近元素（被定位父元素或table、td、th、body元素）的Top/Left距离。 从子元素border线至目标元素border线高度。

关于载体(浏览器)高度window.xxx属性介绍

属性	介绍
screen.availHeight	屏幕可用工作区高度（不含任务栏等高度）
screen.height	屏幕分辨率高度
screenTop/Left	载体距可用工作区的 Top/Left 距离

关于鼠标事件触发时鼠标坐标event.xxx属性介绍

属性	介绍
clientX/Y	相对于body可视区域的 x / y 坐标
pageX/Y	包含body被隐藏区域的 x / y 坐标
screenX/Y 或 x/y	距离电脑屏幕的 x / y 坐标
offsetX/Y	相对于被定为父元素的 x / y 坐标

测试界面代码

<style>
.container {
    text-align: center;
    border: 10px solid;
    padding: 8px;
    margin: 9px;
}
.height-test{
    height: 100px;
    width: 120px;
    background-color: aqua;
    display: inline-block;
    margin: 10px;
    border: 8px solid;
    padding: 5px;
    overflow: scroll;
    /*box-sizing: border-box;*/
}
.height{
    display: inline-block;
    background-color: yellow;
    height: 17px;
    width: 100px;
    transform: translateY(-18px);
}
.longWidth {
    display: inline-block;
    text-align: left;
    width : 500px;
    white-space: nowrap;
}
.longHeight {
    display: inline-block;
    height: 200px;
    width: 100%;
}
.height-test .title {
    display: inline-block;
    width: 100%;
}
</style>
<div class="container">
    <div class="height-test">
        <div class="longHeight">
            <div class="title">测试元素</div>
            <div class="longWidth">(加宽+++++++++++++++++++++++++++++++)</div>
        </div>
    </div>
    <div class="height"></div>
</div>
<script>
window.div = documtne.querySelector('.height-test')
console.log(div.clientHeight,div.clientWidth)	//93 113
</script>

（学习测试笔记，所有高度均在chrome下测试，仅供参考，有错误请指出）