在日常开发中，我们经常需要在用户浏览页面时进行一些动态操作，比如实现无限滚动加载更多内容、调整布局、或触发动画效果。为了实现这些功能，准确获取整个网页文档的高度是关键的一步。今天，我们就结合一个实际业务场景，来看一下如何用JavaScript获取整个文档的高度。

引言

在前端开发领域，"高度坍塌"通常是指网页布局中由于元素高度计算不准确或响应式设计处理不当导致的视觉效果混乱或内容显示不全的现象。这类问题严重影响用户体验，因此，深入分析高度坍塌的原因并提出有效的解决方案至关重要。本文将从前端开发的角度出发，详细探讨高度坍塌的常见成因，并结合前端技术与最佳实践，提出一套全面的预防与修复策略。

一次分清clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop概念：

clientHeight：可视的，看得见的部分，content+padding；

offsetHeight：在clientHeight基础上，添加“”边框“”，即content+padding+margin；

scrollTop：超过clientHeight“顶部界线”的部分，即看不见的、已经 滚动出去 的部分；

可以使用`ref`和`onMounted`来获取滚动高度。

首先，在模板中给需要获取滚动高度的元素加上`ref`属性，例如：

<template>

<div ref="scrollWrapper" class="scroll-wrapper">

<!-- 内容 -->

</div>

</template>

图片懒加载

前端发展过程中有许多性能优化的操作，比如防抖、节流和图片懒加载等。在这里我们首先聊聊图片懒加载操作。

在最近的618中，我们会经常逛像淘宝和京东等购物平台。那你觉得在淘宝页面中的图片资源是打开页面时就一次性全部加载完了呢，还是在你滚轮滚动到的区域才加载图片呢。

一次性全部加载会导致加载时间长、网络资源消耗大、内存占用率高和发出大量图片请求给服务器带来的巨大压力。

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

文档坐标和视口坐标：

元素的位置是以像素来度量的，向右代表x坐标的增加，向下代表y坐标的增加；但是，有两个不同的点作为坐标系的原点：元素的x和y坐标可以相对于文档的左上角或者相对于视口的左上角，也就是对于一个元素来说，会有两种坐标：文档坐标和视口坐标；视口坐标也被称为窗口坐标；

在CSS中，height: 100vh; 是一个用于设置元素高度的属性值。这里，vh 是一个相对单位，它代表“视口高度”（Viewport Height）的百分比。具体来说，1vh 等于视口高度的 1%。

当你为一个元素设置 height: 100vh; 时，你实际上是在告诉浏览器，你希望这个元素的高度占据整个视口（通常是浏览器窗口或包含它的框架）的高度。

以下是一个设置了100vh的例子，看到登录注册离顶部到该100高度

最近，我的大学同学和他的几个前同事在筹备开公司，准备合伙创业了，要我帮他们做一个网站，我选择了Django这个框架来开发，因为相对其他的框架我对它更熟悉，Django也是一款快速开发网站的优秀框架，Pinterest、纽约时报等不少知名网站也都使用了Django框架。

在使用Django进行Web开发时，上传和显示图片是一个非常常见的需求。然而，有时我们可能会遇到图片上传成功后无法在前端正确显示的问题。以下是一个我实际遇到的解决案例，我将通过这个案例来介绍如何正确地在Django中处理上传图片的显示问题。

您好，我是“前端就业加油站”的面试官。请问，在网页开发中，有哪些方法可以加载CSS呢？在网页开发中，可以通过以下四种方式加载CSS：

·1.在标签内部添加内部样式：例如，在下面这个div标签中，使用红色字体：div style="color：red">红色字体：</div>。

·2.通过内嵌样式，即在head头部标签之间添加<style>...</style>。

考虑对人的描述方式

人 {
   身高:175cm;   
    体重:70kg;   
    肤色:黄色
}

CSS基本语法结构