-
纯CSS可实现播放/暂停图标平滑切换：用两个重叠图标元素，通过opacity控制显隐并配合transform微调，避免content切换或SVG路径d属性动画等不支持方案。
-
外边距塌陷是CSS规范定义的垂直相邻块级元素margin合并行为，发生在父子或兄弟块间；行内、浮动、绝对定位元素不参与；可用BFC（如display:flow-root）或border/padding/flex等轻量方式解决。
-
必须添加<metaname="viewport">标签，否则响应式布局在手机上无法正常使用；需设width=device-width和initial-scale=1.0，禁用user-scalable=no；图片视频须加max-width:100%和height:auto；断点优先用em/rem；真机测试不可替代DevTools。
-
sticky定位需父容器提供滚动上下文，仅加sticky+top-0+z-10无效；必须父容器设h-screen+overflow-y-auto，sticky元素不能是body直系子元素，且避免transform等触发新层叠上下文。
-
Firefox50之前referrerpolicy="same-origin"无效，因解析器不识别该属性，退回到no-referrer-when-downgrade；50版起才支持。
-
必须用<button>。它是触发动作而非纯导航，能确保无障碍访问、键盘操作一致性和表单正确包含；错误使用<a>或role="link"会导致语义混乱和交互异常。
-
<inputtype="color">的默认值必须显式设置为合法7位或4位十六进制色值（如#RRGGBB），否则浏览器回退至不可靠的系统默认色；其value始终返回小写7位十六进制字符串（如#ff6b35），不支持缩写、命名色或透明度；iOSSafari15.4前不支持，15.4+需避免appearance:none等CSS干扰；兼容旧浏览器应结合JS检测并降级为带校验的文本输入。
-
Node.js是运行JavaScript服务器端代码的主流环境，因其提供fs、http等核心模块支持文件操作与网络服务，而浏览器JS缺乏这些能力；安装应选LTS版本，验证用node-v/npm-v；原生http模块可快速启动服务，需注意端口占用与res.end()完整性；package.json中type、main、scripts需按项目规范手动校准。
-
Less中@import按文本顺序内联拼接代码，变量和混合的可见性取决于导入位置；应遵循“全局→布局→组件”顺序，用(reference)只引入逻辑、(once)防重复，并注意路径解析规则。
-
computed核心作用是基于响应式数据派生可缓存的响应值；购物车总价计算是典型应用，相比methods（无缓存）和ref（需手动更新），它自动追踪依赖、按需更新；支持深层响应性与多级依赖链。
-
本文详解如何仅用CSS实现封面区域的视差滚动效果：将图片设为background-attachment:fixed的背景图，配合语义化HTML结构与响应式样式，使后续内容自然“滑过”封面，达成流畅视觉层次。
-
input在Flex中被压缩是因默认min-width:auto导致内容宽度极小，解决方法是显式设置min-width（如0、120px或配合flex:1），并建议组合flex-shrink:0或flex:11auto以确保稳定显示与交互。
-
正确做法是用radial-gradient(circleat50%50%,transparent0%,#0000%,#0002px,transparent2px)配合background-size:20px20px实现等距居中点阵，色标需同位置硬切防模糊，CSS变量和响应式单位提升复用性。
-
三栏结构不对齐的主因是容器或子项默认行为未约束。需设父容器display:flex、justify-content:space-between、align-items:stretch，统一box-sizing:border-box，子项用flex:1而非width百分比，并用flex-column居中内容。
-
HTML5<dialog>标签默认隐藏且需JavaScript控制：show()非模态，showModal()模态并支持::backdrop（Chrome/Edge111+、Safari17.4+），Firefox不渲染遮罩；必须监听close事件统一处理关闭逻辑，表单提交会自动关闭，建议用JS控制流程以保障兼容性。
