-
<script>放在<head>中会阻塞DOM构建，浏览器必须下载、解析并执行脚本后才继续解析HTML，导致首屏白屏；同步脚本尤其危险，document.write()甚至会清空文档。
-
AST静态分析可安全识别并替换非原子化DOM操作：遍历CallExpression匹配危险模式，依语义判定是否合并，生成带sourcemap的等效代码，跳过动态代码与第三方库调用。
-
absolute+margin:auto居中需同时满足四边为0、宽高明确、父容器为定位上下文；遮罩场景易因裁剪、滚动偏移、视口变化失效，推荐fixed+flex替代。
-
IE8及更早版本不识别HTML5语义标签，因其DOM解析器忽略未知标签名，导致元素不存在、CSS无法匹配、JS查询返回null；必须在<head>最顶部用document.createElement提前声明所有新标签并配合display:block样式重置。
-
Three.js场景全黑通常是因为缺少基础光照，仅用点光源无法照亮默认材质的物体，必须添加环境光（AmbientLight）提供全局基础照明。Three.js场景全黑通常是因为缺少基础光照，仅用点光源无法照亮默认材质的物体，必须添加环境光（AmbientLight）提供全局基础照明。在你的代码中，虽然已创建了PointLight（点光源），但MeshStandardMaterial是一种基于物理的材质（PBR），它不会响应纯方向性或点光源的“直接
-
不能只写filter:blur(8px)就完事，因为浏览器无法对未加载完成的img元素触发CSS过渡，初始渲染可能直接跳到清晰态或加载瞬间突变，根本看不到过渡效果；关键在于用JS监听load事件后通过类名切换（如.loaded）精准控制过渡时机，并配合transition和合理blur值（2px–6px）实现平滑模糊→清晰效果。
-
因为transform不触发重排，它仅操作合成层的几何变换矩阵，不改变文档流、盒模型尺寸或布局上下文，浏览器跳过样式计算、布局和绘制，直接在合成阶段利用GPU更新图层位置。
-
<p>关键在于监听dragover事件并调用event.preventDefault()；再通过event.clientY与target.getBoundingClientRect()计算offset=event.clientY-rect.top，若offset小于高度一半则为上方，否则为下方。</p>
-
本文解决CSSMarquee中第二组内容不可见的问题：根本原因是overflow:hidden作用于父容器，而动画却未应用在可滚动的子元素上；正确做法是将@keyframes动画直接绑定到每个.work_banner_content元素，而非父容器。
-
fr单位本质是“剩余空间的份数”，仅分配减去固定值后的空间；混用时需用minmax()防撑宽，auto-fit+minmax()可实现响应式均分。
-
CSS-in-JS中伪类需用库特定语法：Emotion/StyledComponents用&:hover，JSS用hover:{color:'red'}；伪元素同理，&::before或before:{content:'"★"'}；&不可省略，否则丢失作用域。
-
CSS颜色关键字最省事，直接用red、blue等16个基础色名兼容性最好；扩展色名需备选值；currentColor特殊；关键字无透明度，需转rgba/hsla；不适用于设计系统。
-
事件委托是将监听器绑定到父容器，通过event.target判断真实点击目标，避免重复绑定、内存泄漏和动态节点失效问题。
-
padding用于设置元素内容与边框间的距离，提升可读性和视觉舒适度；其值不可为负，会增加元素实际占用空间。通过单、双、三、四值写法可分别设置不同方向的内边距。在标准盒模型中padding会扩大元素尺寸，而box-sizing:border-box则将其包含在宽高中，便于布局控制。常用于文本容器、按钮、导航菜单及响应式设计，是实现精准布局的基础。
-
移动端background-attachment:fixed失效是浏览器主动禁用策略，iOSSafari早废弃、AndroidChrome84+默认忽略；最稳妥方案是用position:fixed+独立div模拟固定背景。
