-
多列布局自动换行的本质是维持流式；float无法真正实现自动换行，仅靠手动清除或宽度匹配模拟，而Grid和Flexbox才能由浏览器动态计算并响应式换行。
-
要均匀设置padding，只需写一个值如padding:12px，浏览器自动复制到四边；避免用两值、三值或混用单位，慎用calc()，优先考虑flex/gap实现真正居中。
-
JavaScript代码分割核心是动态import()实现按需加载，减少首屏体积；它返回Promise，支持变量路径，配合路由、用户行为及webpackChunkName注释可优化分包与加载时机。
-
如何用JavaScript实现内存优化？通过以下策略：1.避免全局变量，使用局部变量减少内存占用。2.及时清理定时器和事件监听器，防止内存泄漏。3.使用WeakMap和WeakSet等弱引用，减少内存泄漏。4.选择高效的数据结构，如使用Set去重。5.使用开发者工具检测和修复内存泄漏。
-
GoogleMaps嵌入后仅显示标记和路线，地图底图却呈现灰色空白，通常由API版本过期、密钥缺失或加载配置错误导致；本文详解根本原因并提供可立即生效的修复方案。
-
CSS盒模型与display属性共同决定元素布局表现。盒模型由内容、内边距、边框和外边距组成，width和height默认仅作用于内容区，可通过box-sizing改变。display属性控制元素类型：block独占一行，可设宽高，完整支持盒模型；inline在行内排列，宽高无效，垂直margin不参与布局；inline-block兼具行内排列与完整盒模型特性，常用于按钮等需精确控制的场景。现代布局中，display:flex和display:grid基于标准盒模型，但由容器主导尺寸分配，子元素仍遵循盒模
-
通过边框高亮、错误文字提示、图标标记和聚焦恢复四种CSS方式，突出表单错误并提升用户体验，结合JavaScript动态控制样式显示。
-
合法十六进制颜色值必须以#开头，后接3位（如#f00）或6位（如#ff0000）十六进制数字，不区分大小写；4位、7位、8位及缺#均无效。
-
用bunrun无法直接运行HTML文件，因其非可执行脚本；正确方式是用Bun编写极简HTTP服务（如serve({fetch})）或使用esbuild--servedir=.启动静态服务器。
-
HTML5details/summary可原生实现折叠菜单，CSS+JS可通过class切换控制动画，data属性支持多级菜单，CSS变量便于主题化，触摸设备需优化点击区域与防抖。
-
HTML5废弃了<font>、<center>等表现型标签及align等属性，须用CSS替代；语义标签如<section>需配标题，不可盲目替换div；DOCTYPE必须为<!DOCTYPEhtml>，编码声明用<metacharset="utf-8">且置于head最前；表单新属性需JS降级兼容。
-
使用grid-auto-rows:minmax(100px,auto)可使每行卡片最小高度为100px并随内容自动扩展，结合grid-template-columns:repeat(auto-fit,minmax(250px,1fr))实现列数自适应，gap控制间距，容器内卡片等宽分布且响应式调整；在移动端可将minmax最小值改为180px、减小gap和调整字体以优化显示效果，整体布局简洁灵活，真正实现内容驱动的响应式卡片墙。
-
window.scrollTo({top:0,left:0,behavior:'smooth'})是平滑回顶最稳方案，兼容Chrome61+、Firefox68+、Safari15.4+，需避免直接用scrollTop=0或遗漏behavior参数，注意锚点失效、监听节流及SSR/window未定义问题。
-
使用CSSGrid或Flexbox可高效实现响应式等宽列。1.Grid通过grid-template-columns:repeat(auto-fit,minmax(200px,1fr))自动均分容器，每列最小200px，剩余空间等比分配，配合gap设置间距，屏幕缩小时列自动换行并重新均宽；2.Flexbox通过display:flex;flex-wrap:wrap和flex:11200px使子项基础宽200px，可伸缩以填满容器，换行后仍保持等宽；3.可结合媒体查询如@media(max-width:60
-
display决定元素如何生成盒模型及排列方式，如block、flex等；position控制元素定位行为，如relative、absolute脱离文档流。前者管“怎么显示”，后者管“放哪儿”，常配合使用，先定结构再调位置。
