-
用max-width配合width:100%是控制容器响应式宽度最稳妥的方式，比单纯用width:100%或width:100vw更可靠，尤其在嵌套、缩放、滚动条场景下不容易溢出或错位。
-
语义化栅格布局应使用HTML5标签如header、main、section、article、aside和footer替代无意义div，结合CSSGrid的grid-template-areas与grid-area实现结构清晰、可访问性强的布局，保持DOM顺序与视觉一致，通过媒体查询响应式调整区域排列，确保内容层级逻辑完整，提升SEO、维护性和无障碍支持。
-
“处处上线”并非标准术语，实为对CI/CD误触发、配置不当（如webhook重复绑定、HMR失效）、K8s滚动更新、探针异常重启或Serverless冷启动等现象的口语化误称。
-
用PostCSS+preset-env、UnoCSS和cssnano配置模板统一多项目CSS工程化：共享.browserslistrc、按需生成工具类、标准化压缩，三者解耦可pin，避免黑盒脚手架维护困境。
-
width:fit-content能用但受限于display类型、父容器布局和浏览器版本；Grid中需写为minmax(0,fit-content())，Flex中须设flex:00fit-content才生效。
-
justify-content:flex-start对最后一行无效，因其仅控制单行内主轴对齐且不识别“最后一行”；flex-wrap启用后浏览器为每行单独计算剩余空间，未填满时仍按容器级justify-content重新分配，导致居中或右偏。
-
浮动元素的margin常“失效”是因为其脱离普通文档流，垂直方向margin被忽略或合并；水平margin通常有效，垂直间距宜用padding或BFC解决；现代布局应优先使用flex或grid。
-
要。HTML是唯一合规基础，需分层披露、语义化标签、明确主体、可访问可存档，避免隐藏、模糊指代与前端链路断裂。
-
grid-column和grid-row的简写会覆盖单侧属性，混用时需确保简写在后；span表示跨轨道而非跨列；grid-area四数字写法更安全但不支持span；负数线号与end等价，起点固定才可靠。
-
:not([class])只匹配HTML中完全未声明class属性的元素，如<p>文本</p>；一旦存在class=""、class=""或class="foo"等任何形式的class属性，即不匹配。
-
合理使用HTML语义化标签可提升SEO与可维护性，一、用header、nav、main等标签明确页面结构；二、规范h1-h6层级，每页唯一h1，逻辑嵌套标题；三、为img添加alt描述，装饰图设alt=""，结合figure与figcaption标注图表；四、引入JSON-LD格式的Schema标记，标注文章、产品等类型及发布时间、作者等字段，并用Google工具验证；五、提升可访问性，提供按钮链接文本说明，支持键盘导航，使用ARIA属性，确保颜色对比度，time标签添加datetime属性。
-
PerformanceAPI可精准采集FP、FCP、LCP、FID、TTFB等核心性能指标，通过performance.timing、getEntries()及PerformanceObserver获取页面加载与交互数据，结合mark打点和measure测量自定义逻辑耗时，利用sendBeacon上报关键数据，实现轻量高效的前端性能监控。
-
all属性非万能，误用会破坏可访问性与兼容性；应优先精准控制属性，慎用all，避免全局应用，推荐revert而非unset或inherit。
-
使用HTML锚点或JavaScript可实现返回顶部功能。HTML锚点通过<ahref="#top">跳转，简单但无平滑效果；JavaScript调用window.scrollTo({top:0,behavior:"smooth"})实现平滑滚动，并可结合滚动事件控制按钮显示，提升用户体验。建议固定定位按钮于右下角，初始隐藏并按滚动距离显示，适配移动端与可访问性，避免固定头部遮挡内容。
-
counter-reset与counter-increment是CSS计数器机制的配对核心：前者声明并初始化计数器（如counter-reset:section;），后者在匹配元素上触发递增（如counter-increment:section;）；二者名称必须严格一致，且counter-reset必须作用于父容器才能使子元素的counter-increment有效。
