-
saturate()过大会导致颜色“发飘”，因超出100%后在sRGB空间中快速裁切细节；安全阈值为1.2–1.6，应结合brightness()调控对比度，并用CSS变量动态控制。
-
可通过HTML5的<ol>标签或CSScounter属性为列表添加自定义序号：<ol>支持start、type、reversed等属性控制编号；CSScounter通过counter-reset、counter-increment和counter()函数实现灵活计数；二者可混合使用以统一风格；嵌套列表需分层定义计数器；常见异常需检查初始化、作用域及伪元素渲染。
-
加标签仍被缓存是因为meta标签仅对HTML首次加载有效，且现代浏览器常忽略；真正禁用缓存需服务端为所有资源（HTML、JS、CSS、API）统一配置Cache-Control响应头，并确保CDN/代理透传。
-
JavaScript代码混淆通过转换源码结构降低可读性，保护知识产权、增加逆向成本、隐藏敏感信息，常见方式包括变量名替换、字符串编码、控制流扁平化、死代码注入，并结合反调试技术如debugger语句、开发者工具检测、堆栈检查、console重写等，提升攻击者分析难度。
-
推荐用data-skill-level属性表示技能等级，因其语义清晰、不影响渲染且便于JS读取；class适合控制样式，但纯数字命名需转义；aria-label不适用，meter/progress语义不符。
-
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，事件与全局对象访问亦被切断。
