-
使用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图标），无需第三方库，兼容现代浏览器。
-
真正可控的仪表盘卡片重排是用grid-template-areas显式声明语义化区域布局，通过媒体查询和预置class切换适配多尺寸、多状态，避免JS直接操作样式引发重排与可访问性问题。
-
答案：一个高效的发布-订阅模式通过事件中心实现解耦，支持订阅、发布、取消及一次性监听。使用Object.create(null)提升性能，try-catch隔离错误，精确移除回调避免内存泄漏，适用于组件通信与状态通知场景。
-
应使用语义化模块职能类名，如hero、features、testimonials；避免数字编号、位置命名或泛化名称；变体用BEM修饰符（如hero--dark）；统一小写连字符；类名补充HTML语义缺失，不依赖标签选择器。
-
HTML代码混淆对防止盗用或爬虫基本无效，真正有效的是服务端控制、访问限频和内容动态化；混淆可被开发者工具一键还原，不改变语义，不影响XPath/CSS定位，且增加解析开销与维护风险。
-
浏览器关闭时前端事件不可靠，应采用“最后活跃时间戳+服务端心跳校验”策略，通过定期上报用户在线状态并设置超时阈值，实现准确、无侵入的离线判定。
-
HTML5video触发画中画需满足：视频正在播放且由用户手势同步调用requestPictureInPicture()；移动端须加playsinline属性，跨域资源需CORS支持，禁用disablePictureInPicture，并监听enterpictureinpicture/leavepictureinpicture事件。
-
PerformanceAPI是浏览器原生高性能监控接口，支持通过performance.getEntriesByType('navigation')获取导航时间点、resource/paint类型捕获资源与渲染时机，推荐用sendBeacon上报并兼容降级处理。
