-
现代三栏布局应弃用浮动圣杯布局，改用Flexbox或Grid：前者适合主内容高度多变、需DOM与视觉顺序分离的场景，后者适用于等高、统一间隙及语义优先的需求，二者均具备良好响应式支持与可维护性。
-
CSS选择器无法向上选择父元素，这是由规范决定的设计限制；:has()是唯一例外但支持有限且性能开销大，真正需要父子联动时应使用JavaScript。
-
onpaste属性支持所有HTML元素，但仅input、textarea默认触发；其他元素需设contenteditable="true"，且不能被overflow:hidden或pointer-events:none拦截；读取clipboardData须在用户手势同步上下文中进行，否则为空。
-
viewportmeta标签缺失或写错位置媒体查询断点不生效，最常见、最隐蔽的原因就是标签没写、写错位置，或属性值不完整。它不是可选的“增强体验”配置，而是媒体查询能运行的硬性前提。浏览器在移动端默认以桌面视口（通常是980px）渲染页面；没有这个标签，@media(max-width:768px)永远不会触发——因为视口宽度根本不是768px。必须放在内，且在所有CSS引入之前（包括标签前）正确写法只有一行：常见错误：name="viewpoint"（拼写错）、conten
-
滚动驱动旋转必须用scroll+requestAnimationFrame实时计算角度并settransform:rotate()，禁用CSSanimation；需显式设置transform-origin并归一化映射滚动进度到0–360deg，否则会出现卡顿、跳帧、中心漂移等问题。
-
直接用click监听树节点会失效，因懒加载节点初始无DOM；应使用事件委托绑定到容器，用closest()找目标按钮并校验disabled状态。
-
JavaScript操作DOM的核心是精准获取元素并用合适方法更新，常用获取方法包括getElementById、querySelector等；更新内容需区分textContent与innerHTML；修改属性推荐classList和dataset；增删节点需基于父元素操作。
-
Less中相对路径资源404的根源是编译时按less文件位置解析，而运行时浏览器按CSS位置请求；应统一用public目录或配publicPath+less-loaderpaths确保路径对齐。
-
sticky失效主因是父级样式干扰而非DOM层级过深，关键在于overflow非visible、固定height或flex/grid容器未触发滚动上下文，需用DevTools逐层检查计算值并针对性修复。
-
加border-top:1pxsolidtransparent能阻止外边距合并，因其满足计算后border-width>0且属于块级盒边界框两个硬条件，从而在margin间创建非空物理边界中断合并；虽视觉透明但增加1px盒模型高度。
-
使用grid-template-areas可定义命名网格区域，通过媒体查询在不同屏幕下重新排列布局。例如桌面端三列布局可变为移动端单列堆叠，隐藏次要区域并调整行列尺寸，结合minmax()与fr单位实现弹性自适应，提升可读性与维护性。
-
RxJS操作符是纯函数，用于创建、转换、过滤、组合Observable。核心分类包括：of、from等创建类；map、switchMap、mergeMap等转换类，实现数据映射与流切换；filter、debounceTime、throttleTime等过滤类，控制值的输出频率；combineLatest、zip等组合类，融合多流数据；catchError、retry等错误处理类，保障流的稳定性。其中，switchMap常用于搜索防抖，mergeMap支持并发请求，debounceTime减少高频事件触发，
-
自定义元素名必须含短横线（如my-button），constructor中不可操作shadowRoot，需在connectedCallback中渲染；attributeChangedCallback需配合observedAttributes使用；slot内容更新需手动监听slotchange事件。
-
CSS变量应只存纯路径字符串，如--bg-path:"/img/1.jpg"；若存url("/img/1.jpg")会导致background-image:var(--bg)失效，因浏览器不二次解析字符串。
-
原型链的终端是null，它仅作查找终止符而非继承参与者；Object.prototype才是继承实际终点，提供toString等通用方法；null是规范规定的[[Prototype]]合法原始值边界，确保查找逻辑明确终止。
