-
Flex居中失效主因是html/body未设height:100%，需全局重置；推荐用gridplace-items:center替代flex，更稳定；模态框须避免absolute/fixed定位及bodyoverflow:hidden陷阱。
-
用max-height配合transition实现展开收起动画，因CSS不支持height:auto过渡，需设足够大且可控的max-height（如500px或100vh）作为代理值，配合overflow:hidden和class切换完成平滑动画。
-
必须统一所有容器的grid-template-columns定义（如通过CSS变量），禁用auto/minmax等动态值，确保列数、顺序、单位一致；命名线、区域和嵌套grid均不跨容器生效，box-sizing和gap须统一。
-
用padding-top百分比能锁宽高比，因其值始终按父容器宽度计算，可配合绝对定位实现比例布局；aspect-ratio更简洁但兼容性差，老项目应优先用padding方案。
-
直接设box-sizing:border-box能解决绝大多数宽度溢出问题，但必须全局设置,::before,*::after{box-sizing:border-box;}，否则子元素仍按content-box计算导致padding和border外扩；img、svg、iframe等还需额外加max-width:100%等约束。
-
路由表过载（如超1000条）拖慢构建与收敛，主因是触发CPU计算指数增长、内存缓存压力上升、FIB同步延迟放大及邻居震荡风险增加；实用拆分方案包括区域聚合、VRF隔离、导入阈值过滤和路由衰减。
-
math.div()是计算行高的唯一稳妥解法，避免Sass除法歧义；应基于1rem而非固定px计算以实现响应式；line-height须用无单位数值；字体度量差异需手动微调+0.05~0.15并眼验实际效果。
-
Canvas漫画线稿需用getImageData逐像素处理：先灰度转换，再差分边缘检测，最后二值化；SVG滤镜可加速但兼容性差；ctx.filter不支持自定义逻辑，大图需降采样或WebAssembly优化。
-
本文介绍如何将HTML5Canvas作为响应式背景图像应用到页面中，解决因侧边栏折叠导致的滚动条、留白及尺寸错位问题，并通过toDataURL()实现Canvas内容转为CSS背景，确保背景始终覆盖整个视口且无滚动干扰。本文介绍如何将HTML5Canvas作为响应式背景图像应用到页面中，解决因侧边栏折叠导致的滚动条、留白及尺寸错位问题，并通过`toDataURL()`实现Canvas内容转为CSS背景，确保背景始终覆盖整
-
伪元素下划线hover闪动的根本原因是::after初始未隐藏，导致渲染时先显示默认宽度再缩放；须设width:0+opacity:0，配合完整transition和position:relative定位。
-
模板字符串生成HTML需分层组织、安全转义、逻辑内聚，适合中低频轻交互场景；拆分为renderHeader、renderUserBadge等小函数，主模板组装；用map/join处理列表与嵌套；动态属性用三元表达式；用户内容必escapeHtml；插入优选insertAdjacentHTML。
-
现代三栏布局应弃用浮动圣杯布局，改用Flexbox或Grid：前者适合主内容高度多变、需DOM与视觉顺序分离的场景，后者适用于等高、统一间隙及语义优先的需求，二者均具备良好响应式支持与可维护性。
-
CSS选择器无法向上选择父元素，这是由规范决定的设计限制；:has()是唯一例外但支持有限且性能开销大，真正需要父子联动时应使用JavaScript。
-
onpaste属性支持所有HTML元素，但仅input、textarea默认触发；其他元素需设contenteditable="true"，且不能被overflow:hidden或pointer-events:none拦截；读取clipboardData须在用户手势同步上下文中进行，否则为空。
-
viewportmeta标签缺失或写错位置媒体查询断点不生效，最常见、最隐蔽的原因就是标签没写、写错位置，或属性值不完整。它不是可选的“增强体验”配置，而是媒体查询能运行的硬性前提。浏览器在移动端默认以桌面视口（通常是980px）渲染页面；没有这个标签，@media(max-width:768px)永远不会触发——因为视口宽度根本不是768px。必须放在内，且在所有CSS引入之前（包括标签前）正确写法只有一行：常见错误：name="viewpoint"（拼写错）、conten
