-
实现响应式设计的核心是利用媒体查询、弹性布局和相对单位，根据屏幕尺寸动态调整页面结构与样式；使用@media针对不同视口设置CSS规则，如手机（max-width:768px）和桌面（min-width:769px）断点适配。
-
最快方式是直接在<img>标签用opacity，但会整体透明；rgba()不适用于<img>；PNG自身alpha不可调；Canvas可逐像素控透明但失原生特性；SVG<image>支持opacity动画但有CORS和缩放限制。
-
父容器高度塌陷是因浮动元素脱离文档流所致，clearfix伪元素通过content:"";display:table;clear:both;height:0;可安全修复，且比overflow:hidden更可靠，避免裁剪溢出内容。
-
当使用text-indent:-20px配合margin-left:20px实现悬挂缩进时，若前有左浮动元素（如广告栏），文本可能异常覆盖其上；根本解法是通过clear:both强制段落从浮动元素下方开始流式布局。
-
侧滑删除菜单用transform而不用left或margin，因其触发硬件加速、避免重排卡顿；需配合will-change、overflow:hidden、精准贝塞尔过渡及touchmove实时计算位移，并处理框架响应式冲突与iOS/安卓兼容性问题。
-
移动端overflow-y:scroll无惯性滚动是因为iOSSafari仅对body或根容器启用原生惯性，普通元素需加-webkit-overflow-scrolling:touch（iOS必需，Android无效）并设置明确高度才生效。
-
合理使用CSStransition与background-color可实现按钮悬停、状态提示等平滑颜色过渡，提升界面流畅度与用户体验。
-
Lighthouse自定义指标是通过UserTimingAPI在页面中插入以user-开头的mark和measure，用于监控特定业务逻辑耗时。开发者可在性能报告中查看这些指标，结合CI/CD实现持续性能追踪，确保关键路径性能可控可优化。
-
JavaScript中应统一用字符串传输数据库ID，后端序列化为字符串，前端按需转BigInt运算，避免Number精度丢失，兼容性不足时降级为字符串处理。
-
可使用float属性实现HTML元素左右浮动布局，配合clear清除影响、伪元素解决父容器塌陷，或用flexbox、CSSGrid等现代方案替代。
-
使用CSS框架如Animate.css和Tailwind可快速实现按钮动画。通过引入Animate.css并结合hover触发脉冲效果，或在Tailwind中利用transition、transform类实现悬停缩放与变色。在React中配合CSSModules，可通过状态控制点击时的抖动动画，关键在于交互状态与动画类的结合，合理运用transition、transform和keyframes提升按钮响应性与视觉体验。
-
路由懒加载本身不直接实现组件降级渲染，但为按需加载、条件加载和动态替换提供基础；组件降级需结合性能检测、异步组件机制与备选方案协同完成。
-
用input.value获取控件当前值（含用户输入），而非getAttribute('value')；多选下拉框需遍历options或用selectedOptions；checkbox/radio用checked判断状态，value恒为初始值；校验需调用checkValidity()并检查validity对象。
-
:focus状态下outline不消失是因浏览器UA样式优先级高或:focus-visible策略干扰；应避免直接outline:none损害可访问性，改用outline:2pxsolidtransparent或自定义样式，并补充-webkit-appearance:none等兼容写法。
-
真视差需JS监听scroll+requestAnimationFrame节流，用getBoundingClientRect计算元素视口位置，再以transform:translateY动态控制各层位移强度，禁用top/margin避免重排。
