前端技术文章
-
- 优化CLS提升页面视觉稳定性方法解析
- CLS值是所有布局偏移分数（影响分数×距离分数）的累积和，目标≤0.1；影响分数为不稳定元素在视口中的可见区域占比，距离分数为其最大位移占视口最大尺寸的比例。
- 文章 · 前端 | 1个月前 | 216浏览 收藏
-
- CSS实现Bootstrap按钮禁用样式：disabled伪类应用
- button[disabled]仅匹配HTML中显式声明的disabled属性，不响应JS动态设置；:disabled伪类覆盖所有禁用方式（HTML、JS赋值、setAttribute），且仅作用于原生可禁用元素。
- 文章 · 前端 | 1个月前 | 251浏览 收藏
-
- JavaScript中this指向怎么确定？常见场景有哪些
- JavaScript中this指向取决于调用方式而非定义方式：谁调用函数，this就指向谁（箭头函数除外，它继承外层this）。
- 文章 · 前端 | 1个月前 | 414浏览 收藏
-
- HTML CSS fit-content自适应宽度详解
- width:fit-content能用但受限于display类型、父容器布局和浏览器版本；Grid中需写为minmax(0,fit-content())，Flex中须设flex:00fit-content才生效。
- 文章 · 前端 | 1个月前 | 487浏览 收藏
-
-
HTML实现滚动触发渐入动画，通常需要结合HTML、CSS和JavaScript来完成。下面是一个简单但有效的实现方式：✅ 实现思路使用CSS定义动画样式（如 opacity 和 transform）。通过JavaScript检测滚动事件，判断元素是否进入视口。当元素进入视口时，添加一个类，触发动画。📝 示例代码1. HTML 结构
- IntersectionObserver实现滚动渐入动画的核心是用其判断元素是否进入视口，而非监听scroll事件；需设threshold、及时unobserve/disconnect、用CSSclass控制过渡、标记状态防重复触发，并在React中正确使用useRef和useEffect管理实例与清理。
- 文章 · 前端 | 1个月前 | 255浏览 收藏
- CSP report-uri违规报告收集详解
- report-uri已废弃，必须改用report-to配合Report-To响应头；前端CSP中需写report-togroup-name，服务端须返回合法JSON格式的Report-To头，且URL必须HTTPS、group名严格匹配。
- 文章 · 前端 | 1个月前 | 436浏览 收藏
- 用JavaScript打造简易游戏引擎教程
- 构建一个简单的游戏引擎不需要复杂的框架，用原生JavaScript就能实现核心功能。重点是封装好游戏循环、对象管理、渲染和输入处理。下面是一个轻量级但可扩展的游戏引擎实现思路。游戏循环与时间控制游戏的核心是持续运行的主循环，负责更新逻辑和渲染画面。使用requestAnimationFrame可保证流畅运行。记录上一帧的时间戳，计算每帧间隔（deltaTime），用于平滑移动在循环中依次执行：清屏→更新→渲染避免固定延迟，用时间差控制速度，让游戏在不同设备表现一致示例代码：functiong
- 文章 · 前端 | 1个月前 | 253浏览 收藏
- Flex 布局内容溢出解决方法
- flex容器内容横向溢出不换行，需显式设置flex-wrap:wrap，并合理配置子项的min-width、flex-basis与flex-shrink，避免min-width过大或flex-shrink:0导致换行失效。
- 文章 · 前端 | 1个月前 | 147浏览 收藏
-
HTML实现滚动触发渐入动画，通常需要结合HTML、CSS和JavaScript来完成。下面是一个简单但有效的实现方式：✅ 实现思路使用CSS定义动画样式（如 opacity 和 transform）。通过JavaScript检测滚动事件，判断元素是否进入视口。当元素进入视口时，添加一个类，触发动画。📝 示例代码1. HTML 结构
