-
Vue项目离线缓存异步路由需预缓存带哈希的JS/CSS分块文件，并配置navigateFallback至/index.html，配合history模式与前端路由兜底，确保断网时仍可访问/about等页面。
-
<p>data-*属性仅用于存储静态、轻量、非敏感的上下文信息，命名须小写连字符（如data-order-status），JS中通过dataset.orderStatus访问，写入必须用setAttribute，值恒为字符串且明文可见。</p>
-
CF_HTML是Windows剪贴板中用于传递带样式HTML片段的特定格式，需用navigator.clipboard.write()配合text/html与text/plain双格式Blob写入，并严格遵循StartFragment/EndFragment等结构规范。
-
Symbol是JavaScript中的原始类型，用于创建唯一不可变值，常作为对象属性键以避免命名冲突。通过Symbol()函数生成，即使描述相同也互不相等，确保唯一性。Symbol属性不会被for...in或Object.keys()遍历，需用Object.getOwnPropertySymbols()访问。可用于模块间安全添加属性，防止覆盖。内置well-knownSymbols如Symbol.iterator、Symbol.toStringTag可自定义对象行为，实现可迭代、修改toString结果等
-
CSS变量更新后:hover动画不更新，因浏览器懒触发样式重算，仅在鼠标移入时读取变量快照；calc()混用、旧浏览器不支持动态变量、未触发hover状态均会导致失效。
-
浮动广告导致父容器塌陷时，clear并非万能解药，因其仅对后续非浮动块级元素生效；推荐用display:flow-root或overflow:hidden闭合浮动，语义更清晰且无副作用。
-
按钮组用flexjustify-center不居中，根本原因是父容器未撑开或display未正确设为flex；需确保父容器为块级、宽度足够、无float/inline干扰，并用开发者工具验证computed样式。
-
服务端渲染（SSR）通过在服务器生成完整HTML提升首屏速度与SEO，主流框架如Next.js、Nuxt.js、SvelteKit均支持数据预取与组件渲染，流程包括请求处理、数据获取、HTML生成与客户端激活；虽面临服务器负载与水合同步问题，但可通过缓存与架构优化应对，适用于内容型网站，尤其利于搜索引擎抓取与用户体验提升。
-
移动端页面拖拽是浏览器默认的弹性overscroll行为，根本原因是滚动容器无真实内容时触发；推荐用overscroll-behavior:none精准拦截，兼容旧版需结合preventDefault与position:fixed方案。
-
用clamp()配合CSS变量可替代媒体查询实现平滑字体响应，其语法为clamp(最小值,首选值,最大值)，推荐首选值用vw+rem偏移避免极端屏显示异常。
-
使用vertical-align、line-height、Flexbox或伪元素可实现行内元素垂直居中；具体方法包括设置vertical-align:middle配合line-height，或使用Flex布局的align-items:center，以及通过伪元素与inline-block协同对齐。
-
id选择器用#定义，针对唯一元素设置样式，如#header{color:white}，对应HTML为<divid="header">；应保持id唯一、避免滥用，优先用class批量设置样式，id适合单个特殊元素及JavaScript操作，命名需语义化，如#mainNav，合理使用可提升结构清晰度与样式精准性。
-
在HTML中引入CSS的方法有四种：内联样式、内嵌样式、外部样式表和导入样式。1.内联样式适合临时调整，但会使代码冗长且无法缓存。2.内嵌样式适用于小型项目，但无法缓存且可能影响加载速度。3.外部样式表是最常用和推荐的方法，适合大型项目，但需额外HTTP请求。4.导入样式适合将CSS分模块，但会增加HTTP请求并影响性能。
-
flex布局下最后一行左对齐的常见失效原因直接设justify-content:space-between或space-around时，最后一行往往还是被拉伸或居中——因为flex本身不区分“行”，它只按容器宽度和子项总宽做全局分配。浏览器不会主动识别“这是最后一行”并特殊处理。真正起作用的是让最后一行的子项数量“看起来和其他行一样多”，靠的是在末尾插入不可见占位项。伪元素::after是最轻量的实现方式，但它必须满足两个硬条件：父容器设为display:flex，且伪元素本身参与
-
渐变色发灰是因浏览器默认用sRGB非线性插值；应改用insrgb-linear强制线性插值，提升过渡平滑度与亮度均匀性，且兼容现代主流浏览器。
