-
手机端适配核心是小屏幕下针对性调整布局，用max-width媒体查询（如768px）、viewport元标签、容器/文字自适应、display显隐切换等渐进优化。
-
依赖注入通过外部传递依赖对象降低耦合，提升可测试性。1.核心是不主动创建依赖，由容器或调用方注入；2.常见方式为构造函数、属性和方法注入，推荐构造函数注入；3.测试时可轻松替换模拟对象，隔离业务逻辑，避免真实调用；4.结合Spring等框架自动装配，@MockBean可注入mock依赖；5.建议依赖使用接口、优先构造注入、避免new创建服务类。
-
CSS的background-image无法真正按需加载图片，仅能通过image-set()实现DPR切换或媒体查询模拟响应式，但后者会预加载所有图片；最优解是改用picture+srcset语义化方案。
-
使用Flexbox与Grid结合实现响应式页脚布局，.footer采用Grid设置整体多列结构，配合auto-fit和minmax实现自适应列数，内部模块如.brand、.social等使用Flexbox进行垂直排列与对齐，通过媒体查询在小屏下切换为单列并居中显示，结合gap、justify-self等属性优化间距与定位，确保不同设备下布局合理、对齐自然。
-
:has()伪类兼容性有限，Chrome105/Firefox103/Safari16.4起支持，旧版本静默失效；不支持伪元素和状态伪类；构建工具可能误删；JS监听+class切换更可靠。
-
box-shadow浮起效果需在默认状态显式声明初始值才能触发transition；建议用0.25sease-out进效+ease-in退效；避免all过渡和小数模糊值，高DPI下优先filter:drop-shadow()。
-
最稳妥是绑定在轮播容器上并用event.target.closest('.carousel-item.active')查找目标元素，避免误触和重复绑定，同时确保active类在transitionend后更新。
-
使用Flexbox实现三栏布局，父容器设为flex且不换行，左右栏定宽，中间栏通过flex-grow:1自适应填充剩余空间，并可设置min-width和margin优化显示效果。
-
骨架屏呼吸感应通过background-position位移渐变实现而非换色；使用三段式线性渐变、background-size翻倍、shine动画控制位移，避免background-color动画引发重绘卡顿。
-
必须用:root[data-theme='dark']作为顶层限定，因其是CSS最稳定的根伪类，能确保变量安全替换、后代继承暗色上下文，并避免优先级、作用域及SSR闪烁问题。
-
语义正确的导航必须用<nav>包裹，而非<divclass="nav">；多导航可用多个<nav>但不可嵌套；CSS推荐flex布局；下拉菜单需aria-expanded和键盘支持；汉堡菜单须用aria-controls关联面板。
-
float固定宽度布局仍值得用，因其在后台管理页侧边栏+主内容区等场景下最轻量且IE8+兼容性最佳；需手动处理高度塌陷与响应式降级，推荐伪元素清除浮动，主内容用margin-left避让定宽侧栏而非calc()，IE6兼容需注意zoom:1与空白节点问题。
-
移动端轮播图核心是保障流畅交互：需禁用原生滚动干扰（passive:false、touchMoveStopPropagation:true），避免加载抖动（aspect-ratio/伪元素占位）、自动播放需响应用户操作并延迟重启（≥1.5秒）。
-
最基础的跳转是<ahref="xxx">点击</a>，但易因路径错误、协议缺失或目标页不存在而失败；应优先用绝对路径（外链带协议，内链用根相对路径），避免空href、#或javascript:void(0)等副作用写法，传参需URL编码，SPA中须用框架路由组件而非原生a标签。
-
本文介绍如何基于HTML5视频播放状态（播放中/已暂停），通过JavaScript监听事件并配合CSS类切换，实现悬停时显示不同自定义光标（如play/pause图标），无需第三方库，兼容现代浏览器。
