73. 在懒加载场景中，如何判断一个元素在视口内

最新推荐文章于 2024-10-19 21:23:35 发布

伊泽瑞尔灬

最新推荐文章于 2024-10-19 21:23:35 发布

阅读量100

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_30811721/article/details/132486561

版权

浮动（Floating）是 CSS 中的一个布局概念，它可以让元素在父元素内浮动，以实现文字环绕、布局等效果。然而，浮动也可能导致一些布局问题，特别是当没有适当处理时，可能会引起高度塌陷、布局错乱等现象。

浮动的出现：浮动元素的出现通常是为了实现如图片环绕文字、多列布局等需求。通过将一个元素浮动到左侧或右侧，其他内容可以环绕在其周围，从而实现更多的布局灵活性。

清除浮动的原因：浮动元素在布局过程中，可能导致其父元素的高度不再正确地包裹其内部内容，这就是所谓的“高度塌陷”问题。清除浮动的目的是确保父元素能够正确地包裹浮动元素，并避免布局问题。

何时需要清除浮动：清除浮动通常发生在浮动元素的父元素上，以确保父元素正确包裹浮动元素。以下是一些需要清除浮动的常见情况：

如何清除浮动：有多种方式可以清除浮动，其中一种常见的方法是使用“清除浮动”技术，它包括在父元素的末尾添加一个空的块级元素，并应用 clear: both; 或 clear: left; 或 clear: right; 样式来清除浮动。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然而，现代 CSS 布局更常使用 Flexbox 或 Grid 来构建布局，这些布局方式本身能够更好地处理浮动问题。

总之，浮动是一个有用的布局工具，但可能会导致一些问题。在使用浮动时，确保了解浮动元素对布局的影响，同时在必要时适当地清除浮动，以避免布局错乱和高度塌陷问题。

使用 JSON.stringify() 来实现对象深拷贝是一种常见的方法，但需要注意一些问题。下面是使用这种方法时需要考虑的几个问题：

1. 仅适用于 JSON-serializable 数据：JSON.stringify() 方法只能处理 JSON-serializable 数据，即可以被序列化为 JSON 格式的数据。这意味着函数、循环引用等非 JSON-serializable 数据会在深拷贝时丢失或导致错误。

2. 丢失函数和特殊属性：由于 JSON 格式不支持函数、特殊属性和原型链等信息，使用 JSON.stringify() 时，这些信息会丢失。深拷贝后的对象不再具有原对象的方法和属性。

3. 日期对象处理不一致：JSON.stringify() 对于日期对象的处理可能不够一致，不同的环境和实现可能会导致日期对象的处理方式不同。

4. 循环引用问题：如果对象存在循环引用，即对象内部的属性相互引用导致一个闭环，使用 JSON.stringify() 会引发错误。这是因为 JSON 格式无法表示循环引用的数据结构。

5. 性能问题：JSON.stringify() 会序列化整个对象，然后再解析为一个新的对象，这可能会导致性能问题，特别是当对象较大时。

6. 自定义序列化和反序列化问题：如果对象中的属性值具有自定义的序列化和反序列化逻辑，使用 JSON.stringify() 可能无法正确地处理这些逻辑。

7. 原型链丢失：使用 JSON.stringify() 会丢失对象的原型链信息，深拷贝后的对象不再继承原对象的原型。

8. 属性值丢失问题：某些属性值可能无法被 JSON 包含，例如 undefined、Symbol 等。

为了解决上述问题，更稳妥的深拷贝方法可以考虑使用递归或库来实现，例如使用 Lodash 的 _.cloneDeep() 方法，它能够处理循环引用、函数、日期对象等情况，并提供更多的灵活性和可控性。

相对定位（Relative Positioning）、绝对定位（Absolute Positioning）和固定定位（Fixed Positioning）是 CSS 中用于控制元素布局和位置的定位方式。它们在页面布局和设计中扮演着重要的角色。下面是对这三种定位方式的理解：

相对定位（Relative Positioning）：

绝对定位（Absolute Positioning）：

固定定位（Fixed Positioning）：

这三种定位方式在实现页面布局和设计时都有其特定的应用场景。相对定位通常用于微调元素位置，绝对定位用于创建重叠效果或者在元素脱离文档流时布局，固定定位则用于创建悬浮元素或导航栏等需要固定在页面某个位置的效果。理解这些定位方式的工作原理和特点，可以帮助你更好地掌握 CSS 布局和页面设计。

上面问题的答案会在第二天的公众号推文中公布，大家可以关注公众号：程序员每日三问，第一时间获得推送内容。

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题（死磕自己，愉悦大家）希望大家在这浮夸的程序员圈里保持冷静，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。

关注