-
元素宽高异常很可能是position:absolute导致脱离文档流；需检查是否设置了absolute及最近定位祖先，通过开发者工具验证布局，修复时应显式设置宽高或调整定位上下文。
-
防止XSS的关键是正确处理用户输入输出。应对用户输入进行白名单验证并限制格式，前端后端均需验证；在插入HTML时对动态内容进行HTML编码，转义特殊字符如<为<。
-
rgba透明度叠加变灰是因底层颜色参与上层alpha混合，属CSS合成正常行为；推荐用伪元素单层rgba、backdrop-filter隔离或color-mix适配深色模式。
-
代码分割是将JavaScript打包成多个小文件的技术，通过Webpack等工具实现按需加载；结合动态导入import()语法可延迟非关键资源加载，显著减小首屏体积、提升性能，但需避免过度分割导致请求过多，应合理划分模块并利用预加载优化体验。
-
JavaScript路由切换核心是不刷新页面改变URL并更新视图，依赖HistoryAPI（pushState/replaceState）和popstate事件监听，或Hash模式的hashchange事件，本质是路径字符串到渲染逻辑的映射。
-
hsla()是CSS中基于色相、饱和度、明度和透明度定义颜色的函数，参数依次为0–360的色相角度、0%–100%的饱和度、0%–100%的明度及0–1的透明度小数，比rgba()更便于调整颜色变体。
-
使用window.location.href获取完整URL；2.通过location对象的protocol、host、pathname等属性解析URL各部分；3.利用URLSearchParams解析查询参数；4.结合URLAPI修改参数并更新地址栏。
-
repeat()函数可简洁定义多列布局，如repeat(4,1fr)替代冗长的1fr1fr1fr1fr；支持与固定尺寸组合如200pxrepeat(3,1fr)80px；配合auto-fit/auto-fill实现响应式列数调整；仅接受正整数、auto-fit或auto-fill，不支持嵌套或小数。
-
JavaScript异步编程是单线程事件循环环境下的刚性需求；fetch默认不阻塞主线程因浏览器禁用同步网络请求，且必须用.then()或await消费Promise；fs.readFileSync会阻塞Node.js主线程，降低并发吞吐量，应改用fs.promises.readFile等异步方案。
-
使用CSSModule可避免样式冲突并保持组件样式独立，通过命名转换机制将类名局部作用域化。在React中，只需将文件命名为[name].module.css（如Button.module.css），导入后得到类名映射对象，确保样式仅作用于当前组件。全局样式仍可通过普通.css文件引入，而模块化样式需按对象方式访问。支持动态类名拼接与条件渲染，推荐结合clsx等库处理复杂逻辑。可在.module.css中使用:global定义全局样式或通过composes复用其他类，实现灵活的样机组装。命名规范清晰时，C
-
响应式CSS应避免深层嵌套选择器，优先使用单类选择器和BEM修饰符（如--down-sm），禁用display:none切换动态内容，媒体查询不依赖父容器尺寸，统一用px单位。
-
使用CSS的transition、transform和媒体查询创建响应式按钮动画，提升跨设备用户体验。首先定义基础样式并添加悬停上浮效果：.button设置内边距、颜色、圆角及transition过渡效果，:hover状态改变背景色、位置和阴影。针对移动端优化，在@media(max-width:768px)中增大字体与间距，利用:active配合scale缩放模拟按下反馈。在弹性布局中采用flex或grid确保定位稳定，通过will-change:transform提升渲染性能，避免使用margin或p
-
使用Flexbox可通过flex-wrap和flex属性实现卡片的自适应换行布局；2.使用Grid的repeat(auto-fit,minmax())能更简洁地创建响应式二维网格；3.推荐优先使用Grid，配合媒体查询优化多屏显示效果。
-
HTML5原生<inputtype="range">仅支持单滑块，双滑块需用两个range控件+JS互锁逻辑实现；其核心是实时校验left≤right、监听input事件、统一step、避免循环触发，并注意各浏览器伪元素兼容性差异。
-
JavaScript属性的枚举性（[[Enumerable]]）控制其是否在for...in、Object.keys()等遍历中出现：true时可见，false时“隐身”但依然存在；普通添加默认true，Object.defineProperty默认false。
