-
动画卡顿常因transition-timing-function选错：ease开头加速猛、结尾减速急，建议小位移用ease-out或cubic-bezier(0.34,1.56,0.64,1)；需确保transition-property和duration同时声明，避免JS内联样式覆盖CSS规则。
-
background-size:cover未生效主因是父容器高度为0；需设min-height:100vh、避免套用限制宽度的.container，并确保元素真正占满视口。
-
下划线需用独立元素（如span）置于导航容器内并绝对定位，通过JS监听mouseenter/mouseleave及touchstart/focus事件，结合getBoundingClientRect计算位置，配合transform和width的transition实现平滑跟随。
-
首屏渲染优化的核心是缩短关键渲染路径，即理清资源依赖、减少阻塞、优先交付关键内容，通过精简关键资源、控制JS执行时机、优化HTML结构及服务端协同实现系统性提速。
-
@use不能直接替代@import因为它默认启用严格命名空间隔离，所有成员必须显式通过命名空间调用，如colors.$primary；而@import是全局合并，易冲突难溯源。
-
使用min-width和max-width可设置容器宽度范围，.sidebar{min-width:200px;}防止过小，.content{max-width:800px;margin:0auto;}限制过宽，结合width:100%实现响应式弹性布局，适配多设备显示效果。
-
Set是JavaScript中用于存储唯一值的集合，可高效实现数组去重。通过展开运算符[...newSet(arr)]能简洁去除原始类型重复元素；处理对象数组时，结合filter与Set记录唯一键（如id），实现O(n)时间复杂度的去重；相比传统方法，Set语法更简洁、性能更优，且无需第三方库。实战中可封装通用函数distinct(arr,key)，兼顾简单数组和对象数组去重，提升代码复用性与可维护性。
-
0fr是合法且更优的隐藏列方式，因其语义清晰、保留轨道结构、兼容动画和响应式切换；但需配套min-width:0、overflow:hidden及子元素宽度约束才能真正生效。
-
Flex布局中order属性未生效是因为父容器未设置display:flex或inline-flex；order仅对flex子项有效，且受float、absolute等属性影响而失效。
-
flex-flow是flex-direction和flex-wrap的原子性简写，设了它两个属性都会被全量重置而非可选覆盖；必须写全如columnwrap，不可省略任一值，否则未显式指定的会回退到默认值（row/nowrap）。
-
is()伪类怎么写才不会被忽略浏览器对:is()的支持从Chrome88、Firefox90、Safari15.4开始稳定，但旧版本会直接丢弃整条规则（不是忽略伪类，而是整个选择器失效）。如果你的项目还要兼容Safari15.3或更早，:is()不能单独用——它会让整条CSS规则被跳过。常见错误现象：button:is(:hover,:focus-visible){outline:2pxsolidblue;}在Safari15.3下完全不生效，且控制台
-
应使用data-category存储分类标识，用querySelectorAll("[data-category='laptop']")精准筛选；显隐控制采用.hidden类配合toggle；多选时用activeCategories.includes(element.dataset.category)判断；重置筛选只需移除.hidden类，避免重绘DOM。
-
HTML的translate属性非必需，默认即translate="yes"；仅当需阻止翻译专有名词、代码、版本号等固定内容时才用translate="no"；translate="yes"显式声明冗余，lang与translate职责不同，不可互换。
-
clear属性清除的是当前元素外边距行为，强制其上边界避开前面浮动元素的下边界；它不消除浮动本身，也不修复父容器塌陷，需配合BFC触发（如display:flow-root）才能治本。
-
input::placeholder不生效主因是浏览器兼容性（Safari15.4+才稳定支持::placeholder，旧版需加前缀）和CSS优先级冲突；深色主题下宜用color:#999+opacity:0.7；Tailwind需用dark:placeholder:text-gray-500，styled-components应避免模板字符串内写::placeholder。
