-
核心是监听mousemove事件，用getBoundingClientRect()获取容器宽高计算鼠标百分比位置，再通过style.setProperty()动态设置CSS变量，并在CSS中用合成变量或calc()配合radial-gradient实现平滑背景过渡。
-
本文详解通过CSS隐藏原生<select>元素、结合语义化DOM结构与事件委托实现完全可控的自定义下拉选择器，兼顾可访问性、表单集成与复用性，并提供面向对象的SelectBox封装方案。
-
长单词撑破容器的典型表现是超长URL或Base64字符串溢出固定宽度div右边界并触发滚动条；word-break:break-all无条件断行，break-word仅在必要时断行但已废弃，应改用overflow-wrap:break-word。
-
浮动导致父容器高度塌陷，需清除浮动影响。2.常用方法包括：使用::after伪元素清除浮动，兼容性好；通过overflow:hidden触发BFC，但可能裁剪溢出内容；推荐使用display:flow-root创建BFC，无副作用且语义清晰。新项目建议优先采用flow-root方案。
-
HTML原生<inputtype="search">不触发实时搜索，需手动监听input事件、加防抖、取消pending请求、限制最小输入长度；其唯一优势是语义化、无障碍支持及自动清除按钮。
-
应使用语义化修饰符命名警告级别，如status--warning、status--caution、status--critical；BEM中通过Modifier（如notification--warning）表达变体而非新建Block；颜色应由CSS自定义属性控制，避免硬编码以支持主题切换、暗色模式与无障碍对比度要求。
-
本文介绍如何使用jQuery遍历并规范化DOM中多重嵌套的<mark>标签，确保每个被高亮文本仅被一层<mark>包裹，避免语义冗余与渲染异常。
-
多选控件必须配合JavaScript实现批量逻辑，包括手动获取选中值、防抖节流、适配后端接口格式（如数组查询或JSONbody）、事件委托处理动态元素、过滤后全选范围控制及前后端状态一致性保障。
-
align-self没生效的根本原因是父容器未启用flex布局或交叉轴无可用空间。需检查display:flex、flex-direction、父级高度约束、中间层min-height/min-width设置及box-sizing影响。
-
SASS嵌套与BEM结合易导致维护困难，因深层嵌套生成冗余选择器、增加权重、破坏BEM解耦初衷；应限制嵌套范围、独立声明BEM类名、合理使用变量与mixin、采用@use/@forward模块化，并在跨组件、伪类、媒体查询等场景放弃嵌套。
-
nextAll()向后查找所有兄弟元素，prevAll()向前查找所有兄弟元素，二者方向相反，均可通过选择器过滤，用于操作前后同级节点。
-
新手写HTML最易出错的是结构逻辑混乱，如head/body混用、嵌套不闭合、语义乱用；须显式闭合标签、正确使用语义元素、属性值加双引号、id规范命名，并对比源码与渲染DOM树。
-
是，现代CSS新特性在旧版浏览器中大概率需厂商前缀才能生效，如clip-path、backdrop-filter、gap在Flexbox中；Autoprefixer仅添加仍有实际意义的前缀，行为由browserslist精确控制。
-
背景图片遮罩本质是叠加半透明色层，通过bg-gradient-to-t与bg-[url(...)]多背景实现顶部渐变遮罩，需注意背景书写顺序（先渐变后图片），或用before伪元素实现更灵活控制。
-
用linear-gradient实现分段颜色进度条需将色标百分比与业务阈值严格对齐（如0%–30%蓝、30%–70%黄、70%–100%红），配合overflow:hidden容器和动态width控制显示长度，确保无缝衔接、无跳变。
