直接把多个 .css 文件用 cat 或复制粘贴合并，再丢给压缩工具（比如 cssnano），常发现最终体积比原来总和还大。核心原因是：不同文件里的重复选择器、重叠声明、未使用的 @imp...

图片和文字使用 float 出现错位时，主要是因为默认的基线对齐方式和浮动元素的块级特性导致垂直方向没有对齐。虽然 float 本身不支持直接的垂直居中控制，但结合 vertical-al...

嵌套过深（比如 .container .sidebar .content .item .title）会导致样式耦合强、复用性差、调试困难，而且一旦 DOM 结构微调，样式就可能失效。更关键...

手机端字体太小，根本不是“调大一点就行”的问题，而是默认 font-size 没适配屏幕密度、视口宽度和用户阅读距离。直接写 font-size: 16px 在 iPhone SE 屏上可...

根本原因不是样式写错了，而是没锚定布局的“主干”。CSS 布局一旦依赖多层嵌套的相对单位（比如 %、em）或浮动/绝对定位，局部改动就会像推倒多米诺骨牌一样波及全局。最直接的解法是用固定宽...

align-content 只对 多行 flex 容器 生效，且容器必须设置 flex-wrap: wrap（或 wrap-reverse）。如果子项没换行、或者容器是单行（flex-wr...

Flex 布局中子元素对齐不正确，通常是因为 justify-content 和 align-items 的作用对象或取值理解有偏差。这两个属性控制的是**主轴（main axis）** ...

Bootstrap 栅格布局不生效，通常不是框架“坏了”，而是 HTML 结构或类名使用不符合 Bootstrap 的嵌套规则。核心问题往往出在 container、row、col 三者的...

CSS比例单位（如 %、vw、vh、em、rem）“失效”，最常见的原因是父容器宽度被固定值（如 px）锁定，导致子元素的百分比计算失去参照依据。

容器加边框后出现对齐错位，根本原因通常是元素默认的 box-sizing 值为 content-box，导致边框和内边距被额外加在设定的宽高之外，破坏了布局预期尺寸。