-
使用align-items可解决卡片布局中文字与图片对齐不齐问题。1.align-items控制交叉轴对齐方式，默认stretch拉伸，常用center实现垂直居中；2.将卡片设为flex容器并设置align-items:center，使图片与文字整体垂直居中；3.多行文字需包裹在div内，作为整体参与对齐；4.多卡片布局中可通过align-items:stretch统一高度，或用align-self单独调整某项对齐；5.配合justify-content与gap可实现整齐美观的布局效果。掌握这些细节可高
-
应选择UTF-8编码保存HTML文件。UTF-8支持多语言字符，确保跨平台一致性；在记事本中点击“文件”→“另存为”→选择“UTF-8”编码→命名并保存为“.html”格式；仅当文件全为ASCII字符且环境限制时才考虑ANSI。
-
nth-of-type能选中子元素里的第n个p，但只按同类型兄弟元素位置计数，不考虑嵌套层级或非目标标签节点。
-
Sass数学运算不支持单位混合计算，需显式统一单位；除法须加括号；颜色调整慎用lighten()/darken()，推荐mix()或adjust-color()；rgba()的alpha必须为0–1小数，建议用opacify()/transparentize()；自定义函数须用type-of()校验颜色类型。
-
<p>用transition-delay按索引动态设延迟（如index*0.1s）可实现卡片依次入场；推荐JS设置style.transitionDelay或CSS自定义属性配合:nth-child预设档位，避免写死或使用transition:all；优先用transform和opacity过渡以保障性能。</p>
-
background-origin设为padding-box时，背景图从内边距左上角开始定位，导致padding存在时background-position:center不居中；它定义定位参考系原点，与background-clip（控制裁剪范围）作用独立。
-
transition:all会降低动画性能、引发兼容性问题并增加维护成本，应仅对明确需要过渡的属性单独声明，避免在高频交互和移动端滥用。
-
outline不占布局空间，仅作视觉参考；不支持单边、圆角或box-sizing计算；适合焦点高亮与盒模型调试，但需注意可访问性及渲染差异。
-
grid-column和grid-row的起止线必须用/分隔，单独写如grid-column:1仅设起始线，结束线默认+1；跨区需显式写如1/4；空格分隔会被忽略；span和命名区域更适配响应式。
-
transition对display无效，因display是离散属性，浏览器无法插值；应改用opacity+visibility组合，并配step-end实现平滑过渡。
-
ContextAPI用于解决多层嵌套组件间状态传递难题，避免propdrilling。它适用于用户认证、主题切换、多语言等全局状态管理，通过Provider提供数据，后代组件用useContext消费，实现跨层级通信。应封装Context逻辑，拆分不同功能的Context，结合useReducer或useState提升可维护性。注意性能优化：对value中对象或函数使用useCallback、useMemo保持引用稳定，避免频繁重渲染；高频更新状态不宜用Context。合理使用可显著提升React应用的可
-
WebWorkers不能直接操作DOM，因其运行在独立线程且无window、document等浏览器API，仅支持setTimeout、fetch等有限接口；通信依赖postMessage/onmessage，数据需序列化，大对象应使用transferable优化。
-
优先使用gap控制容器间距，padding调节内容留白，margin处理特殊外边距，并结合@mediaquery在不同屏幕尺寸下调整：.card-container用gap实现网格间距，移动端逐步减小gap、padding和margin值，确保视觉节奏一致，提升响应式体验。
-
PHP无法通过服务端代码直接设置HTML文件输入框的value或预选本地文件，这是浏览器安全策略所禁止的；正确做法是分离“显示已上传文件”与“选择新文件”两个逻辑，用前端动态渲染已有图片并支持增删。
-
合理设置媒体查询断点应以内容驱动为主，参考768px、1024px、1200px等主流视口宽度，优先使用min-width实现移动优先，统一定义断点变量，避免混用max-width，并确保语法正确、viewport标签完备及特性兼容性。
