-
font-size不支持平滑CSS过渡，应改用transform:scale()配合transform-origin实现视觉平滑缩放；响应式场景优先使用clamp()+transition:font-size；强制过渡需JS插值。
-
用padding-top百分比能锁住宽高比，因为其值按父容器宽度计算，如16:9设为56.25%；需配合position:relative/absolute、height:0及三层结构实现，避免嵌套干扰。
-
background-clip:padding-box使背景仅显示在内边距区，配合border-radius才能实现背景图圆角裁剪；border-box则默认让背景延伸至边框内侧，视觉上无裁剪效果。
-
传统下拉菜单在无障碍访问方面存在挑战，主要因其常依赖视觉交互而忽视键盘和屏幕阅读器用户的需求。原生<select>元素虽具良好无障碍特性，但样式受限，导致开发者倾向自定义实现，却常忽略内置的键盘导航与ARIA属性支持。自定义菜单若缺乏语义化结构、WAI-ARIA角色与状态定义，以及键盘交互逻辑，将无法被辅助技术正确识别与操作。为增强可访问性，需1）优先使用原生元素或严格遵循无障碍标准构建自定义菜单；2）应用role="combobox"、aria-haspopup、aria-expanded等
-
使用代理可实现数据写入时的验证，通过set拦截器检查属性值是否符合规则，如类型和范围限制，并支持将验证逻辑抽离为可复用的配置对象。
-
正确使用transition属性并优化渲染机制可解决hover卡顿。1.使用transition:background-color0.3sease,color0.3sease，避免transition:all；2.添加will-change:background-color,color或transform:translateZ(0)启用硬件加速；3.对渐变背景采用伪元素+opacity过渡，利用GPU加速；4.通过开发者工具检查重绘与帧率，减少布局重排。
-
用currentColor和CSS自定义属性代替写死颜色值可提升灵活性与可维护性，支持主题切换和语义化；currentColor动态继承文字颜色，适用于边框、图标等；CSS变量集中管理语义化颜色，:root中定义并用var()引用；二者结合可实现主题色自动同步与精细控制。
-
防抖适合用户停止操作后执行的场景，如搜索联想、resize布局、表单校验；节流适合固定频率执行的场景，如滚动加载、鼠标移动追踪、Canvas动画。
-
横向滚动主因是body默认margin和html未隐藏溢出，需设html{overflow-x:hidden}、body{margin:0}；用outline快速定位超宽元素；注意transform/fixed元素及vw单位精度问题。
-
HTML按钮无独立样式设置方法，所有视觉效果均由CSS控制；其默认样式源于浏览器UA样式，不同浏览器差异明显，且<button>与<inputtype="button">表现不完全一致。
-
用data-level属性标记层级，padding-left替代margin-left实现缩进，父级设position:relative，::after伪元素消除hover间隙，top:calc(100%+1px)，transition明确属性，body.menu-open控制滚动穿透，IE11降级为block布局。
-
<p>dataset属性用于读写HTML的data-*自定义属性，自动转连字符为驼峰命名（如data-user-id→userId），但值恒为字符串需手动转换，适用于轻量静态UI数据，不适用于敏感信息或高频更新场景。</p>
-
IE10需用-ms-flexbox整套旧语法：display:-ms-flexbox、-ms-flex-pack、-ms-flex-direction等，不支持flex-wrap和三值-ms-flex，且属性值严格限定。
-
invert()能直接反转图片颜色，原理是线性反转RGB各通道值（0↔255），并非简单变黑白；常见误判源于原图近灰度或父级CSS干扰导致滤镜未生效。
-
真实权限必须由服务端控制，前端仅作安全降级和体验提示；权限表格需基于后端数据动态渲染，禁用CSS类或HTML属性做权限判断，所有敏感操作须经服务端鉴权。
