7.1尺寸与适配系列——获取屏幕、浏览器及页面的宽度和高度、鼠标点击位置本人已参与新人「创作礼活动」，一起开启掘金创作之

本人已参与新人「创作礼活动」，一起开启掘金创作之路。

一、介绍

容器分为三大类：屏幕、浏览器、页面

三者之间的关系：HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内

容器的尺寸是指当前分辨率下的高度、宽度，而不是物理高度、宽度；如：一个22寸的显示器，屏幕分辨率为1366 * 768，那么获取到的屏幕高度为1366px，宽度为768px。

二、屏幕 screen

creen.width / screen.height： 屏幕宽度 / 高度。
screen.availWidth / screen.availHeight： 屏幕可用宽度 / 高度，即屏幕宽/高减去上下任务栏后的宽/高，可表示为软件最大化时的宽/高。
任务栏宽度 / 高度： 可通过屏幕宽/高减去屏幕可用宽/高得出。即：任务栏宽度 = screen.width - screen.availWidth 任务栏高度 = screen.height - screen.availHeight 。

三、浏览器 window

window.outerWidth / window.outerHeight ： 浏览器宽度 / 高度。
window.innerWidth / window.innerHeight ： 浏览器内页面可用宽度 / 高度；此宽高包含了垂直/水平滚动条的宽/高(若存在)。
工具栏高/宽度： 包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。

三、页面 body = document.documentElement || document.body 或某个元素

3.1 自身相关尺寸

body.offsetWidth / body.offsetHeight ： body总宽度 / 高度。content + padding + border + 滚动条
scrollWidth / scrollHeight ： 元素内容的总宽度 / 高度，content + padding 此时的 content 指的是在不使用滚动条的情况下为适应视口中所用内容所需的最小宽度/高度，不包含border、margin
scrollLeft / scrollTop ： 元素左边 / 上边已经被滚动出去的(卷起来的)尺寸
clientLeft / clientTop ： 元素的左边框 / 上边框的宽度，border-left / border-top
clientWidth / clientHeight ： body展示的宽度 / 高度；表示body在浏览器内显示的区域宽高，content + padding，不包含border、margin、滚动条；
滚动条高度/宽度： 如高度，可通过浏览器内页面可用高度 - body展示高度得出，即window.innerHeight(**注意此处是谁**) - body.clientHeight (条件是全屏时)

3.2 身外相关尺寸

offsetLeft / offsetTop ： 元素左上角相对于offsetParent（带有定位的父元素）内边距padding的左边界/上边界的偏移像素值;
left / top ： 具有定位的元素相对于包含块边框border的左边界/上边界的偏移量，带'px';

3.3 各尺寸特点

只读尺寸： offsetWidth / offsetHeigh、scrollWidth / scrollHeight、clientLeft / clientTop、clientWidth / clientHeight、offsetLeft / offsetTop
可写尺寸： 具有滚动或定位操作的、style相关的，scrollTeft / scrollTop、left / top、margin、border、padding
带单位： style相关的都须带单位px，left / top、margin、border、padding
值特点： 只有style相关的有百分比，其余的尺寸均转为具体数值

四、MouseEvent(鼠标事件)属性

clientX / clientY ： 点击位置距离当前body可视区域的x，y坐标
pageX / pageY ： 对于整个页面来说，包括了被卷去的body部分的长度
screenX / screenY ： 点击位置距离当前电脑屏幕的x，y坐标
offsetX / offsetY ： 鼠标相对于事件源元素的x,y坐标 content+padding，不包括border、padding
x / y ： 和clientX、clientY一样

1. 点击在父元素上

2. 点击在子元素上

3. 页面滚动前后对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局</title>
    <style>
        * { padding: 0; margin: 0; }
        .parent { width: 200px; height: 800px;  border: 10px dashed gold; padding: 10px; margin: 10px; }
        .child { height: 100px; border: 10px dashed green; padding: 10px; margin: 10px; color: red; }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">child</div>
    </div>
    <script>
        const Parent = document.querySelector('.parent');
        Parent.onclick = function(e) {
            console.log('clientX', e.clientX, e.clientY)
            console.log('pageX', e.pageX, e.pageY)
            console.log('screenX', e.screenX, e.screenY)
            console.log('offsetX', e.offsetX, e.offsetY)
            console.log('x', e.x, e.y)
        }
    </script>
</body>
</html>

7.1尺寸与适配系列——获取屏幕、浏览器及页面的宽度和高度、鼠标点击位置