-
使用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、开启抗锯齿/阴影均加剧性能下降。
-
flex-wrap:wrap未换行主因是父容器宽度过大或未设宽，致子项可单行排列；需设width/max-width、检查flex-shrink及white-space；justify-content仅作用于当前行内对齐。
-
本文讲解如何在AJAX请求返回的聊天消息中，依据bot布尔字段动态为消息容器添加right或默认类，从而通过CSS实现用户消息左对齐、机器人消息右对齐的聊天界面布局。
-
利用CSS伪元素结合动画可创建轻量高效的装饰效果。1.伪元素通过content插入内容，配合@keyframes实现动态效果，如边框呼吸动画；2.按钮悬停时用::after创建滑动遮罩，实现高光扫过；3.文字下划线动画通过::after控制宽度伸展；4.角标旋转动画使用::before和::after在元素四角添加旋转小点。
-
:focus-within不生效主因是父容器不可聚焦或样式被高优先级规则覆盖；需同时满足父元素设tabindex且子元素原生可聚焦或有tabindex，再通过.form-group:focus-withininput等显式选择器控制子元素样式。
-
ended事件仅在视频自然播放至末尾且未启用loop时触发；需在loadedmetadata后绑定监听，避免因时机过早或源加载失败导致失效。
