深入CSS，讓網頁開發少點“坑”

77rou發表於2015-12-07

CSS網頁

通常我們在學習CSS的時候，感覺很容易掌握，卻常常在實際應用中碰到各式各樣難以填補的“坑”，為避免大家受到同樣的困惑與不解，本文詳細講解了CSS中優先順序和Stacking Context等諸多高階特性。讓你更加深入的瞭解CSS。

CSS 優先順序

優先順序是瀏覽器是通過判斷哪些屬性值與元素最相關以決定並應用到該元素上的。優先順序僅由選擇器組成的匹配規則決定的。如果給一個P標籤增加一個類（Class）,執行後Class 中的部分屬性並未發生改變，及CSS選擇器存在優先順序問題。

選擇符優先順序

常見的選擇器種類：

內聯樣式（Inline Style）,如<span style="color:black">...；
ID選擇符（ID selectors），如#id；
Class選擇符（Class），如 .class {...}、[href=‘’]、:hover；
標籤選擇符（Tag）,如 div,:before

每一類選擇器的權值不相同，各選擇器的優先順序是由權值決定的，

內聯樣式：1,0,0,0
ID 選擇符：1,0,0
Class 選擇符：1,0
Tag選擇符：1

來源優先順序順序，如圖所示

樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者因為不匹配而退出。

CSS 優先順序法則：

選擇器都有一個權值，權值越大越優先；
當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定；
創作者的規則高於瀏覽者：即網頁編寫者設定的CSS 樣式的優先權高於瀏覽器所設定的樣式；
繼承的CSS 樣式不如後來指定的CSS 樣式；
在同一組屬性設定中標有“!important”規則的優先順序最大；

CSS常用模型

盒子模型(Box Model)就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。

盒子模型相關CSS屬性元素內容（element content）、寬度及高度（Width/Height)、內邊距（padding）、邊框（border）和外邊距（margin）。

在 CSS 中，width 和 height 指的是內容區域（element）的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。假設框的每個邊上有 10 個畫素的外邊距和 5 個畫素的內邊距。如果希望這個元素框達到 100 個畫素，就需要將內容的寬度設定為 70 畫素。需要的屬性如下：

基本屬性

Width/Height
Padding
Margin
Boder
Outline
偏移量屬性
- Top/Left/Bottom/Right
和.NET WinForm的區別:
- 預設情況下Width/Height不包含Padding
- Margin/Padding屬性的四個值的順序是top right bottom left (順時針)

所有東西可視為盒子模型

縱向Margin合併

如果<p>的縱向margin是12px，那麼兩個<p>之間縱向的距離是多少？按常理來說應該是 12 + 12= 24px，但是答案仍然是 12px。因為縱向的margin是會重疊的，大的會覆蓋下的。

Position屬性規定元素的定位型別。這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。以下是Posistion屬性取值範圍如下：

Static 普通流佈局（Normal flow），預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
Relative 支援偏移量屬性的普通流佈局，生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素。
Absolute 在容器元素內絕對定位的佈局，生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
Fixed 在顯示範圍內的絕對定位佈局，生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。