通常我們在學習css的時候，感覺語法很容易掌握，實際應用中卻碰到各式各樣難以填補的「坑」，為避免大家受到同樣的困惑與不解，本文詳細講解了css中優先順序和stacking context等高階特性。讓你更深入了解css。
優先順序是瀏覽器是通過判斷哪些屬性值與元素最相關以決定並應用到該元素上的。優先順序僅由選擇器組成的匹配規則決定的。如果給乙個p標籤增加乙個類（class）,執行後class 中的部分屬性並未發生改變，及css選擇器存在優先順序問題。
常見的選擇器種類：
每一類選擇器的權值不相同，各選擇器的優先順序是由權值決定的，
樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者因為不匹配而退出。
css優先順序法則：
選擇器都有乙個權值，權值越大越優先；
當權值相等時，後出現的樣式表設定要優於先出現的樣式表設定；
創作者的規則高於瀏覽者：即網頁編寫者設定的css 樣式的優先權高於瀏覽器所設定的樣式；
繼承的css 樣式不如後來指定的css 樣式；
在同一組屬性設定中標有「!important」規則的優先順序最大；
盒子模型(box model)就是在網頁設計中經常用到的css技術所使用的一種思維模型。
盒子模型相關css屬性元素內容（element content）、寬度及高度（width/height)、內邊距（padding）、邊框（border） 和 外邊距（margin） 。
在 css 中，width 和 height 指的是內容區域（element）的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。假設框的每個邊上有 10 個畫素的外邊距和 5 個畫素的內邊距。如果希望這個元素框達到 100 個畫素，就需要將內容的寬度設定為 70 畫素。需要的屬性如下：
基本屬性
和.net winform的區別:
所有東西可視為盒子模型
如果的縱向margin是12px，那麼兩個之間縱向的距離是多少？按常理來說應該是 12 + 12= 24px，但是答案仍然是 12px。因為縱向的margin是會重疊的，大的會覆蓋下的。
position屬性規定元素的定位型別。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成乙個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。以下是posistion屬性取值範圍如下：
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。
提供z-index棧空間特性並影響子元素渲染順序的結構，稱之為stacking context。
瀏覽器會給符合下面規則的dom元素分配乙個stacking context。
畫素渲染流水線
提公升效能需要在構造流水線中每個元素都需要注意：
layout
css 選擇器效能
深入CSS，讓網頁開發少點「坑」
通常我們在學習css的時候，感覺語法很容易掌握，實際應用中卻碰到各式各樣難以填補的 坑 為避免大家受到同樣的困惑與不解，本文詳細講解了css中優先順序和stacking context等高階特性。讓你更深入了解css。優先順序是瀏覽器是通過判斷哪些屬性值與元素最相關以決定並應用到該元素上的。優先順序...
網頁開發基礎 CSS
是層疊樣式表單，用於 增強 控制網頁樣式並允許將樣式資訊與網頁分離的標記語言。實際開發中主要用於設定html頁面中的文字內容 字型 字型大小 對齊方式等 的外形及版面布局等外觀顯示樣式。規則如下 選擇器上式中選擇器用於指定css樣式作用的html物件，屬性是對該物件的具體樣式。案例 通過css樣式對...
用CSS讓網頁文字豎排
1.writing mode 設定物件書寫方向 語法 writing mode lr tb tb rl 引數 lr tb 從左向右，從上往下 tb rl 從上往下，從右向左 示例 div 2.text align 設定物件中文字的對齊方式 語法 text align left right cente...