-
absolute元素默认宽度不随内容撑开，需通过left/right、显式width或min-width等手段控制；其撑宽效果依赖position非static的包含块，父容器常需设position:relative。
-
HTML5无动态布局切换API，本质是JS驱动DOM操作与CSS控制；推荐用classList切换预设语义化布局类，慎用innerHTML，按需加载可用template或fetch+DOMParser，并同步管理状态。
-
::marker是修改列表标记最干净的方式，仅作用于标记本身，支持content、color、font相关属性，不支持margin/padding/background；需配合counter-increment使用，注意浏览器兼容性与字体支持。
-
推荐使用原生ClipboardAPI实现剪贴板操作，需在用户触发事件（如click）中调用且页面处于安全上下文；readText()读纯文本，writeText()写文本，均返回Promise并需异常处理，兼容性方面writeText()优于readText()，iOSSafari对后者支持较晚。
-
用::before实现加载动画需三步：父元素设position:relative；content用零宽空格或字体图标Unicode；通过.is-loading类控制显示与@keyframes动画。
-
HTML页面本身不耗内存，但JS、DOM节点、图片等资源会真实占用内存；DOM过多致内存飙升与重排成本激增；需用虚拟滚动、清理监听器、懒加载图片、销毁SPA组件资源，并通过堆快照排查泄漏。
-
Less中&必须紧跟选择器后且用空格隔开才能正确拼接父名，仅代表紧邻上一级选择器，不跨层，伪类伪元素需写全（如&:hover），BEM修饰符需注意拼接逻辑，不兼容CSS原生@nest，嵌套过深影响可维护性。
-
应采用CSS与JS组合策略：动态修改viewport的maximum-scale、确保输入框font-size≥16px或设置-webkit-text-size-adjust:100%，并绑定focusin/focusout事件精准控制缩放。
-
防抖是让函数在最后一次触发后延迟执行，而非简单延后；用于搜索框可避免频繁请求，核心是每次触发前清除上一轮定时器；不适用于需实时响应的场景，实现时需注意定时器变量声明、引用保存及业务时机判断。
-
flex:1在li上无效是因为ul未设display:flex；必须先让ul成为Flex容器，再对li使用flex:1（即flex-basis:0）才能实现等宽分配。
-
合理设置margin并结合清除浮动解决间距问题，如使用margin-right配合:last-child去除末项间隙，或通过.box+.box添加左间距避免首项空白，同时用clearfix等方法清除浮动防止父容器塌陷。
-
用DevTools实时调试比手写或在线生成器更可靠，box-shadow参数顺序为h-offsetv-offsetblur-radiusspread-radiuscolor，易错点是混淆后两者，多阴影逗号分隔且从左到右渲染。
-
await会阻塞后续代码执行直到Promise完成，而.then()则立即返回并异步处理结果；二者不可混用（如awaitf().then(...)），否则语义混乱且失去await的同步化优势。
-
JavaScript深拷贝是创建内存独立的新对象，修改互不影响；常用方法包括JSON.parse(JSON.stringify())（限纯数据）、structuredClone()（现代推荐）、手写递归（可控性强）、lodash.cloneDeep()（生产首选）。
-
伪元素在.form-group上不显示垂直线，根本原因是其默认display:inline且父容器缺position:relative；须设display:block、position:absolute并配合top/bottom:0撑满高度。
