-
使用grid-auto-flow:row可实现按钮自动按行排列，结合grid-template-columns和minmax()能创建响应式多行按钮布局，适配不同屏幕尺寸。
-
class是构造函数的语法糖，本质基于原型链和new调用；两者行为等价但class不可枚举、不提升、强制new调用；继承推荐class，简单工厂用构造函数更灵活；兼容性和维护性比语法选择更重要。
-
HTML5新增8个核心语义标签：<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>、<figure>+<figcaption>，其中前7个在HTML4中完全不存在。
-
CSS渐变不自动响应窗口变化，需用vw单位控制色标位置实现伪响应，或用@media查询切换角度；JS动态更新仅在特殊场景慎用。
-
background-color需统一用background简写或置于background之后声明；路径须以CSS文件为基准或用绝对路径；background简写顺序必须符合标准；cover完全覆盖容器，contain完整显示图像。
-
localStorage只能存字符串，存对象需用JSON.stringify()序列化，取时用JSON.parse()反序列化并加try...catch；读取前须判空防null；无自动过期机制，需手动添加时间戳并校验。
-
JavaScript是浏览器可直接执行的网页行为语言，入门应先写可见效果代码：修改文字、响应点击、控制台输出、表单校验；暂跳原型链、Promise细节、模块化等；注意ID大小写、脚本位置、undefined常见原因。
-
前端数据持久化主要有Cookie、localStorage、sessionStorage和IndexedDB四种方案：Cookie小容量且随请求发送，适合存token；localStorage大容量持久存储字符串；sessionStorage仅限当前会话；IndexedDB支持复杂结构化数据的异步操作。
-
行内元素有完整盒模型但受文本流约束；width/height无效，padding/border可见但不撑高行框，margin-top/bottom无效；inline-block可破局，需处理空格间隙和vertical-align对齐问题。
-
IE画布渲染慢的根本原因是IE9–11依赖GDI而非Direct2D，且drawImage、putImageData和clearRect触发大量同步重绘与位图拷贝；CSS缩放、非整数宽高、未复用ImageData、开启抗锯齿/阴影均加剧性能下降。
-
应使用rgba()或hsla()单独设置背景透明度，避免opacity影响文字；复杂背景用伪元素叠加遮罩；IE8降级用PNG或filter；渐变背景需提供不透明fallback。
-
hover配合transition实现属性变化的平滑过渡，需在非hover状态定义transition；复杂动画则需@keyframes+animation；常见失效原因包括overflow裁切、display切换、伪类顺序错误及移动端无hover支持。
-
使用animation-delay属性可设置CSS动画的延迟时间，支持秒或毫秒单位，正值延迟开始，负值从中间启动，配合keyframes定义动画，简写形式更推荐，多个动画可用逗号分隔延迟值，提升动效节奏与体验。
-
最可靠的方式是利用::before伪元素占位+padding-top百分比（基于父宽），内容绝对定位填充；padding-top值=(高/宽)×100%，如16:9为56.25%；需配合width/height100%与object-fit控制子内容，兼容性优于aspect-ratio。
-
响应式按钮组通过Flexbox布局和媒体查询实现，确保多设备兼容。1.使用div包裹按钮并应用flex布局；2.设置按钮样式及悬停效果；3.在屏幕宽度小于600px时切换为垂直排列并调整尺寸；4.优化可访问性与触摸体验，提升整体可用性。
