-
原生CSS响应式适配工作量大，因需手动写@media断点、测多设备参数、处理老浏览器flexfallback及iOSSafariviewportbug；Tailwind通过sm:、md:等前缀在构建时生成真实CSS规则，实现“声明即适配”；Bootstrap5以container-fluid和g-3等现代工具类提供开箱即用的栅格与间距方案；但字体、图片srcset、表单样式等细节仍需手动处理。
-
transition-delay不生效通常因CSS覆盖、状态未变化或写法错误；须在初始状态定义完整transition，避免仅在hover中设置delay，且确保属性可过渡、值发生改变。
-
localStorage和sessionStorage生命周期与作用域不同：前者同源永久存储，适合用户偏好；后者仅限当前标签页，适合临时数据。二者均只支持字符串，存对象需JSON序列化，且有跨源、私密模式等限制。
-
grid-template-areas是CSS中用于通过字符串网格图定义命名区域的布局属性，本质是声明式布局而非语法糖；它提升可读性、语义化和协作效率，支持用“.”表示空白，并需严格匹配子元素的grid-area值。
-
align-items:center垂直居中生效需父容器设display:flex且有明确高度（如height、min-height）；主轴为row时控制交叉轴（垂直），改为column则控制水平，此时需justify-content:center。
-
通过transition属性可让多个CSS属性同时过渡，如transition:all0.3sease或列出具体属性；常用于按钮悬停等交互效果，确保变化平滑。
-
HTML5课表有两种主流方案：一是语义化<table>实现行列对齐，支持rowspan/colspan合并单元格；二是<div>+CSSGrid/Flex实现响应式布局，配合ARIA属性保障可访问性。
-
flex子元素长文本撑破容器时，需在子元素上设word-break:break-all和overflow-wrap:break-word，并配合width/max-width及min-width:0以允许压缩换行。
-
CSSGrid用repeat(auto-fit,minmax(250px,1fr)))实现自适应列数，Flexbox通过flex-wrap与flex:11250px实现等宽响应式，旧浏览器需媒体查询分档控制，同时需注意对齐、gap适配及可访问性。
-
:active仅在元素被主动按下且未释放时瞬时生效，不支持过渡动画，需配合可聚焦元素（如button、a）或tabindex；移动端存在300ms延迟，:hover则仅适用于指针设备，两者不可替代:focus，且层叠顺序与组合逻辑需严格遵循规范。
-
首先通过文件资源管理器双击index.html直接打开；其次可用浏览器菜单导入文件；再者支持拖放至浏览器标签页预览；最后复杂项目建议用npxserve启动本地服务器运行。
-
JavaScript脚本的基本结构由语句、注释、变量声明、数据类型、函数、控制流以及对象和数组构成，其执行过程涉及浏览器解析HTML时暂停并加载脚本，通过JS引擎进行解析、编译和执行，并借助事件循环处理异步操作，编写健壮代码的最佳实践包括优先使用const和let、保持代码风格一致、合理处理错误、遵循单一职责原则、模块化设计及编写有意义的注释，现代JavaScript开发常用工具包括npm或Yarn作为包管理器，Webpack或Vite作为构建工具，Babel作为转译器，ESLint和Prettier用于
-
HTML中显示多个空格需用 实体或CSS控制： 防合并换行，但模板中易被二次转义；CSS用white-space、text-indent或padding/margin更可靠，辅以 、 等字符适配排版需求。
-
sticky导航卡顿的根本原因是频繁重排重绘，源于复杂布局、不当overflow/transform设置、scroll监听及动态样式计算等，而非sticky本身。
-
前端埋点通过在交互节点插入代码采集用户行为数据，主要分为代码埋点、可视化埋点和无痕埋点三类；通过JavaScript监听事件并上报数据，常用sendBeacon确保数据送达，结合data-track属性实现自动采集，需注意性能优化、数据脱敏、字段规范及小流量验证，以保证准确性与可维护性。
