-
flex-grow:1实现子项自动扩张需满足三条件：父容器设display:flex；兄弟项flex-grow为0或未设置；配合flex-basis和flex-shrink避免意外收缩。
-
<p>只设width:100%不够，真正响应式需同时约束相对宽度、原始宽高比和最大物理尺寸；框架类如img-fluid或max-w-full仅提供基础兜底，须配合aspect-ratio、max-h-*及srcset等协同控制。</p>
-
本文介绍如何利用CSSGrid实现8个表格在单页上的灵活、响应式网格化布局，避免传统浮动或绝对定位的复杂性，确保结构语义清晰、维护性强。
-
响应式Grid的核心是按断点主动切换网格结构，最直接方式是在@media中重定义grid-template-columns等整体属性，而非仅调整子项；需同步重置grid-template-areas、grid-auto-flow等依赖项以避免布局错乱。
-
Bootstrap的.form-control类可统一input/select/textarea样式，.form-floating实现浮动标签，状态类需与.form-control共用，尺寸应优先使用.form-control-lg/.sm而非手动调整height。
-
CSS过渡性能瓶颈在于重排重绘，width/height/top/left等布局属性易触发；应优先使用transform和opacity等GPU加速属性，并避免强制同步布局。
-
图片在Flex布局中比例失真是因flex-shrink:1默认压缩，解决方法是设max-width:100%;height:auto;并加flex:00auto;禁止缩放。
-
音频同步应以audio.currentTime为唯一时间源，在requestAnimationFrame中读取并校正，seek后需监听seeked事件重置状态；高精度需求须用WebAudioAPI配合context.currentTime；移动端需用户手势触发播放并防御性处理加载间隙。
-
ServiceWorker是运行在浏览器后台、独立于主线程的JavaScript脚本，用于拦截请求、管理缓存、推送通知并实现离线体验；它不是普通页面脚本（无法操作DOM），也不是服务器端Node.js服务。
-
推荐用object-fit控制图片缩放裁剪：cover保持比例裁剪溢出，contain完整显示留白；需配合width/height或aspect-ratio生效，IE需fallback；容器应优先锁定宽高比，避免硬编码HTML尺寸；SVG等非位图需单独处理。
-
JavaScript中移除数组假值最推荐的方法是使用filter(Boolean)；1.JavaScript的假值包括false、null、undefined、0、""、NaN共六种；2.filter(Boolean)利用隐式类型转换筛选出真值，语法简洁高效；3.也可用filter(item=>item)实现相同效果，但不如Boolean构造函数简洁；4.reduce可手动构建新数组过滤假值，但代码更冗长；5.若项目已使用Lodash，_.compact()语义明确且兼容性好，但引入额外依赖。因此，
-
JavaScript可直接在浏览器控制台运行，无需配置环境；首个小项目是点击切换“未完成”/“已完成”文字，需用textContent而非innerHTML，script应置于</body>前或用DOMContentLoaded确保DOM加载完成。
-
使用CSSGrid结合grid-auto-flow:dense可高效实现等间距瀑布流布局，1.将容器设为display:grid；2.使用repeat(auto-fill,minmax(200px,1fr))定义自适应列；3.设置grid-auto-rows:auto使行高随内容变化；4.启用grid-auto-flow:dense实现密集填充以减少空白；5.通过gap:16px统一行列间距；该方案利用Grid二维布局优势，相比浮动或Flexbox能真正实现错落有致的视觉效果，且无需JavaScript干
-
JavaScriptDate对象内部只存UTC时间戳，但方法默认按本地时区解析；创建时需用带Z或偏移的ISO字符串，显示时应明确时区并用Intl.DateTimeFormat等可控方式处理，存取数据必须统一用UTC。
-
trycatch仅捕获同步运行时错误（如ReferenceError、TypeError），无法捕获异步错误；async/await中必须await后置于try内才能捕获Promise拒绝；推荐用instanceof判断错误类型；finally中return会覆盖try/catch的返回值。
