-
答案：通过transition和transform结合实现平滑动画。1.transform用于元素移动、旋转、缩放，transition控制变化过程；2.示例中按钮悬停时translateX位移并scale放大，配合0.3s过渡；3.进阶用法如card悬停时translateY上移并rotate旋转，使用cubic-bezier增强动效；4.建议控制过渡时间在0.2s–0.5s，优先对transform和opacity做动画以提升性能，避免布局重排，可配合will-change优化渲染。
-
line-height单行居中有效而多行失效，因其仅作用于每行内部，无法控制多行文本整体垂直居中；flexbox的align-items:center是多行居中标准方案，需容器有明确高度且子元素为直接子元素。
-
推荐使用normalize.css或modern-normalize统一浏览器默认样式，全局设置box-sizing:border-box，定义跨平台字体栈并显式声明line-height，Grid/Flex布局需用@supports降级，且必须配置viewport元标签。
-
persist()仅申请免驱逐特权，不存数据、不操作DOM、不替代localStorage；现代浏览器因origin低价值、缺少用户交互或处于临时存储环境常返回false或静默失败，需用persisted()确认真实状态，并通过配额监控、分库、压缩等设计提升抗驱逐能力。
-
HTML不压缩图片，只引用文件；Canvas压缩须先缩放尺寸再设0.7～0.8质量，srcset必须配sizes，WebP需用<picture>加fallback，原始图编码状态影响压缩效果。
-
动态切换多主题样式需通过JavaScript精准替换id="theme-css"的link标签href属性，预加载CSS避免闪动，监听onload/onerror处理加载状态，并用localStorage保存用户偏好实现自动应用。
-
top不生效90%因position为static；需显式设relative/absolute，注意flex/grid对齐覆盖、transform创建新层叠上下文及dialog需手动设position。
-
navigator.clipboard.writeText()仅支持text/plain格式，无法保留超链接、加粗等样式，因外部应用（如Word、Notes）只解析text/html或CF_HTML；需用write()配合含text/plain与合法text/html（含StartFragment等结构）的ClipboardItem实现富文本复制。
-
Less中不存在isdefined函数，它不支持运行时变量存在性判断；正确做法是在声明时提供默认值或用if()配合已声明的null变量做值判断。
-
HTML乱码主因是文件编码非UTF-8无BOM，其次为metacharset位置/写法错误、HTTP响应头覆盖及表单/AJAX传输未声明UTF-8。
-
纯HTML无法实现地图路线规划，因其仅负责结构标记，缺乏坐标计算、路径算法、地图渲染等能力，必须依赖高德等地图SDK或Leaflet+OSRM等组合方案。
-
:invalid伪类可自动为未通过原生验证的表单控件（如required、type="email"等）添加红边框；需配合:placeholder-shown或:user-invalid延迟提示，并可用:valid提供绿色正向反馈。
-
min-content是内容不换行时的最小宽度，如英文最长单词或整段URL撑开的宽度；max-content是内容完全不换行所需最小宽，无视父容器限制，易致溢出。
-
最可靠方法是用oninput事件配合正则实时过滤非数字字符并每4位加空格：先replace(/\D/g,'')清除非数字，再match(/.{4}/g)切分，最后join('')；需用setSelectionRange修复光标跳变问题。
-
最可靠方案是浏览器原生打印（DevTools→Ctrl/Cmd+P→另存为PDF）或Puppeteer服务端渲染；html2canvas+jsPDF因截图原理存在字体、样式、跨域及模糊等多重缺陷需慎用。
