-
本文介绍如何通过classList.toggle()方法实现按钮在点击时动态切换样式（如黑白颜色交替），替代重复的add()和remove()操作，提升代码简洁性与可维护性。
-
padding是控制内容与边框距离的唯一标准方式，通过设置上下左右内边距实现内部留白，配合box-sizing:border-box可确保尺寸稳定，内联元素需配合display和line-height使用。
-
opacity过渡无反应的主因是初始值与目标值未发生实际数值变化，或transition未写在起始状态选择器中；须避免display:none、确保visibility和pointer-events协同控制交互，并注意JS触发时的状态同步与事件校验。
-
推荐用内联SVG定义clipPath并配合transform:translateX()动画实现波浪流动，或采用双伪元素+base64SVG背景图+错速位移的兼容方案，关键在于匀速位移、视差层次与无缝循环。
-
opacity动画闪烁不生效的根本原因是未设置animation-iteration-count:infinite和正确配置animation-fill-mode；默认只播放一次且回退初始状态，导致“闪一下就停”或“不动”。
-
fr单位按剩余空间分配而非容器总宽，受padding、gap、min-width影响；响应式需用repeat(auto-fit,minmax(280px,1fr))；等高靠align-items:stretch或flex-column+margin-top:auto；IE11不支持fr，应降级为Flexbox。
-
网页开发中h1应只出现一次因为它代表页面核心主题多个会降低SEO效果且影响可访问性。①h1定义页面主标题应唯一；②h2至h6用于分层子标题结构如h2为一级子标题h3为h2下的细分项；③标题层级需清晰合理组织内容有助于搜索引擎抓取和用户理解；④h1权重最高利于SEO优化关键词应自然融入标题中不可堆砌；⑤正确使用标题标签能提升用户体验与网站可访问性。
-
推荐按像素值或语义分层命名如rounded-sm（2px）、rounded-md（4px）、rounded-lg（8px）、rounded-full（50%）；单个class即可统一四角，无需拆分；常见不圆原因包括缺少overflow:hidden、被重置样式覆盖、UA默认样式干扰或Safari渲染异常；响应式推荐用clamp()动态计算圆角。
-
十六进制颜色以#开头，是RGB三通道各用两位十六进制（00–FF）拼接的CSS标准语法；#RGB为简写，每位自动复制成#RRGGBB；八位#RRGGBBAA支持透明度但IE11不兼容；应避免颜色名、误写及优先级问题，推荐使用CSS变量统一管理。
-
深克隆需递归复制对象所有层级，基础实现使用递归遍历属性，但需处理循环引用、特殊类型等问题。通过WeakMap缓存已访问对象可避免栈溢出，扩展对Date、RegExp、Map、Set等内置类型的支持提升兼容性，优化性能可采用快速路径和迭代方式。完整实现兼顾正确性与效率，或可直接使用lodash的cloneDeep。
-
图片hover时歪斜偏移因transform-origin默认为左上角，应设为center并统一写transform:skew(-6deg)rotate(2deg)；需加translateZ(0)开启GPU加速，且默认态也要有transform声明。
-
答案：通过JavaScript结合FileReader、Canvas和Blob实现图片上传前的压缩与预览。首先利用FileReader读取图片并生成base64预览，再通过Canvas绘制并缩放图片，调用toDataURL方法按质量压缩，最后将压缩后的base64数据用于预览或转为Blob上传，有效减少文件体积，提升上传效率与用户体验。
-
本文详解div不可见的常见原因（如缺少内容、误用color属性、未设置背景或尺寸），结合开发者工具调试技巧，提供可立即验证的修复方案与最佳实践。
-
移动端CSS引入应优先内联关键样式并异步加载非关键CSS，通过link标签、内联、内嵌和JS注入等方式结合响应式设计与视口控制，配合压缩、缓存、CDN等优化手段，提升首屏渲染速度与用户体验。
-
<style>标签必须放在<head>内，紧贴<title>或<meta>后；它同步阻塞解析，不支持defer/async，语法同外部CSS但禁用@import和本地相对路径；优先级取决于特异性与顺序，内联style属性（1000）高于<style>中任何选择器（如p{}为1）。
