-
order属性通过调整Flex子项在主轴上的渲染位置来控制显示顺序，不改变DOM结构；默认值为0，数值越小越靠前，相同时按HTML源码顺序排列，仅对display:flex容器的直接子元素生效。
-
font-display应设为fallback最防闪屏，swap适合正文但弱网下明显替换，optional适合装饰性字体，auto默认阻塞渲染3秒；GoogleFonts需手动加&display=swap或fallback；本地@font-face必须每个变体单独声明font-display。
-
required仅校验非空，不校验格式；pattern自动锚定且不支持标志符；min/max/step在number与date中行为不同；setCustomValidity需手动清空；原生校验仅响应表单提交事件。
-
通过CSS的transition属性与:focus伪类结合，可实现输入框聚焦时边框颜色平滑过渡的动画效果，首先设置输入框默认样式并去除outline，再定义:focus状态下的border-color变化，配合box-shadow可增强视觉表现，推荐使用0.3秒ease过渡以提升用户体验。
-
浮动布局结合:hover可实现经典下拉导航栏，通过float使主菜单水平排列，利用position和:hover控制子菜单显隐，兼容旧浏览器，适用于维护传统项目。
-
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防溢出。
