前端每日问题 - day1

CSS 

如何使一个div元素一开始处于正常流中，当上下滑动到距离顶部200px时自动固定到距离顶部200px？

使用sticky 定位并给参数  top:200px

为什么要清除浮动？

元素浮动后，周围的元素（没有要求浮动的元素）会重新排列，导致和我们预期的页面结构不一致，这个时候就需要使用clear属性

CSS有几种定位属性，分别有啥作用？

1. Static（静态定位）： 这是默认的定位方式。元素按照它们在文档流中的顺序进行布局。即使你设置了其他定位属性，也不会产生任何特殊效果。

2. Relative（相对定位）： 相对定位使元素相对于其正常位置进行定位。通过设置 top, right, bottom, 和 left 属性，你可以将元素相对于其自身在文档流中的位置进行偏移，但是元素仍然占据其原始空间。

3. Absolute（绝对定位）： 绝对定位使元素脱离文档流，并相对于其最近的非静态定位祖先元素进行定位。如果不存在非静态定位的祖先元素，则相对于初始包含块（通常是 ` 元素）进行定位。通过设置top,right,bottom, 和left` 属性，你可以将元素相对于其定位上下文进行偏移。

4. Fixed（固定定位）： 固定定位使元素相对于视口固定位置进行定位，即使页面滚动也不会改变其位置。通过设置 top, right, bottom, 和 left 属性，你可以确定元素相对于视口的确切位置。

5. Sticky（粘性定位）： 粘性定位是相对新的定位属性，它结合了相对定位和固定定位的特性。元素在跨过指定阈值之前，表现为相对定位，一旦跨过阈值，则表现为固定定位。通过设置 top, right, bottom, 和 left 属性，你可以确定元素相对于其容器的边界框（通常是视口）的位置。这种定位方式特别适用于创建导航栏等在滚动时需要固定在页面某个位置的元素。

React 

为什么每一个react元素都需要key值？

1. 帮助 React 识别列表中的元素： 使用 key 属性可以帮助 React 识别列表中的每个元素。这样 React 就能够在重新渲染列表时识别每个元素，并确定哪些元素是新增的、哪些元素被移除了，以及哪些元素只是被重新排序了。

2. 提高列表更新的性能： 有了 key，React 可以使用更高效的算法来更新列表，而不是重新渲染整个列表。这样可以提高性能，特别是在大型列表中，因为 React 可以根据 key 快速定位到需要更新的元素，而不必遍历整个列表。

3. 帮助开发者理解代码： 在代码中使用 key 属性还可以帮助其他开发者理解你的代码逻辑，特别是当他们阅读你的代码时能够清楚地知道每个元素的唯一标识。

react 响应事项需要传递参数怎么办？

最简单直接的方式：使用箭头函数

handleClick = (param) => { // 处理点击事件 }

render() { return ( <button onClick={() => handleClick(param)}>点击按钮</button> ); }

其他： 使用bind / 闭包