-
年历视图需用HTML表格或Grid布局实现，核心是JavaScript计算每月1日星期几和当月天数；热力图需归一化数据并用CSS自定义属性控制颜色渐变，避免硬编码与性能陷阱。
-
组件API设计应以开发者体验为核心，优先暴露语义化属性（value、min、disabled）和事件/方法控制状态，避免过度暴露内部属性；attributeChangedCallback需防批量触发与死循环；对外方法统一返回Promise；slot与事件才是核心扩展点。
-
border-radius对浮动图片完全生效，但需注意父容器overflow设置、图片显式宽高及object-fit行为，否则易因裁剪或渲染时机导致圆角“失效”。
-
Tailwind的dark变体默认不生效，因它仅是条件前缀，需手动在<html>添加dark类或配置darkMode:'class'；须用JavaScript控制类切换并持久化至localStorage，且注意focus:ring等样式在深色下的可见性。
-
gap属性虽标为可动画，但浏览器实现不一致且内联赋值破坏响应式，故需CSS变量+setProperty配合transition实现可靠动态调整。
-
模板字面量是JavaScript原生支持的反引号包裹字符串，支持${expression}变量插值、多行文本及标签函数；它非语法糖升级版，核心优势在于可读性、维护性及扩展能力远超+拼接。
-
优先用typeofSVGFilterElement!=='undefined'判断SVG滤镜基础支持，Safari9–13.1需额外测试feGaussianBlur渲染生效性；IE完全不支持；内联filter属性比CSSfilter更稳定；feConvolveMatrix等高开销原语在iOS易失效，建议fallback至CSSblur或预渲染PNG。
-
真正可靠的无缝轮播必须手动克隆首尾项、用transform位移并监听transitionend事件瞬移重置，因浏览器不会自动衔接末图与首图；DOM仅含原图时切换必跳变，克隆为n-1[1]…n-1后，视口在真实段内滑动，边界重置仅需瞬间调整translateX值，无感知。
-
overflow:hidden失效主因是父容器无明确宽高或子元素脱离文档流；需触发BFC（如display:flow-root）、避免absolute/floating、注意iOSSafari兼容性及box-sizing对可用空间的影响。
-
原生<inputtype="time">可直接唤起系统级时间选择器，轻量且语义化，但不支持自定义格式、步进限制，且不兼容IE和部分老版Safari；value必须为"HH:MM"格式，需注意时区与iOS兼容性问题。
-
NotificationAPI不能实现推送，仅负责在页面运行时显示通知；真正推送需配合WebSocket、SSE或WebPush（ServiceWorker+PushAPI）等机制实现消息抵达。
-
vw单位实现字体响应式缩放需配合clamp()或媒体查询设上下限，正文宜用更小vw值；兼容旧安卓需fallback；JS动态调rem更可控；禁用zoom/scale；字体加载用font-display:swap防跳变。
-
必须设置content属性，否则::before不渲染；需配合display、font-family等确保图标正确显示、对齐与适配。
-
微前端中虽无内置IoC容器，但主应用可构建轻量级IoC作为跨子应用服务中枢，实现统一注册、按需注入与生命周期协同，核心在于以契约先行、面向抽象编程，通过沙箱隔离与容器中转治理跨应用依赖。
-
使用gap和margin可有效控制Flex布局间距。gap属性简洁高效，适用于统一设置项目间行与列的间隙，支持单值或双值语法，且避免外边距叠加问题；而margin提供更精细控制，适合不规则布局或特定方向调整，常配合:not(:last-child)避免末尾多余间距。选择建议：整体整齐布局优先用gap，需精确控制则用margin；注意gap在inline-flex中垂直间隙受限及旧浏览器兼容性问题。两者结合使用更灵活，关键在于理解其行为差异。
