-
grid-template-rows设为1fr不能使卡片等高，因其仅定义网格轨道高度，而卡片实际高度由内容撑开；需配合grid-auto-rows:1fr与子项min-height:0才能实现真正等高。
-
用<canvas>实现水印预览与导出最可靠，需显式设置宽高、适配devicePixelRatio、动态计算示意框坐标，并在导出前将水印合成到底层canvas中。
-
内联样式优先级最高因其特异性固定为1000且不参与来源顺序竞争，优先级排序为style属性＞＜style＞标签＞外部CSS；但可用!important在外样中反超，代价是降低可维护性与性能。
-
XML解析慢的根源是移动端DOMParser的同步阻塞实现，而非XML本身；应优先用字符串解析、DocumentFragment批量插入、xhr.responseType='document'，或直接改用JSON。
-
styled-components的样式注入不发生在每次渲染，而是在组件挂载或主题变更时检查并按需插入；动态插值绑定React渲染周期，导致运行时计算开销显著高于构建时处理的CSSModules。
-
答案：JavaScript与ARIA结合可提升Web无障碍访问。通过动态更新aria-expanded、aria-hidden等属性，配合focus管理与键盘导航，确保模态框、下拉菜单等组件对屏幕阅读器可用，避免冗余标注与状态不同步问题。
-
CSSNano压缩后样式失效主因是默认激进规则误删/改写关键代码，需禁用mergeRules、sortSelectors等选项，确保其作为PostCSS插件正确配置在postcss-loader中且顺序合理。
-
用<img>的width/height属性仅缩放不裁剪；真正裁剪需容器设宽高+overflow:hidden+object-fit:cover或绝对定位；精确控制用clip-path或Canvas；服务端裁剪更优但需校正EXIF方向。
-
HTML5中border需用CSS设置，最简写法为div{border:1pxsolid#000;}；平板边框异常多因overflow裁剪、box-sizing未预留空间或高DPI下1px发虚，非HTML5或设备专属问题。
-
要使360浏览器支持HTML5，必须启用极速模式（Blink内核）、禁用兼容性视图、删除强制IE渲染的meta标签，并通过http://访问html5test.com实测得分≥470分。
-
使用clamp()控制vw字体和间距可避免过激响应，如font-size:clamp(1rem,4vw,2.5rem)；line-height应用无单位值（如1.4）以同步缩放；推荐rem+vw混合方案提升兼容性与可控性。
-
WeakRef单独无法支撑图像资源池，因其仅提供“可能还活着”的引用通道，不通知回收时机；必须搭配FinalizationRegistry才能触发自动清理，否则缓存条目堆积、deref()频繁返回undefined导致重复加载与内存泄漏。
-
iOSSafari中vh跳变是因地址栏收起/展开改变window.innerHeight，导致vh值突变；应优先用calc(env(height)-env(top)-env(bottom))并fallback至100vh，或JS监听resize动态设置--vh变量，dvh暂不可单独依赖。
-
BEM是通过命名强制解耦样式与DOM结构的协作规范。它用Block-Element-Modifier三层语义类名替代深层后代选择器，避免结构变动导致样式失效，提升可维护性、复用性与工程健壮性。
-
@use替代@import是构建高效Sass布局框架的起点，它通过命名空间隔离变量/混入、杜绝隐式覆盖、支持未用代码剔除；layout/仅含容器关系类文件（如\_grid、\_container），不含组件语义内容；应禁用@extend防止选择器污染，改用@include复用布局逻辑。
