-
word-break:break-all有时无效，因父容器缺宽度约束、Flex子项未设min-width:0或被white-space:nowrap禁用换行；它适合技术字段，而用户可见文本应优先用overflow-wrap:break-word。
-
直接调用window.scrollTo({top:0,behavior:'smooth'})即可平滑滚动至页面顶部；兼容性需检测scrollBehavior支持，不支持时降级为window.scrollTo(0,0)；用于返回顶部按钮时建议防重复触发；滚动容器为元素时应调用其scrollTo方法。
-
display属性与盒模型共同控制元素布局，通过block、inline、flex等值定义元素排列方式，结合box-sizing:border-box设置宽高包含边框和内边距，实现精确布局；利用inline-block实现水平导航，flex容器配合子元素margin、padding实现弹性间距，box-sizing统一尺寸计算，避免外边距合并等问题，提升响应式开发效率。
-
防样式污染需用独立DOM容器、禁用自动注入、预编译CSS并动态注入、统一哈希逻辑、确保元素挂载后再调用getComputedStyle，手动管理样式表避免JSDOM限制。
-
ShadowDOM不能彻底隔离样式，仅在closed模式下对挂载于ShadowRoot内的元素生效；微前端中若子应用直接操作document.body，则样式仍会泄漏，且不兼容IE、Safari存在继承bug，事件与全局对象访问亦被切断。
-
页脚应拆分为copyright、footer-nav、contact-info等独立block，各自内聚且可复用；布局由.footer-layout等容器通过CSSGrid/Flex控制，避免BEM嵌套与滥用modifier。
-
改了代码但页面没更新，通常因HMR未真正启用：模块被间接依赖、未显式声明accept、或触犯CSS-in-JS/动态import/__dirname三大陷阱。
-
Sass本身不构建卡片，而是通过变量、@mixin和%placeholder实现样式复用与契约化设计；关键在于用$card-border-radius等带单位变量定义视觉规则，@mixin封装基础样式，%card-hoverable统一状态逻辑，嵌套控制作用域但不超过三层。
-
Highcharts仪表盘（Gauge）图表顶部被裁剪，通常源于长副标题（subtitle）占用垂直空间后，又通过pane.size:'200%'强制放大导致溢出；解决方法是将副标题设为浮动模式（floating:true），避免其挤占绘图区域。
-
最直接方案是父容器设display:flex，图片设display:block和max-width:100%防基线留白与宽高比崩坏，并用gap控制间距、flex-wrap:wrap防溢出。
-
外边距塌陷是CSS规范规定的布局行为，指垂直方向相邻块级元素的margin相遇时取较大值而非相加；最常见于无border/padding/content的父容器与子元素间，导致父容器“失高”或内容上移。
-
最合理的选择是<nav>+<ol>（强时序）或<ul>（含分支），配aria-current="step"和aria-label；连接线用li:not(:last-child)>span::after实现，确保语义清晰、无障碍可用。
-
该用border而非outline；border需同时指定width、style、color三参数，可用方向性属性如border-top单独设置某边，border-radius使边框自身变圆，深色模式下需配合prefers-color-scheme适配颜色。
-
最简并集写法是constunion=newSet([...setA,...setB]);它不修改原集合、语义清晰、自动去重，适合日常开发；对象需手动深比较才能按内容去重。
-
CSS中没有可用的:current伪类，当前页高亮需通过HTML添加.active类并配合CSS样式实现，或由后端模板、前端路由动态控制该类名。
