Css#

1. 布局 (Flexbox & Centering)#

对 Flex 布局的理解：
Flexbox 是一种一维布局模型，旨在提供一种更有效的方式来布局、对齐和分配容器内子元素之间的空间，即使它们的大小是未知或动态的。它改变了传统布局依赖 display + position + float 的繁琐，通过主轴（Main Axis）和交叉轴（Cross Axis）的概念简化了对齐。
子元素设置（基础 200px，不缩小，可放大）：
使用分立属性设置：
- flex-basis: 200px;
- flex-shrink: 0; (禁止缩小)
- flex-grow: 1; (允许放大，数值根据需求调整)
使用 flex 简写属性：
flex: 1 0 200px; (对应顺序为：flex-grow, flex-shrink, flex-basis)
水平垂直居中：
1. Flex 方案（最推荐）： display: flex; justify-content: center; align-items: center;
2. Grid 方案： display: grid; place-items: center;
3. Absolute + Transform： position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

理解： 网页所有元素都可看作盒子，由内到外包含：content, padding, border, margin。
标准模型 (W3C)： width 仅包含 content。设置：box-sizing: content-box;（默认）。
怪异模型 (IE/Border-box)： width 包含 content + padding + border。设置：box-sizing: border-box;。

注意： 在现代开发中，通常全局设置 border-box 以简化尺寸计算。

定义： BFC 是 Web 页面的 CSS 渲染的一部分，是一个隔离的独立渲染区域。
触发方式： overflow: hidden/auto, display: flow-root/inline-block/flex, position: absolute/fixed。
解决的问题： 1. 清除浮动（让父元素包裹浮动子元素）。
1. 防止外边距（Margin）重叠。
1. 实现自适应两栏布局（防止文字环绕）。

实现匀速移动 300px：
- 方法一（推荐）： transform: translateX(300px); transition: transform 2s linear;
- 方法二： margin-left: 300px; transition: margin-left 2s linear;
- 方法三： left: 300px; transition: left 2s linear; (需配合 position)
三者对比： 优先使用 transform。因为 transform 不会触发重排（Reflow），仅触发重绘（Repaint）和复合（Composite），且可以利用 GPU 加速，性能最高。margin 和 left 会导致布局抖动。
非 Animation 实现： 使用 transition（过渡）或 requestAnimationFrame（JS 逐帧动画）。

优势： 原子化 CSS 减少了 CSS 体积；无需起类名（解决命名困难）；响应式支持极佳；高度约束的规范（颜色、间距一致性）。
对比 CSS Modules： Tailwind 减少了在 JS 和 CSS 文件间切换的频率。CSS Modules 虽然解决了命名冲突，但依然需要写大量重复的样板代码。
可维护性： 通过 @apply 提取公共样式，或封装 React/Vue 组件。大型项目更依赖组件封装而非纯 HTML 堆砌类名。
迁移与覆盖： * 覆盖： 使用 tailwind-merge 库处理动态类名合并，或使用 ! 前缀强制覆盖。
- 存量转换： 采用渐进式迁移，新组件用 Tailwind，旧样式不动。使用视觉回归测试工具（如 Playwright 截图对比）确保一致性。
解决内容爆炸： 1. 抽离为小的子组件；2. 使用编辑器插件（如 Tailwind Fold）折叠类名。

主题实现： 通常使用 CSS Variables (CSS 变量)。根元素定义 --primary-color，组件内部引用。切换主题只需修改变量值。
按需引入 CSS 的原理：
1. 插件化： 使用 babel-plugin-import 在编译时自动将 import { Button } 转换为引入 JS 和对应的 CSS。
2. Tree Shaking： 现代库（如 AntD/Element Plus）常在 JS 源码中直接 import './style.css'。打包工具（Vite/Webpack）识别到引用后，会自动将 CSS 提取并打包。
3. 副作用 (Side Effects)： 组件库在 package.json 中配置 sideEffects 包含 CSS 文件，确保它们不被误删。