-
优先使用原生loading属性实现图片懒加载，现代浏览器中只需添加loading="lazy"即可；对于旧浏览器则降级采用IntersectionObserverAPI监听视口，避免频繁scroll事件导致的性能问题；通过预加载、低质量占位图和CSS过渡优化视觉体验，减少空白感；将懒加载逻辑封装为模块化组件，支持按需引入与配置扩展，兼顾兼容性、性能与用户体验，形成完整的懒加载解决方案。
-
HTML表单本身不支持分页，必须靠后端或JavaScript控制HTML只是数据容器和提交通道，没有内置分页逻辑。所谓“表单分页”，实际是把一个长表单拆成多步，每次只展示部分字段，用户点击“下一步”才加载/显示下一部分——这本质是UI状态管理，不是HTML自带能力。常见错误现象：TypeError:Cannotreadproperty'next'ofundefined（JS分页逻辑没初始化好）、表单提交后只拿到最后一步的数据（没合并各步input值）、回退时输入内容
-
flex-direction:column不能实现瀑布流，因其子项垂直堆叠、无法回填空白，且flex-wrap在column下无效；纯CSS瀑布流唯一可靠方案是columns属性。
-
掌握JavaScript需循序渐进：1.夯实基础语法，包括变量、函数、DOM操作；2.深入执行上下文、闭包、原型链等运行机制；3.熟练ES6+语法与模块化；4.学习主流框架与工程化工具；5.攻克设计模式、源码实现与性能优化，结合实战持续提升。
-
本文详解background-image动态修改导致CSStransition失效的根本原因，并提供无需@keyframes的纯CSS+JS清洁方案，确保按钮在状态切换（如播放/暂停）时，背景色与旋转动画均能平滑过渡。
-
根本原因是transform、opacity等属性触发合成并创建新层叠上下文，使子元素z-index仅在内部生效；修复方式是给父容器添加transform:translateZ(0)或will-change:transform以创建更高阶层叠上下文。
-
text-stroke无效果因非标准属性，须用-webkit-text-stroke（Chrome/Safari/新版Edge支持，Firefox完全不支持）；需配合-webkit-text-fill-color:transparent显形，宽度只认px等绝对单位，多色依赖CSS变量或JS动态设置；text-shadow可模拟多色描边但性能开销大。
-
用display:flex实现响应式导航栏核心是断点控制与可访问性保留：主容器设flex，子项用flex:11auto并加min-width:0；移动端用aria-controls和role="menu"配合JS焦点管理，避免display:none或transform隐藏。
-
注入数据找不到来源的根本原因是provide未在inject组件的同步祖先链中正确执行。需检查provide是否被条件逻辑跳过、是否在异步钩子中调用、组件是否被Teleport或高阶封装断开继承链、key是否大小写/符号一致、Symbol是否共享，以及inject是否在setup中正确调用并确保响应性。
-
BEM是最值得坚持的CSS命名规范，因其三段式结构（block__element--modifier）天然隔离作用域、避免样式污染、命名即含义，且易于理解、复用和维护。
-
animation-direction支持哪些取值？animation-direction控制单次循环内关键帧的执行顺序，不是“让整个动画倒着播”，而是决定每一遍循环里@keyframes是正向走还是反向走。它有四个合法值：normal、reverse、alternate、alternate-reverse。其中normal是默认值，容易被忽略——如果你没显式设置，动画永远从0%走到100%。reverse：每遍都从100%倒着走到0%，视觉上像“倒放”，但时间轴仍是正向推
-
HTML文件上传唯一合法方式是<inputtype="file">，不支持直接赋值或JS模拟点击；须用label包裹或透明覆盖实现自定义样式；多文件用multiple属性；必须通过FormData提交，不可直接fetch二进制；注意兼容性与进度处理。
-
根本原因是translateY位移与box-shadow变化未同步匹配视觉权重；需同时调整translateY(-4px)和box-shadow:04px12pxrgba(0,0,0,0.16)，并统一transition、避免margin模拟、合理控制阴影参数与性能优化。
-
用<spanclass="badge-essence">精华</span>嵌入帖子最外层容器，父容器设position:relative，角标用position:absolute、top:8px、right:8px、z-index:10，并通过prefers-color-scheme适配深色模式。
-
flex-grow是剩余空间的分配比例而非百分比，数值表示相对份额比；需配合flex-basis控制基础尺寸，IE11仅支持整数，且不解决内容溢出问题。
