CSS 并不難——除非你真的開(kāi)始寫(xiě)了。

如果你曾花 45 分鐘調(diào)一個(gè) margin，最后才發(fā)現(xiàn)問(wèn)題出在 padding 上，你并不孤單。CSS 看起來(lái)簡(jiǎn)單，其實(shí)暗藏玄機(jī)。即使經(jīng)驗(yàn)豐富的前端工程師，也常常會(huì)在 QA 報(bào)告、移動(dòng)端視圖或某些奇怪的瀏覽器邊緣情況中，被這些隱藏的坑絆住。

以下是即使老司機(jī)也常犯的 10 個(gè) CSS 錯(cuò)誤：

1. 不理解堆疊上下文就亂用 z-index

加個(gè) z-index: 9999 就能解決問(wèn)題，對(duì)吧？

并不總是。很多元素因?yàn)?nbsp;transform、opacity < 1、filter、will-change 或 position: fixed 而創(chuàng)建了新的堆疊上下文（stacking context），這會(huì)讓你的 z-index 在“孤島”里失效。

這類(lèi) bug 在模態(tài)框、下拉菜單中尤其常見(jiàn)，令人頭疼。

2. 移動(dòng)端誤用 vh 單位

過(guò)去寫(xiě) height: 100vh 是做全屏布局的常規(guī)操作，但在移動(dòng)端，這會(huì)出問(wèn)題。

例如 iOS Safari 會(huì)根據(jù)不同情況計(jì)算瀏覽器 UI 的高度，導(dǎo)致頁(yè)面被截?cái)嗷虺銎聊弧?/span>

更好的做法：用 100dvh（動(dòng)態(tài)視口高度）或使用 JavaScript 動(dòng)態(tài)計(jì)算高度。

3. 忘了 flex 子元素默認(rèn)不會(huì)收縮

布局突然炸裂，一塊卡片撐得很大，問(wèn)題可能在于 flex-shrink 沒(méi)有生效。

特別是當(dāng)子元素內(nèi)容不換行，或者圖片沒(méi)有 max-width 時(shí)，容器會(huì)被“撐爆”。

解決方案：試試給元素加上 min-width: 0 或 overflow: hidden。

4. 在 flex 容器里用 position: absolute 卻忘了加 relative

這是個(gè)隱蔽陷阱：在 flex 容器中使用絕對(duì)定位的元素，卻沒(méi)有給父元素設(shè)置 position: relative。

這時(shí) top/right/bottom/left 不會(huì)按你的預(yù)期生效，只能靠運(yùn)氣。

5. 不必要的選擇器嵌套

你是否也寫(xiě)過(guò)這樣的 CSS？

.card .card-content .card-title {
  /* why tho? */
}

不如直接寫(xiě) .card-title。

嵌套過(guò)深讓樣式更難維護(hù)、復(fù)用和覆蓋。使用 BEM、CSS Modules 時(shí)，更應(yīng)保持選擇器扁平化。

6. 濫用 !important

!important 是救命稻草，但不是日常武器。

一旦你開(kāi)始用它，就會(huì)陷入“誰(shuí)更重要”的戰(zhàn)斗。最終，每條樣式都不得不用 !important 才能生效。

正確用法：僅在你無(wú)法控制源樣式（如第三方庫(kù)）時(shí)才使用。

7. 忘記 box-sizing: border-box

你還在寫(xiě)：

width: 100%;
padding: 20px;

然后驚訝為什么布局會(huì)超出容器？

別忘了：

* {
  box-sizing: border-box;
}

它能確保 padding 包含在 width 內(nèi)部，而不是附加其上。能救你無(wú)數(shù)次。

8. 忽略邏輯屬性（Logical Properties）

還在用 margin-left、padding-top？

它們?cè)?RTL（從右到左）語(yǔ)言或豎排布局中會(huì)出問(wèn)題。

使用邏輯屬性更智能：

padding-inline-start: 1rem;
margin-block-end: 2rem;

讓你的布局更具適應(yīng)性。

9. 濫用 display: flex，其實(shí)只需要 block

你可能習(xí)慣寫(xiě)：

display: flex;
align-items: center;
justify-content: center;

但其實(shí)：

display: block;
margin: auto;

就能搞定居中。別忘了傳統(tǒng)技巧也有用武之地。

10. 不給 CSS 架構(gòu)

CSS 沒(méi)有報(bào)錯(cuò)提示，但它會(huì)悄悄毀掉你的 UI。

沒(méi)有結(jié)構(gòu)規(guī)范（如 BEM、SMACSS、Tailwind、CSS Modules），你的樣式遲早變成意大利面。

CSS 是全局作用的語(yǔ)言，這既是它的優(yōu)勢(shì)，也是它的陷阱。

總結(jié)

就算是資深開(kāi)發(fā)者，也難免犯這些錯(cuò)。重點(diǎn)不是永遠(yuǎn)避免失誤，而是認(rèn)清這些坑，下次能更快排查、解決。

那么，你中了幾條？或者還有其他令人抓狂的 CSS 錯(cuò)誤？