-
三根线必须用绝对定位而非margin，因transform动画对margin无效，绝对定位可精准控制top和width、不占文档流；父容器需设position:relative，三条线统一用display:block+width:100%，以中间线为轴心对称布局，transform-origin必须设为center，伪元素扩大点击热区。
-
CSS工具与框架正转向“管体验”，以原子化、配置前移、编译加速、语义增强为核心；原生CSS能力爆发，嵌套、:has()、容器查询等特性普及；清理工具走向静默智能；框架定位分化，Tailwind/shadcn/ui成主流，CSS-in-JS持续萎缩。
-
CDN加载失败后需用JavaScript动态插入备用CSS，因link标签无法监听加载失败；应使用onerror事件或fetch预检实现降级，注意CORS、CSP及路径一致性，并确保本地CSS与CDN版本完全同构。
-
应按需控制flex子项收缩：对文字按钮等设flex-shrink:0，对内容区保留flex-shrink:1，配合min-width/min-height设定压缩底线，并慎用flex:1，优先用flex-basis锚定基准尺寸。
-
当使用<inputtype="number">且min="0"时，浏览器原生增减按钮首次点击仍显示1而非0；本文提供纯HTML/CSS/JS实现（无需自定义控件），通过轻量事件监听与状态标记，可靠地将首次递增值强制设为0。
-
void运算符强制右侧表达式求值后返回undefined，不改变副作用但丢弃原返回值；常用于IIFE、javascript:void(0)、Promise链忽略中间值等场景。
-
用position:relative偏移文字时点击区域错乱，因其不脱离文档流，视觉偏移但事件区域仍在原位；应改用transform:translate()以保持交互准确且性能更优。
-
使用标准HTML表格语义标签（<thead>+<tbody>）并配合@mediaprint样式，可让浏览器或PDF生成工具在分页时自动在每页顶部重复渲染表头，无需JavaScript或复杂hack。
-
遮罩层失效通常因定位或层级问题，需设置position:fixed和足够高的z-index，并将元素置于body末尾避免层叠上下文干扰，同时使用id选择器提升权重，确保样式不被覆盖。
-
JavaScript无法直接防止代码注入，核心是禁止执行不可信字符串：禁用eval()、Function()、setTimeout(string)等；插入HTML时用textContent或DOMPurify转义；JSON解析用JSON.parse()而非eval；启用CSP禁用'unsafe-eval'和'unsafe-inline'。
-
最直接的响应式flex布局控制点是flex-direction：默认column（小屏竖排），在min-width断点下覆盖为row（大屏横排）；需协同调整flex-wrap、flex-grow/shrink、justify-content和align-items，避免孤立修改导致布局垮塌。
-
CSSNano通过压缩和优化CSS代码减小文件体积，提升网页加载速度与渲染性能。它作为PostCSS插件，可集成于Webpack、Gulp等构建流程，配合Sass/Less预处理器和Autoprefixer协同工作，先由预处理器编译为标准CSS，再经PostCSS管道进行最终优化，确保代码精简且兼容。默认预设preset:'default'提供安全高效的压缩，包括移除注释、空白、合并规则等；进阶优化如reduceIdents、zindex需谨慎启用，避免影响JavaScript选择器或层叠顺序。实际应用中
-
transform-origin默认值是50%50%，即元素自身宽高的几何中心；该值基于元素自身尺寸计算，不随动画变化，且仅在动画开始前读取一次。
-
哈希路由通过#管理路径，兼容性好且无需服务器配置，但SEO差；History路由使用标准URL，利于SEO但需服务端支持。1.哈希路由依赖hashchange事件，URL变化不触发请求；2.History路由利用pushState和popstate实现无刷新跳转；3.前者部署简单，后者需fallback配置；4.对SEO和美观要求高选History，快速开发或老旧环境选哈希。
-
本文详解如何在Cucumber-JS中通过AfterStep钩子结合step.pickleStep和step.result捕获具体失败步骤的文本、类型及源码位置，解决scenario.pickle.steps中无状态字段导致无法直接定位失败步的常见痛点。
