-
min-height:100vh失效主因是html和body缺失高度约束，需设min-height:100%并配合Flex布局（bodydisplay:flex;flex-direction:column）及main的flex:1与min-height:0才可靠实现满屏。
-
CORS是现代跨域主流方案，通过服务器设置响应头实现，支持所有HTTP方法且更安全；JSONP利用script标签特性绕过同源策略，仅支持GET请求，兼容老浏览器但存在XSS风险。
-
处理CSS混合模式样式冲突需通过模块化隔离与作用域控制。1.理解mix-blend-mode的继承与层叠特性，避免父级污染子元素；2.使用_link按功能拆分CSS模块，如将混合样式独立为hero-blend.css，降低全局干扰；3.用.blend-container{isolation:isolate}封装混合区域，限制影响范围；4.对临时效果动态加载link标签引入样式，使用后移除，确保作用域清洁。核心是将混合视为高危操作，通过拆分、隔离、限时策略减少副作用。
-
原生<video>标签最轻量兼容性好，但iOS强制全屏、Android静音自动播放失败；需加playsinline等属性，用H.264+MP4，有声播放须用户手势触发，自定义控件需监听loadedmetadata和seeked事件。
-
应优先使用服务端或构建工具注入时间戳，如Hugo的{{.Lastmod.Format"2006-01-02"}}；若用JavaScript，则通过document.lastModified获取并格式化后写入指定容器，但需注意其在CDN缓存、离线等场景下不可靠。
-
HTML5<video>标签无法提升硬件解码能力，仅触发浏览器调用底层解码器；硬解依赖浏览器内核、系统驱动与硬件协同，需用MediaCapabilities.decodingInfo()实测而非canPlayType()判断。
-
display:flex能绕过幽灵空白，因其切换至弹性盒格式化上下文，子元素作为flexitem被处理，源码中换行符、空格等空白字符被完全忽略，不进入行内格式化上下文（IFC），故从根源上不触发幽灵空白。
-
matches()是浏览器原生CSS引擎驱动的精准匹配方法，自动忽略class顺序、重复、空格及动态变更，支持复合选择器，语义准确且无副作用，兼容性可控。
-
z-index没效果最常见原因是父容器创建了层叠上下文，导致子元素z-index只在该上下文中生效；它仅对position为relative、absolute、fixed或sticky的元素有效，且比较基于层叠上下文而非全局数值。
-
light-dark()是CSS原生函数，非HTML功能，仅在支持浏览器（Chrome121+、Safari17.4+、Firefox125+）的CSS规则中生效，用于根据系统偏好自动切换颜色，不可用于内联样式或JS直接调用。
-
多层box-shadow应采用偏移为0、模糊半径递增、透明度递减的组合：第一层02px4pxrgba(0,0,0,0.1)，第二层04px12pxrgba(0,0,0,0.08)，第三层08px24pxrgba(0,0,0,0.05)。
-
JavaScript中大数组切片被闭包长期持有会导致底层ArrayBuffer无法释放，引发内存膨胀；需通过DominatorTree定位RetainedSize异常的ArrayBuffer，检查闭包引用链并切断视图型引用。
-
正确使用word-break属性可避免单词被截断：优先选用normal或keep-all值，确保英文单词在空格处换行；搭配white-space:normal和固定宽度容器，提升文本可读性。
-
overscroll-behavior用于切断嵌套滚动容器间的事件传递链，仅在可滚动容器（overflow非visible且内容溢出）滚动至边界时生效；典型场景为模态框或侧边栏滚动到底/顶时阻止背景页面滚动。
-
Temporal.Duration无法处理夏令时，必须配合Temporal.ZonedDateTime使用；因Duration是纯线性运算、不感知时区，而ZonedDateTime调用add()时会查IANA数据库自动应用DST偏移。
