Personal CSS Knowledge Base

把每个 CSS 坑，变成一个可复现的案例。

从真实现象出发，用最小的 HTML 与 CSS 对照问题、理解原理、记录解法。这里不追求背诵属性，而是积累可以随时运行和检查的经验。

layout.css

.item {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

允许收缩 ✓ HTML + CSS

01 已整理案例

01 知识分类

0 首版依赖的 CSS 库

Case Library

案例目录

每个案例都包含现象、对照演示、原理和可直接使用的结论。

布局 Flexbox 2026.07.28

通过同构对照理解 Flex 子项的最小内容宽度，以及长文本、省略号和兄弟元素之间的收缩关系。

Learning Loop

把模糊的“CSS 怎么又不对”拆成可以观察和验证的三个步骤。

抽出最小结构，保留真正影响结果的容器、内容和状态。

只改变一个关键条件，让浏览器行为的差异清晰可见。

记录原理、适用边界和检查顺序，形成下一次能复用的经验。