你真的了解前端里的各种高度吗？

这篇文章起笔于2023年7月4日，今天下班后闲来无事就读起了一个库的源码。可能大家会认为我比较卷，其实这个得看跟谁比。在阅读的过程中，我发现了一个不认识的一个属性screen.availHeight。随后在学习的过程中就有了一个想法，前端里有很多跟高度相关的属性，何不整理成一个文档，方便以后查阅。

注意：

下面所说的 `默认情况` 都是指 不在 浏览器里去点击 `切换设备的按钮`。
下面所说的 `非默认情况` 都是指 在 浏览器里点击 `切换设备的按钮`。

一、屏幕高度

属性	说明
screen.height	获取屏幕的高度
screen.availHeight	获取屏幕的可用高度，并不包括分配给半永久特性的垂直空间

是不是没看懂，哈哈哈，一开始我也没看懂，后来经过一番操作后终于弄懂了。

1.1、这2个属性跟分辨率有什么关系？

默认情况下，以下等式成立：

screen.height == 设备分辨率的高 / 设备像素比（即 window.devicePixelRatio）。

那什么是非默认情况呢？

就是你在浏览器里更改了设备形态（操作如下图）：

只要你点了那个切换形态的按钮，那么此时的 设备像素比、screen.height、screen.availHeight 都会发生改变。而此时的 screen.height 和 screen.availHeight 就会变成 切换后的分辨率的宽度和高度。

1.2、浏览器缩小，会影响这2个属性吗？

无论哪种情况，答案是不会的，也就是各自的等式都是成立的。

1.3、进入全屏模式，会影响到这2个属性吗？

无论哪种情况，答案是不会的，也就是各自的等式都是成立的。

二、浏览器的高度

属性	说明
window.outerHeight	获取浏览器的全部高度
window.innerHeight	获取浏览器里的html文档的高度

2.1、默认情况下的表现

如下等式成立：

window.outHeight = 标签页的高度 + 地址栏的高度 + html文档的高度。

2.2、非默认情况下的表现

window.outHeight == window.innerHeight == 切换后的分辨率的高。

2.3、缩小浏览器后，会影响到这2个属性吗？

无论是那种情况下，都不会影响。各自的等式都成立。

三、元素的高度

属性	说明
element.offsetHeight	元素内容 + 内边距 + 边框
element.clientHeight	元素内容 + 内边距
element.getBoundingClientRect().height	元素内容 + 内边距 + 边框
father.scrollHeight	children.height >= father.height ? children.height : father.height

最后

我们这里只分析了相应的高度，但是相应的宽度的表现形式跟高度完全一样。经过上面的分析，相信大家对各种高度都有了一个大致的掌握，如果你觉得这篇文章有帮助到你，欢迎点赞关注一哈，如果上面的内容出现了错误，也请在评论区里指正一下，那么我们下期再见啦~~。