-
PWA是一种结合网页与原生应用优势的技术，由Google提出，核心理念为渐进增强，具备可安装、离线可用、响应式设计、HTTPS安全传输和推送通知等特性；JavaScript通过ServiceWorker实现资源缓存与离线访问，利用Push与NotificationAPI实现消息推送，开发时需配置manifest.json、sw.js和服务注册逻辑，部署需HTTPS并注意缓存策略与文件路径，最终提供跨设备的流畅用户体验。
-
IE10/11必须使用display:-ms-flexbox，不识别标准display:flex；需按顺序声明：-webkit-box、-ms-flexbox、-webkit-flex、flex，漏掉或顺序错误将导致布局退化为block。
-
type="email"和type="url"仅做基础语法校验：前者接受foo@bar，后者在Chrome中接受example.com；强校验需pattern锚定（如^\d{11}$）或JS补充，required只判空不验内容，原生验证仅submit触发。
-
Cookie需手动操作document.cookie字符串，易出错；localStorage永久同源存储，sessionStorage仅限单标签页；三者均不安全，敏感信息须后端校验。
-
推荐使用EventSource（SSE）或WebSocket实现实时物流消息推送，禁用轮询；优先选EventSource（轻量、兼容好、单向），需后端支持text/event-stream；WebSocket适用于需双向通信的场景。
-
width:fill-available已被废弃，别再用了这个CSS值在Chrome57+、Firefox62+中已被移除或从未真正标准化，现在写width:fill-available或width:-webkit-fill-available属于“碰运气”行为——多数情况下不生效，或只在特定上下文（如input框内部）偶然起作用。它不是解决“填充剩余空间”的正统方案，而是历史遗留的实验性语法。用flexbox的flex:1实现可靠填充这是当前最通用、兼容性最好（
-
先保证链接可访问和页面跳转，再用JavaScript增强体验。通过原生HistoryAPI（pushState、replaceState）更新URL并监听popstate事件实现无刷新路由，拦截内链点击进行异步内容加载；结合路由表匹配路径并渲染对应视图，支持动态插入HTML或懒加载片段；服务端返回统一入口页以保障无JS时的基础可用性，实现渐进增强；附加标题管理、loading提示与hashfallback兼容旧环境，核心是分层控制：HTML负责可用，JS提升体验。
-
unlayered样式总能覆盖@layer内规则，因CSS规范规定未归入任何@layer的样式天然位于级联顺序最前端，优先级高于所有命名层；如antd/dist/reset.css即属此类，会无条件压制Tailwindv4的@layerbase重置。
-
counter-reset必须写在每个独立编号区块的直接宿主容器上，而非父级wrapper；它不穿透display:contents等截断上下文，且伪元素中设置无效，嵌套编号需每层对应counter-reset与counter-increment。
-
纯HTML+CSS做装修案例图集页完全可行，但需规避图片拉伸、SafariGrid错位、语义误用、alt缺失四类问题：用<picture>+srcset按宽高比提供多尺寸图，主案例用<article>非<figure>，alt描述具体风格与细节，Grid降级兼容Safari15.6以下。
-
纯CSS角标可用::before实现，关键在于父容器设position:relative、::before设absolute定位及border三角或宽高矩形技巧，并注意z-index、pointer-events及样式继承问题。
-
@import的layer选项用于将导入样式表显式放入命名层叠层，需满足顶层位置和合法层名两个前提；常见失效原因包括嵌套在条件规则内、层名不一致、导入顺序错误及混用匿名与具名层。
-
生产环境Tailwind样式丢失主因是PurgeCSS误删class，需检查content配置是否覆盖动态class来源，正确设置safelist正则，并通过debug:true或临时禁用content验证。
-
密码输入框的type="password"无法美化内部圆点，仅可控制外围样式；需用border-radius、padding、:focus-visible、background-image等实现安全美观，兼顾可访问性与多端兼容。
-
使用CSSFlexbox的flex:1配合flex-direction:column，可让动态子元素自动占据父容器中除去固定尺寸兄弟元素后的剩余垂直空间，无需硬编码calc()或JS计算。使用CSSFlexbox的`flex:1`配合`flex-direction:column`，可让动态子元素自动占据父容器中除去固定尺寸兄弟元素后的剩余垂直空间，无需硬编码`calc()`或JS计算。在传统块级布局中，当父容
