-
absolute子项在flex容器中不认top/left，是因为flex容器默认position:static，absolute需最近已定位祖先作为参考系；必须显式设position:relative等才能使其以flex容器为定位上下文。
-
Vue单文件组件中<style>默认全局生效，需加scoped属性实现局部作用域；::v-deep()可穿透一级子组件样式，多<style>标签可混用但行为不同，lang属性和原子化CSS工具会影响其行为。
-
flex-direction决定主轴方向并影响对齐属性作用轴，row为默认水平左→右，row-reverse、column、column-reverse分别反转或垂直排列；flex-wrap控制换行，nowrap强制单行，wrap/wrap-reverse允许折行且justify-content仅作用于当前行；align-content用于多行在交叉轴的对齐；order按数值升序调整渲染顺序但不改变DOM结构及无障碍访问；flex-flow是direction与wrap的简写，建议初学者显式声明以避免调试
-
多行文字省略号不能只用text-overflow:ellipsis，因其仅支持单行且需white-space:nowrap和overflow:hidden，会阻止换行；多行截断应使用display:-webkit-box、-webkit-box-orient:vertical和-webkit-line-clamp组合方案。
-
ref适用于基础类型和模板解构，reactive专用于对象/数组；toRefs解构保持响应性，readonly创建只读代理，shallow系列减少深度监听开销；computed声明派生状态，watch响应明确来源，watchEffect自动追踪依赖；markRaw避免对第三方实例响应式污染。
-
使用outline而非border可避免布局变化，结合CSS动画实现无干扰的视觉反馈。通过@keyframes控制outline-width、offset和opacity，创建按钮悬停脉冲与输入框焦点高亮动画，提升键盘导航体验与可访问性。需注意旧浏览器兼容性、避免过度闪烁，并确保颜色对比度达标，以兼顾性能与用户体验。
-
absolute元素的top:10%相对于其最近的非static定位祖先（position为relative/absolute/fixed）的contentbox+padding高度（clientHeight），若无此类祖先则相对于初始包含块（如body或视口）；该参照物必须有可计算高度，否则百分比归零。
-
key必须是稳定唯一的标识，如item.id；用index会导致DOM复用错乱，引发输入内容错位、状态丢失等问题。
-
fr单位未让子项撑满容器的主因是子项默认min-width:auto阻止收缩，需显式设min-width:0解除限制；grid-template-columns定义轨道分配，子项宽度由轨道与自身约束共同决定。
-
本文详解如何构建一个轻量、无依赖的年月选择器，重点解决初始化时年份显示错误（如默认显示2024而非2023）及当前年份被误禁用的问题，核心在于修正初始化顺序与状态同步逻辑。
-
JavaScript代码分割和按需加载的核心是动态import()语法配合打包工具自动分包，减少首屏体积；支持await/.then、React.lazy+Suspense、chunk命名与预加载策略，并需注意SSR环境兼容性。
-
通过JavaScript操作link标签或切换CSS类可实现动态换肤。1.修改link的href属性直接替换样式文件；2.动态创建link标签并插入head以加载新主题；3.切换时先移除旧link避免冲突；4.推荐使用CSS类名切换实现轻量主题变更，性能更优。路径正确与防重复加载需注意。
-
width设值、height:auto时浏览器按原始宽高比等比缩放图片，不裁剪不拉伸；object-fit:cover则等比缩放并裁剪以完全覆盖容器，需容器有明确宽高。
-
HTML中空白字符（空格、Tab、换行）默认被合并为单个空格；可用 实体或white-space:pre/pre-wrap实现可控空白；DOM中Tab仅影响可读性，不参与渲染。
-
<p>play命令默认不支持流式播放大音频文件，因SoX全缓冲模式将整个文件解码进内存；应改用soxfile-talsa-输出PCM流直通ALSA硬件设备，或加trim截取片段验证，避免内存溢出与卡顿。</p>
