-
使用auto、min-content、max-content和minmax()可实现CSSGrid行列自动适应内容。1.grid-template-columns和grid-template-rows设为auto时，行列尺寸由内容决定；2.min-content使列宽适应内容最小需求，max-content按内容最大宽度展开；3.minmax()可设定范围，如minmax(max-content,200px)让列至少容纳内容但不超过200px；4.结合fr单位与auto可实现弹性响应式布局，容器动态分配剩
-
弹性盒子换行间距错乱主因是gap与flex-wrap配合不当或子项flex-shrink压缩宽度；应使用原生gap而非margin模拟，并设子项flex:00auto禁用收缩，注意gap不控制首行顶边/末行底边间距。
-
contenteditable元素需用innerHTML或textContent读取内容，不可用value；获取纯文本应标准化换行与空白；监听编辑需组合input/paste/drop/keydown或MutationObserver；判空需清理HTML及特殊空格字符。
-
Vue模板经编译器解析为AST、优化标记静态节点、生成渲染函数，返回VNode；数据响应式变化触发re-render，新旧VNode通过patch高效比对更新DOM。
-
Emmet通过缩写快速生成HTML和CSS代码，提升前端开发效率。输入div.container生成带class的div，#header创建id元素，ul>li5生成五个列表项，div>p>a实现嵌套结构，img[src=logo.pngalt=Logo]添加自定义属性，h1{HelloWorld}插入文本内容；CSS中m10展开为margin:10px，p5-10生成padding，bgc输入background-color，fw900转font-weight，d:n写display:
-
默认content-box下width仅指内容区，padding和border额外增加总宽；切换border-box后width表示总宽，padding和border向内压缩。
-
现代报纸布局首选column-count+column-gap配合break-inside:avoid；它原生支持、语义清晰、响应式友好、打印适配佳，直接对文本流分栏，避免float清浮动和grid手动切块问题。
-
Bootstrap警告框自动淡出需同时满足：HTML中含fade和show类、data-bs-dismiss属性、button关闭按钮；JS中须监听closed.bs.alert事件并preventDefault，再调用alert('close')，否则元素被删无法复用。
-
移动端点击高亮框是iOS及部分Android浏览器中手指点击按钮或链接时出现的半透明灰色轮廓，属默认可访问性反馈；可通过-webkit-tap-highlight-color:transparent彻底关闭，但需同步补充:active样式及语义化属性以保障可用性与可访问性。
-
一个能实际提交的HTML登录页面必须包含：<formaction="/login"method="POST">骨架；name="username"和name="password"的对应输入框；type="submit"按钮；密码框必须用type="password"；关键autocomplete、autocapitalize等语义属性不可省。
-
纯CSS手风琴核心是checkbox:checked配合兄弟选择器控制max-height过渡动画，input须与面板同级且在前、display:none，label[for]关联触发，用max-height而非height/display实现可过渡的折叠效果。
-
HTML中普通空格不显示是因为浏览器默认合并连续空白符且忽略首尾空格；可用 、white-space属性或检查iframe上下文解决。
-
在表单验证中，若在blur回调内直接调用focus()，会导致Chrome等浏览器重新触发blur，形成无限弹窗+聚焦循环；正确做法是将focus()延迟到当前事件循环结束后执行（如使用setTimeout(fn,0)）。
-
play()不接受音量参数，因音量是媒体元素独立属性，需通过volume属性设置（0.0–1.0），且必须在用户交互上下文中操作，否则被浏览器忽略。
-
用响应式状态实现全局Socket断线重连提示，核心是封装语义化连接状态对象（connected、reconnecting等），通过ref/provide或Pinia共享，配合Teleport全局提示组件与watchEffect自动驱动重连逻辑和UI更新。
