-
CSS布局应先掌握display、position和文档流：display的block/inline/inline-block决定元素占行与尺寸行为；position的static/relative/absolute/fixed控制是否脱离文档流；float需处理父容器塌陷；Flex/Grid是进阶方案，非起点。
-
relative定位不触发文档流重排，兄弟元素按原位置渲染；仅改变自身视觉位置，占位不变；偏移后可能覆盖兄弟元素，需z-index控制层叠。
-
SSE是基于HTTP的服务器向浏览器推送技术，使用EventSourceAPI实现，适合日志、通知等场景。前端通过onmessage和addEventListener接收消息，后端以text/event-stream类型发送数据，每条消息以\n\n结尾，支持事件类型与自动重连。Node.js可用Express写入流式响应，Nginx需关闭缓冲，服务端可发心跳防超时，消息可通过id标识与Last-Event-ID恢复，实现简单高效的实时更新。
-
<hr/>是表示内容逻辑分隔的语义化空元素，非装饰用途；样式必须用CSS控制（如border-top或background），禁用废弃属性；滥用会损害结构与无障碍，替代方案<divclass="divider">更灵活可控。
-
AJAX是用JavaScript发起HTTP请求、不刷新页面更新局部内容的实践方式，核心是XMLHttpRequest或fetch()，关键在“异步”和“局部更新”；推荐优先使用fetch()，因其语法简洁、基于Promise、天然支持async/await，而XMLHttpRequest需手动处理状态码、事件和响应体转换。
-
line-height单行居中有效而多行失效，因其仅作用于每行内部，无法控制多行文本整体垂直居中；flexbox的align-items:center是多行居中标准方案，需容器有明确高度且子元素为直接子元素。
-
drawImage缩放本质是控制图片在画布上的绘制位置和尺寸，5参数仅缩放，9参数先裁剪再缩放；需注意变换矩阵累积、设备像素比适配及坐标计算逻辑。
-
Flex布局中，justify-content和align-items控制主轴与交叉轴对齐，实现整体居中或分布；当需精确定位特定元素时，可结合position:relative或absolute进行局部调整。例如，flex居中容器内元素可通过relative上移10px，或在relative定位的父容器中使用absolute将角标固定于右上角。注意避免滥用absolute以免破坏流式布局，确保父容器尺寸明确，合理使用z-index控制层叠。两者协同可实现灵活精准的界面布局。
-
Map是JavaScript中比Object更可靠灵活的键值映射结构，支持任意类型键、严格相等比较、原生迭代、顺序保证及高效增删操作。
-
必须为::before/::after设content:""、position:absolute，button设position:relative且z-index:0，伪元素加z-index:1和pointer-events:none；动画用transform（非width/height），延迟用transition-delay，移动端加-webkit-tap-highlight-color:transparent并避免过短时长。
-
答案：通过transition控制background-color可实现平滑渐变过渡，常用方法包括纯色过渡、伪元素模拟、CSS变量配合JS及keyframes动画。
-
flex-wrap用于控制弹性子元素是否换行，取值为nowrap（不换行）、wrap（向下换行）和wrap-reverse（向上换行），常与flex-direction配合使用，可通过flex-flow简写属性统一设置，实现响应式多行布局。
-
float布局在响应式图片廊中能用但不推荐，因其易引发清除浮动失效、高度塌陷、间隙错位及底部对齐失控等问题；现代方案首选grid，次选flex，仅在必须兼容IE9及以下时才考虑float+@media组合。
-
:focus无反应最常见原因是元素默认不可聚焦，需设tabindex="0"并确保真正获得焦点；:focus-visible更精准但兼容性有限；主动聚焦失效常因DOM未就绪、disabled/ShadowDOM等；自定义焦点样式需避免outline全局重置并提升选择器权重。
-
Tailwind的bg-gradient-类仅控制渐变方向，必须与from-/via-/to-颜色类组合使用才能生效；单独使用或拆分到父子元素均无效，且需注意暗色模式下对应颜色类也要加dark:前缀。
