-
外边距合并不是bug而是CSS规范行为：垂直相邻块级元素的margin-top/margin-bottom会取较大值合并。典型场景有相邻兄弟元素、父子塌陷、空元素自合并；推荐用BFC（如display:flow-root）、统一设margin-bottom、gap或微调padding/border来隔离。
-
<picture>+srcset+sizes是唯一可靠方式，让浏览器仅下载适配设备像素比和视口宽度的图片；WebP/AVIF需置于<source>顶部并确认浏览器支持；体积优化依赖编码参数而非单纯转格式；服务端响应头与CDN行为直接影响前端方案生效。
-
JavaScript闭包是函数访问外部作用域变量的能力，即使外部函数已执行完毕。它基于词法作用域和作用域链机制，通过函数嵌套、内部函数引用外部变量并被外部保留而形成。例如outer函数返回inner，inner持续访问outer的count变量，实现状态持久化。闭包可用于模拟私有变量，如IIFE封装privateCount，仅暴露increment和getValue接口，保护数据不被外部直接访问。在事件绑定中，闭包解决循环索引共享问题，通过自执行函数为每个按钮保存独立的索引值。此外，闭包支撑柯里化（如ad
-
iOSSafari直到16.4才支持inputmode，仅部分值有效且只影响键盘类型；AndroidChrome82+支持较好，但国产浏览器基本忽略；需配合type="text"使用，优先用inputmode="numeric"而非type="number"。
-
video标签默认不预加载，preload设为"auto"才可能提前拉流浏览器对的预加载行为是保守的，尤其在移动网络或低配设备上，默认往往等同于preload="metadata"——只拿封面和时长，不下载视频主体。卡顿常从第一帧就开始，根源就在这儿。实操建议：preload值选"auto"（不是"true"或"yes"，这些无效）；但注意：iOSSafari无视该属性，只在Wi-Fi下才可能预加载，这点必须接受如果内容敏感或流量成本高，可降级为preload="me
-
html2canvas渲染空白或白图的主因是跨域资源加载失败、不支持部分CSS属性及DOM状态异常；需确保元素可见、图片同源或配CORS、禁用transform/filter等特性，并等待字体加载完成。
-
React中应封装highlightText函数安全高亮文本，用语义化<mark>标签仅限搜索高亮等场景，避免XSS和a11y问题，需正则转义、useMemo缓存、显式样式重置。
-
HTML中换行符导致文字变两行，因浏览器默认将<br>、\n、块级元素间空白视为换行；可通过display:inline/inline-block、删HTML换行、Flex布局等方案合并为单行。
-
CSS过渡与transform结合可实现流畅交互动画。1.transition控制变化过程，transform定义形变效果；2.hover时scale实现按钮放大，rotate完成图标旋转；3.多函数组合如scale(1.05)rotate(5deg)增强视觉层次；4.配合transform-origin和缓动函数优化动画表现，提升用户体验且性能高效。
-
通过functions.runWith()在代码中声明timeoutSeconds和memory参数，可持久化配置Firebase函数的运行时长与内存规格，避免部署后被重置为默认值。
-
z-index用于控制定位元素的堆叠顺序，值越大越靠前，需配合position使用，且受堆叠上下文限制，父级上下文层级低时子元素高z-index也可能被覆盖。
-
使用Bootstrap或TailwindCSS可快速实现轮播图：Bootstrap提供内置组件，通过.carousel类和data属性即可构建响应式轮播；Tailwind需结合Flex布局与JavaScript控制translateX实现自定义轮播，灵活性高。
-
HTML是构建网页结构的标记语言，通过标签、元素、属性和DOCTYPE定义语义与层级，具有纯文本、语义化、跨平台和容错等特点，广泛应用于静态网站、邮件模板、Web应用骨架及无障碍访问场景。
-
旧浏览器仅支持#rrggbb或#rgb十六进制颜色，应避免rgba、hsl等现代写法；优先用小写缩写hex（如#f63），禁用命名色与4位写法；透明度可用alpha滤镜或半透图降级；自动化工具可检测非hex颜色风险。
-
transition不能单独设置移出动画，它只响应属性变化；正确做法是将transition声明写在:hover中实现慢入快出，基础状态不写以确保移出时瞬间回弹。
