-
border会让元素变大是content-box的默认行为，width仅指内容区，border和padding向外撑；全局设box-sizing:border-box可解决，并需重置伪元素及注意兼容性。
-
全屏背景视频需设position:fixed+width:100vw;height:100vh+object-fit:cover；z-index失效因video创建独立堆叠上下文，应加isolation:isolate；移动端需muted、autoplay、playsinline三属性并存。
-
定位元素不触发Margin塌陷，因其脱离普通文档流、不参与BFC内相邻块级盒的外边距合并；但父容器若未形成BFC，其自身margin仍可能与兄弟元素塌陷。
-
flex-shrink未生效的根本原因是min-width:auto阻止收缩，必须显式设置min-width:0，并配合word-break或overflow-wrap强制折行及overflow:hidden裁剪。
-
JavaScript水印需动态创建透明覆盖层并多重防护：Canvas绘制防DOM删除，MutationObserver监听恢复，多实例+动态内容增强鲁棒性，调试干扰提升分析成本，本质是溯源威慑而非绝对安全。
-
长文本溢出容器不换行的根源是white-space被设为nowrap或pre；中文长串需用overflow-wrap:break-word或word-break:break-all；Flex/Grid子项须加min-width:0才能正常折行。
-
box-shadow动画闪烁或跳变是因为初始值与目标值结构不一致导致浏览器无法插值，需用具体数值初始化、保持参数个数一致、使用rgba()颜色、显式声明transition作用于box-shadow属性。
-
grid-column和grid-row生效需父容器设display:grid，仅作用于直接子元素；值指网格线范围而非行列序号，如2/4表示跨第2、3列，span2表示跨2栏，负值如-1/-3须起始线编号小于结束线编号。
-
本文详解如何使用JavaScript根据radio按钮的选择动态显示或隐藏表单区域，重点解决display属性误用导致元素始终不可见的问题，并提供健壮、可扩展的实现方案。
-
requestAnimationFrame是浏览器专为动画设计的调度机制，它在下一次重绘前调用函数，天然同步屏幕刷新率、不丢帧、页面不可见时自动暂停；而setTimeout无法稳定实现这些特性。
-
:hover和:focus需显式组合（如:hover:focus）才能同时生效，否则样式互不影响；单独使用无法实现叠加态效果，且需注意优先级、可访问性及移动端兼容性。
-
line-height在响应式中易失衡因默认基于font-size倍数计算，而font-size随屏幕变化导致行距视觉不均；iOSSafari对小字号还有额外压缩。用clamp()动态控制可守住1.2–1.6安全区，如line-height:clamp(1.25,0.2vw+1.35,1.55)，配合@supports降级，避免媒体查询碎片化和JS重排。
-
JavaScript通过WebWorkers实现并发，主线程与Worker线程隔离，通过消息传递通信；可使用SharedArrayBuffer实现共享内存，Node.js中worker_threads模块提供多线程能力。
-
Bootstrap基于HTML5语义结构运行，需以<!DOCTYPEhtml>开头、正确使用语义标签和栅格嵌套规则，否则响应式与组件功能将失效。
-
使用ul和li标签创建无序列表，通过list-style-type修改符号样式，list-style-image替换为图片，CSS去除默认样式并自定义布局。
