-
现代浏览器禁止无用户交互的音频自动播放，必须在click或touchstart等用户手势事件中调用audio.play()并捕获Promise错误，muted无法可靠绕过限制。
-
用::before生成刻度必须设置content:""触发渲染，并配合position:absolute定位；每个.timeline-item需设position:relative，宽高须明确，推荐top:50%;transform:translateY(-50%)垂直居中对齐。
-
<p>HTML单行注释唯一写法是<!--注释内容-->，浏览器完全忽略，不可嵌套，空格非必需；//或#在HTML正文里会被当作文本渲染。</p>
-
clear:both的空div无法撑开父容器高度，因其无内容、未触发BFC；overflow:hidden可触发BFC但会裁剪溢出；伪元素clearfix更稳妥；Flex/Grid布局下浮动失效，无需清浮动。
-
backdrop-filter:blur支持Chrome76+、Edge79+、Safari9+，Firefox需手动启用；生效需元素透明且背后有内容，避免创建新层叠上下文；毛玻璃效果推荐rgba背景+-webkit前缀+伪元素固定背景。
-
现代分屏应优先用CSSGrid替代废弃的frameset和易跨域的iframe；同源iframe需设宽高、lazy加载、overflow:hidden；跨域通信必须用postMessage并校验origin。
-
应禁止将undefined用作局部变量名，因其会覆盖全局undefined导致类型判断失真、逻辑错误及调试困难，推荐使用typeofx==='undefined'或void0替代。
-
video标签需同时添加webkitallowfullscreen和allowfullscreen属性才能在Chrome、Safari等浏览器中正常全屏；仅controls不够，且JS调用requestFullscreen()必须在用户手势同步上下文中执行。
-
纯HTML无法实现可用验证码输入框，因其仅定义结构，需后端动态生成验证码、前端JS控制刷新与校验、服务端比对验证。
-
BEM通过命名结构实现样式沙箱隔离，.search__input因声明归属、角色与上下文依赖而具备天然隔离性，而泛化类名如.input无语义边界易致样式污染。
-
clamp()是现代CSS实现字体自适应最稳方案，支持Chrome88+、Firefox79+、Safari14.1+，通过min/preferred/max三值约束缩放边界，避免vw单位在极端屏幕下的可读性或溢出问题。
-
@import在Vue组件<style>中不生效，是因为其作用域仅限当前样式块且无法跨组件共享变量；真正全局可用需通过style-resources-loader等构建工具在编译时注入。
-
应引用构建输出的压缩版CSS文件（如style.min.css），通过检查dist/或build/目录确认文件存在，并在HTML中正确设置link路径；推荐使用Webpack、Vite等工具自动注入压缩CSS，避免手动引入重复文件或路径错误。
-
绝对定位实现重叠需谨慎：父容器设position:relative，偏移值优先用%、rem或vw/vh；z-index受层叠上下文限制，transform等会创建新上下文；响应式下flex/grid常更可靠；移动端注意pointer-events与事件冒泡。
-
Bootstrap通过container、row、col类结合Flexbox实现响应式网格布局，利用12列系统和断点前缀（如col-md-6）适配不同屏幕尺寸，配合对齐、间距、嵌套及组件等工具构建高效弹性布局。
