-
九宫格布局用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，可进行复杂数据处理。
-
CSSGrid中“置顶”需用z-index配合position（如relative），而非grid-row或order；grid-row仅控制行轨道位置，order会破坏可访问性与布局稳定性；绝对定位适用于悬浮元素，但需确保父容器有position:relative。
-
用Flex实现遮罩层+居中弹窗的核心是：遮罩层设position:fixed+display:flex+justify-content/align-items:center实现全屏覆盖与居中，弹窗无需绝对定位即可被父容器居中，配合背景、圆角、阴影提升视觉效果。
-
<inputtype="hidden">是唯一合法隐藏域，必须设type="hidden"、非空name、字符串value；value需转义，复杂数据用json_encode/json_decode；同名多字段自动为数组；值可被篡改，服务端须校验。
-
SVG图标颜色需用fill而非color，且仅内联SVG可用CSS控制；设fill:currentColor可继承父级color，实现主题切换等动态效果，但需删除SVG源码中的固定fill属性。
-
绝对定位元素脱离文档流，不参与盒模型计算且不影响其他元素布局；其定位参照最近非static祖先（含relative/absolute/fixed/sticky），宽高由top/bottom/left/right及width/height声明优先级决定，百分比值相对包含块，z-index受限于层叠上下文。
-
text-align仅对块级容器及其内部行内内容生效，不能直接居中行内元素或块级子元素；需通过父容器设置、display转换或flex/grid布局实现居中。
