-
BroadcastChannel是同源页面间广播通信的原生API，支持标签页、iframe等实时消息传递；需同源且注意兼容性与隐私模式限制，适用于多标签状态同步等场景。
-
center-flexMixin是最稳的块级元素居中方案，通过display:flex、justify-content:center、align-items:center实现真正居中，不依赖宽高、不触发BFC异常、不与float冲突。
-
响应式表格优化关键在于外层容器设置横向滚动，使用.table-container包裹table并设置overflow-x:auto，配合max-width和width:max-content确保窄屏可滑动查看；进阶方案包括position:sticky固定表头或首列，提升可读性；极小屏幕可启用堆叠模式，通过媒体查询将tr改为block显示，利用data-label与伪元素content展示字段名，实现垂直布局。多数场景推荐优先采用横向滚动方案。
-
dragstart必须调用dataTransfer.setData()，否则dragover和drop不触发；dragover必须preventDefault()才允许投放；drop中需手动getData()处理数据；移动端原生drag/drop不支持，需用touch或专用库替代。
-
按钮用margin-left:auto不靠右，首先确认父容器是否设置display:flex；若已启用Flex布局，需排除flex-direction:column、justify-content干扰及子项flex:1等影响。
-
答案：通过隐藏原生复选框和单选按钮，使用CSS伪元素绘制自定义样式，结合:checked、hover和focus状态提升视觉一致性与交互体验，实现现代美观且可访问的表单控件。
-
Vue响应式系统触发的是局部更新而非全量更新，通过细粒度依赖追踪精准通知相关组件重新渲染并执行vnodediff与patch。
-
最稳妥的是justify-content:flex-start配合margin手动调间距；纯菜单项等宽用flex:1+text-align:center；垂直居中需设align-items:center并确保子元素line-height和padding对称；点击区域要让a标签display:block且宽高100%。
-
@import不适合动态切换皮肤，因其在CSS解析时固化加载顺序、无法运行时替换或卸载，JS无法操作已导入的样式表，且阻塞渲染、不支持media动态生效；应改用<link>标签配合JS控制href实现皮肤切换。
-
Vue中插槽加载状态需用hasSlot+onUpdated/watchEffect判断，或父组件控制v-if渲染；异步场景优先用defineAsyncComponent+Suspense，骨架屏置于#fallback；避免setup中直接读$slots、确保响应性、禁用骨架屏内请求。
-
grid-template-areas不能transition，因其属于离散布局结构变更，非可插值属性；可过渡的是grid-column-start/end等位置属性，配合transform实现平滑动效。
-
@import必须置于CSS文件开头，可结合媒体查询按设备特性加载样式，如打印、小屏或深色模式，避免冗余下载。但其阻塞渲染、无法并行加载且不支持预加载，性能不如<link>标签。建议优先使用<link>控制关键样式加载，仅在非核心场景（如主题、打印）用@import配合媒体查询实现条件引入，并确保语法位置正确以避免失效。
-
HTML5audio原生控件无法用CSS重排，因其非标准DOM节点；必须设controls="false"后手动实现自定义控件，并处理事件、可访问性及移动端限制。
-
外边距重叠是相邻块级元素垂直margin合并取较大值的规范行为；加border或padding可阻止父-子间重叠，因它们破坏了无分隔物条件；推荐首选display:flow-root创建BFC解决。
-
hue-rotate无效主因是SVG图标含内联fill/stroke值或非纯色；需改用fill="currentColor"或fill="none"+stroke="currentColor"，并确保CSS控制颜色，配合transition时须设初始filter值。
