视口是什么
视口的分类
- 窗口视口
- 元素视口
尺寸的分类
- 视口尺寸
- 文档尺寸
- 文档滚动条的尺寸
查询窗口视口尺寸
window.innerWidth | window.innerHeight
定义：
用于查询视口的宽度和高度
语法：
window.innerWidth
window.innerHeight
返回值：
返回一个不带单位的数字，表示视口的像素尺寸
示例：
document.onclick = function(){
console.log(window.innerWidth,window.innerHeight);
}
根元素.clientWidth | 根元素.clientHeight
定义：
document.documentElement.clientHeight：
document.documentElement.clientWidth：
当我们把clientHeight应用在<html>根元素上的时候，它查询的是浏览器窗口的视口的高度。
当我们把clientWidth应用在<html>根元素上的时候，它查询的是浏览器窗口的视口的宽度。
语法：
document.documentElement.clientHeight
document.documentElement.clientWidth
返回值：
示例：
document.onclick = function(){
console.log(window.innerWidth,window.innerHeight);
}
查询元素视口的尺寸
元素.clientHeight | 元素.clientHeight
定义：
只读属性。用于查询元素视口的宽度和高度
元素视口：元素视口指
语法：
元素.clientHeight
元素.clientHeight
返回值：
返回一个不带单位的数字，表示视口的像素尺寸
示例
const div = document.querySelector('div')
document.onclick = function(){
console.log(div.clientWidth,div.clientWidth);
}
元素的构成
| 定义 | 查询方式 | ||
|---|---|---|---|
| 元素宽高 | 不含margin的边框盒尺寸 | 元素.offsetWidth , 元素offsetHeight | offset欧负塞特 |
| 元素视口宽高 | width + padding - 滚动条（内容的可视部分） | 元素.clientWidth ， 元素.clientHeight | client可来英 |
| 特 | |||
| 元素内容尺寸 | width + padding - 滚动条（视口尺寸+不可视部分的尺寸） | 元素.scrollWidth ， 元素.scrollHeight | scroll死酷弱 |
| 元素内容滚动条距离 | 元素.scrollTop ， 元素.scrollLeft | ||
| 视口尺寸 | |||
| 文档尺寸 | |||
| 文档滚动条距离 |
尺寸：宽 / 高
