CSS 核心觀念：色彩、單位、盒模型與優先權

CSS 並非只是單純的樣式語言，裡面藏有許多意想不到的行為與冷知識，從歷史遺留設計、瀏覽器實作差異到令人驚訝的技巧。透過這些知識，不僅能讓我們更了解 CSS 的底層運作，還能提升除錯能力與跨瀏覽器開發經驗。

色彩表示法

CSS 的顏色可以用色名、16 進位或色彩函式來寫。實務上十六進位最常見，需要調整明暗時 hsl() 好算得多。

寫法	說明
色名	直接寫 red、blue 這類關鍵字，好讀但可選的顏色有限。
16 進位	#RRGGBB 的形式，最常見的寫法，也可以縮寫成三碼。
rgb()、rgba()	以紅、綠、藍三個分量指定，rgba() 多一個透明度。
hsl()、hsla()	以色相、飽和度、亮度指定，調整明暗最直覺。

詳細用法請見 色彩表示法 。

單位表示法

長度、角度、時間與比例各有對應的單位。長度單位的重點是它以什麼為基準：px 是固定值，其餘則跟著字級、父元素或視窗變動。

單位	說明
px	絕對長度，最直接，但不隨字級縮放。
em	相對於自己或父層的字級，會層層累積。
rem	相對於根元素的字級，響應式的主力。
%	相對於父元素的對應尺寸。
vw、vh	相對於視窗的寬與高。
deg、s、fr	角度、時間與比例，各自用在對應的屬性上。

詳細用法請見 單位表示法 。

區塊模型解說

元素由內而外分成內容、內距、框線、外距四層，這決定了它實際佔多大空間。「設了寬度卻超出容器」幾乎都出自預設的計算方式。

層	說明
內容 content	文字或子元素實際佔的區域，width、height 預設只算這一層。
內距 padding	內容與框線之間的空間，會把元素撐大。
框線 border	元素的邊框，同樣計入實際尺寸。
外距 margin	元素與元素之間的距離，不屬於元素本身。

詳細用法請見 區塊模型解說 。

外觀顯示

display 決定元素是獨佔一行、與文字並排，還是成為彈性盒子或格線的容器。最常踩到的是純行內元素設了寬高沒有反應。

值	說明
block	獨佔一行，可以設定寬高。
inline	與文字並排，寬高設了沒有反應。
inline-block	並排，但可以設定寬高。
flex、grid	讓元素成為彈性盒子或格線的容器。
none	完全不顯示，也不佔空間。

詳細用法請見 外觀顯示 。

樣式重置

先處理掉瀏覽器的預設樣式，讓各家瀏覽器的呈現一致。做法分成整套歸零的 Reset 與只修差異的 Normalize 兩種取向。

做法	說明
Eric Meyer's Reset	把預設樣式全部歸零，樣式從零開始重建。
Normalize.css	保留合理的預設值，只修掉瀏覽器之間的差異。
自行定義	依專案需求維護一份精簡的重置樣式。

詳細用法請見 樣式重置 。

優先權

多條規則套到同一個元素時，由優先權決定誰勝出。它同時看三件事：樣式寫在哪裡、選取器由哪些部分組成，以及同分時誰寫在後面。

影響因素	說明
撰寫位置	行內樣式高於內部樣式與外部樣式表。
選取器類型	ID 高於類別、屬性與偽類，再高於元素與偽元素。
書寫順序	權重相同時，後面寫的覆蓋前面的。
!important	可以壓過上述規則，但會讓樣式變得難以覆蓋。

詳細用法請見 優先權 。

繼承

子元素會自動沿用父元素的部分屬性值，不必逐層重寫。原則很單純：文字相關的屬性多半會繼承，版面相關的則不會。

會繼承	不會繼承
color、font-size、font-family、line-height、text-align	margin、padding、border、background、width

任何屬性都可以用 inherit 強制沿用父層的值，反過來也能用 initial 還原成預設值。

詳細用法請見 繼承 。

邊界重疊

垂直方向相鄰的外距不會相加，而是 重疊 為較大的那一個。常見的症狀是父層莫名多出一段空白。

情況	說明
相鄰同層元素	上下相鄰的兩個元素，取較大的那個外距。
父子元素	子元素的外距會穿透到父元素之外。
如何避開	加上 padding 或 border，或改用 flex、grid 排版。

詳細用法請見 邊界重疊 。

常見的卡關點

症狀	多半是這個原因
樣式寫了沒生效	優先權 被更高的規則蓋過
設了寬度卻超出容器	區塊模型 的計算方式
版面莫名多出空白	邊界重疊
寬高設了沒有反應	元素是行內層級，見 外觀顯示
各家瀏覽器長不一樣	沒做 樣式重置
連結或表單的文字色沒跟著改	這些元素有自己的預設值，不吃 繼承

常見問題

這些觀念要照順序學嗎？

建議先看 區塊模型 與 外觀顯示，它們決定元素怎麼佔空間；接著是 優先權，它決定樣式衝突時誰贏。其餘可以邊做邊查。

為什麼樣式明明寫了卻沒有生效？

八成是被權重更高的規則蓋掉了。用瀏覽器開發者工具檢查該屬性有沒有被畫上刪除線，就能看出是誰覆蓋了它。

哪些屬性會被子元素繼承？

文字相關的屬性多半會，例如：顏色、字級、字型、行高；版面相關的則不會，例如：外距、內距、框線與背景。連結與表單元素還有自己的預設值，不會吃到繼承來的顏色與字型，詳見 繼承。

版面莫名多出一段空白？

很可能是 邊界重疊。垂直方向相鄰的外距不會相加，而是取較大的那一個，父子之間也會發生。

延伸閱讀

區塊模型優先權 specificity外觀顯示 display邊界重疊CSS 模組化