-
fixed底部菜单常因忽略安全区域而被遮挡，需用padding-bottom:env(safe-area-inset-bottom,0px)留出空间，并配合z-index和层叠上下文排查确保显示正常。
-
rel="preload"用于高优先级预加载关键资源，需指定as属性和crossorigin（字体必需），仅限阻塞关键路径的资源；搭配font-display:optional可避免FOIT/FOUT，JS模块需配合import或type="module"使用。
-
W3C验证器仅检查HTML语法规范性，不保障语义、可访问性或JS运行效果；应使用https://validator.w3.org/nu/验证构建后的dist/index.html，区分真错误（如缺alt）与框架指令等误报，且无法发现DOM动态问题、ARIA拼写错误等。
-
答案：:not()伪类可排除特定元素实现精准样式控制。通过:not(选择器)语法，如p:not(.highlight)或input:not([disabled])，能为不匹配条件的元素应用样式，常用于跳过特殊类、状态或结构的元素，结合属性与结构选择器可实现高级过滤，但需注意仅支持单个简单参数、不兼容旧版IE且不可选伪元素，现代浏览器广泛支持，合理使用可提升代码简洁性与维护性。
-
不加async或defer的script标签会阻塞HTML解析：浏览器遇到时立即暂停解析，下载并执行脚本后才继续，导致白屏和DOM访问失败；内联与外链脚本均如此，且按文档顺序串行执行。
-
currentColor方案最轻量兼容性好，但仅适用于内联SVG；因img引入的SVG处于隔离上下文，无法继承父级color值，故必须内联或改用CSS变量等替代方案。
-
animation-delay是实现stagger效果最轻量方式，需配合:nth-child或CSS变量动态设置不同延迟，不可全局统一；transition-delay不适用复杂序列动画，且无法与@keyframes配合。
-
本文详解React列表渲染中因误用数组索引（index）作为key所致的删除异常问题——点击任意行“删除”按钮却总是删掉最后一项，并提供基于唯一ID的健壮修复方案。
-
聊天气泡布局核心是用margin-left:auto和margin-right:auto控制左右对齐，禁用float和absolute；尾巴用双层伪元素三角实现；长文本需max-width:80%并按语言设置换行；滚动需nextTick确保DOM渲染完成。
-
纯CSS实现hamburger→×动画的关键是用伪元素构建三线结构并协同transform：中间线opacity:0，上下线分别rotate(45deg)/rotate(-45deg)加translate交汇成×；需统一用transform控制偏移以避免原点漂移，同时排查pointer-events和z-index导致的点击失效。
-
函数柯里化是将多参数函数转换为单参数函数链，如curriedAdd(1)(2)(3)；偏应用是固定部分参数生成新函数，如partial(multiply,2)(3,4)。两者均提升复用性，但柯里化强调逐步求值，偏应用侧重预设参数。
-
最稳妥的文字大小设置方式是用rem单位，需配合根元素font-size和viewportmeta标签；px适合像素级微调但不适用于正文；em和%易因嵌套失控，应慎用。
-
column-fill:balance仅在父容器设置height或max-height时生效，否则退为auto模式；Safari对多列balance支持较保守，需固定内容与高度测试；column-width优先于column-count，临界宽度易致列数跳变。
-
浮动导航栏应使用position:fixed而非float，因float本用于图文环绕，无法实现视口固定悬浮，会导致滚动消失、父容器塌陷、定位失效；fixed定位配合top/left、z-index和bodypadding-top才是正确解法，并需针对移动端缩放、软键盘、横竖屏等边界场景做适配。
-
rgba()不解析CSS变量，因var(--color)返回字符串而非数值参数，导致声明失效；须拆分RGB为独立变量或逗号分隔字符串，再组合使用。
