-
contain:layoutpaint是首选组合，因它同时封锁布局计算和绘制边界，使浏览器将容器内变化视为独立上下文，避免影响外部；但需容器尺寸稳定、子元素不越界且浏览器支持。
-
ins标签用于标记HTML文档中新增的文本，常与del标签配合展示修改痕迹；2.它通过默认下划线样式突出插入内容，适用于协作编辑、版本控制等需展示修改历史的场景；3.可使用cite和datetime属性提供插入文本的上下文信息；4.与mark标签的区别在于语义不同：ins表示文档修改中的新增内容，mark用于标记当前上下文中的重点内容；5.可通过CSS自定义ins标签的样式，如去除下划线、设置背景色和文本颜色，以符合设计需求。
-
用position:fixed实现右下角悬浮按钮的核心写法是直接设置position:fixed、right:20px、bottom:20px、z-index:1000，并避免父元素有transform/filter/perspective；常见失效原因是父级创建了新的containingblock；移动端需用env(safe-area-inset-bottom)适配。
-
微任务队列在宏任务结束后立即清空所有任务，包括过程中新加入的；常见来源有Promise回调、MutationObserver、queueMicrotask等，执行优先级高于宏任务但不触发渲染。
-
BEM变量名必须完整映射DOM结构层级：block→element→modifier三层语义，加命名空间前缀（如--ui-），声明在:root或[data-theme]下，禁用PurgeCSS误删，确保结构标识与值容器双重角色可控。
-
最稳妥结构是用语义化标签：<section>包裹整个面板，每条待办用<article>，标题与状态放<header>，操作区放<footer>，内容放<p>等语义元素。
-
九宫格布局用display:grid配合grid-template-columns:repeat(3,1fr)和grid-template-rows:repeat(3,1fr)即可实现，需注意显式定义行列、合理设置gap与object-fit，响应式可用repeat(auto-fit,minmax(300px,1fr)))。
-
justify-content:space-evenly不生效的首要原因是父容器未设置display:flex；它将总空白均分给n+1个间隙，实现首尾与中间间隙完全等宽。
-
子元素尺寸不一致源于未显式控制flex-grow/shrink，默认行为导致浏览器自动分配；应设flex:1或指定grow/shrink值，并用min-width:0防内容撑开，关键控件设flex-shrink:0防压缩。
-
CSS变量可动态控制background-position，需在:root或选择器内声明带单位的变量，用var()调用并配合calc()计算，多背景图时须一一对应变量，注意兼容性与生命周期管理。
-
只倾斜容器不扭曲文字需用伪元素或反向skew抵消：对父容器skew()，子容器用skew(-xdeg)；注意热区仍为原矩形，可用clip-path修正。
-
<p>Generator配合yield实现的是递归式生成器、非递归式执行的扁平化迭代，利用暂停/恢复机制避免调用栈溢出，空间复杂度降为O(d)；yield是委托语法，实现链式遍历，无需手动维护栈。</p>
-
直接用ShadowDOM构建插件沙箱需协同设计结构、加载、样式、边界四方面：创建open模式的宿主容器挂载影子树，异步加载资源并注入shadowRoot，剥离全局副作用样式，通过:host/::slotted和composed事件实现可控跨边界通信。
-
document.elementFromPoint是获取视口指定坐标最顶层可见元素的原生API；它依据渲染层叠顺序返回元素，要求x/y为视口内整数坐标，受pointer-events、visibility、iframe跨域及DOM未渲染等因素影响。
-
Array.from方法主要用于将类数组对象或可迭代对象转换为真正的数组。1.它能将DOM节点集合等转换为数组，方便操作。2.支持在转换过程中进行映射操作，如对Set进行转换并乘2。3.在大数据集时需注意性能问题，可能需使用生成器。4.结合其他数组方法如map、filter，可进行复杂数据处理。
