-
<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模拟固定背景。
-
flex-basis设百分比无效是因为父容器缺少明确的主轴尺寸（如width/height），导致浏览器无法解析而回退到auto；需确保父容器有display:flex、正确flex-direction及显式主轴尺寸。
-
IE10必须用display:-ms-flexbox替代display:flex，且需配套-ms-flex-pack、-ms-flex-align等旧属性；flex缩写无效，须拆解为-ms-flex-positive/-negative/-preferred-size；兜底推荐display:table。
-
OKLCH是基于人眼感知建模的色彩空间，调L不偏色、调C不变亮、调H不失饱和；参数需带百分号（L为0%–100%），混用色彩空间会导致插值失效，全程统一使用才能发挥感知均匀优势。
-
默认插槽的后备内容直接写在<slot>标签内，仅当父组件未传入内容时生效，支持文本、HTML、组件及动态绑定，但仅作用于无name属性的默认插槽。
-
<progress>标签需同时设置value和max属性才能正确显示进度，如<progressvalue="65"max="100">；仅设value会导致解析异常；兼容IE需降级为<div>模拟，动态更新须校验边界并用requestAnimationFrame实现平滑动画。
-
未清理的事件监听器导致DOM移除后回调仍占用内存；2.闭包不当引用大型对象阻碍回收；3.全局变量意外增长积累内存；4.定时器依赖大型对象使内存无法释放。
-
答案是调试CSS选择器需结合开发者工具排查匹配失败、优先级冲突等问题。首先检查选择器是否正确命中元素，利用F12工具查看Styles面板及document.querySelector验证；其次分析样式覆盖情况，关注删除线属性和!important影响；通过实时编辑、调整选择器特异性或重构HTML结构优化定位；注意拼写、空格、伪类顺序等常见陷阱，提升调试效率。
