一、css層疊
在前端程式設計師對css編寫的過程中，css選擇器的作用是用來選中某個元素，並對當前的元素進行樣式上的渲染，那麼每乙個選擇器都有屬於自己的一些解析規則。那我們今天所**的css層疊就是瀏覽器對多個樣式的**進行疊加，並最終解析成渲染效果，那這個過程我們就稱為css層疊。
1）css樣式的**
css之所以有「層疊」的概念，是因為有多個樣式**。其實css的樣式**有5個，開發人員只能接觸到後面3個。
前三個我們程式設計師習慣的稱為：「內聯樣式表」、「內部樣式表」、「外部樣式表」，這三個樣式表也是我們程式設計師所接觸的css樣式編寫的部分，這裡就不做多的介紹。
下面我們來認識下後面兩個：「瀏覽器預設樣式」以及「用於自定義樣式」。 a：瀏覽器預設樣式：
當你不為html設定任何樣式時，顯示在瀏覽器上，b標籤會顯示粗體、em標籤有傾斜、h1-h6字型大小有預設的大小……這是就是瀏覽器預設的樣式。
因為瀏覽器自帶乙個預設的樣式，如果html中沒有為標籤設定樣式，則瀏覽器會按照自己的樣式來顯示。但是瀏覽器預設樣式的級別是最低的，一旦有其他地方設定了標籤樣式，瀏覽器預設樣式就會被乾掉。
注意，不同瀏覽器的預設樣式有些地方是不一樣的。例如，我們在寫css時，都會首先設定 * ，就是因為有瀏覽器相容性問題。乾脆，全部弄成0，這樣各個瀏覽器就都統一了。
a：使用者樣自定義式：
其實瀏覽器也有這樣的設定，例如chrome瀏覽器中，我們就可以設定字型大小和字型
2）css權重規則
每個選擇器都有一些css規則，這些規則有可能不矛盾的，自然這些規則將會同時起效，然而有些規則是相互衝突的，為此需要為每條規則制定特殊性，當發生衝突的時候必須選出一條最高特殊性的規則來應用。
css規則的特殊性可以用4個整數來表示，例如0，0，0，0.計算規則如下：
1、對於規則中的每個id選擇符，權重值表示為0，1，0，0
2、對於規則中每個類選擇符和屬性選擇符以及偽類，權重值表示為0，0，1，0
3、對於規則中的每個元素名或者偽元素，權重值表示為0，0，0，1
4、對於萬用字元，權重值表示為0，0，0，0.
5、對於內聯規則，權重值表示為1，0，0，0
最終得到結果就是這個規則的權重。兩個權重值的比較類似字串大小的比較，是從左往右依次比較，第乙個數字大的規則的權重高。例：
上例中兩條規則的權重值分別是0，0，0，2 和0，0，0，1，顯然第一條樣式勝出，因此最終字是藍色的。
注意，萬用字元的權重值0，0，0，0看起來沒有作用，實際上不是。
css還有乙個!important，用來改變css規則的特殊性。實際上，在解析css規則權重的時候，是將具有!important的規則和沒有此標籤的規則利用上述方法分別計算權重，分別選出權重值最高的規則。最終合併的時候，具有任何權重值的帶有!important標記的規則勝出。
3）css設定規則
由於樣式的**不同，瀏覽器在載入樣式時，需要計算出最終的樣式值，這樣才能顯示出正確的介面效果——瀏覽器會通過疊加和覆蓋這兩種方式來生成最終的樣式值。
根據上圖描述箭頭左側分別是css外部樣式和css內部樣式對p/span標籤的樣式渲染，箭頭右側則是瀏覽器對css樣式規則的解析。瀏覽器對css解析規則一目了然。
二、css繼承
想要了解css繼承，我們必須要先談談文件樹，例：
在html結構中各個元素的巢狀規則是我們前端程式設計師必須要掌握的專業技能，那麼只要元素之間有了巢狀，那必然會產生父元素與子元素的關係，那繼承是指我們設定上級（父級）的css樣式，上級（父級）及以下的子級（下級）都具有此屬性。在css中有一些特定的屬性，例如：color、font-size、font-family、text-align等，這些屬性會在給父元素設定後傳遞到子元素甚至傳遞到孫元素的樣式中，那麼這些子元素/孫元素會得到樣式的渲染，這就是css的繼承機制。
在瀏覽器上顯示的則是如下圖所示：
注：在給body設定了font-size、color屬性之後，巢狀在body裡面的div、p、span標籤也應用了此屬性，那麼這種情況就是css的繼承屬性傳遞到了子元素以及孫元素身上。這就是css繼承機制。
三、css盒模型
1）簡述：
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內容區、補白（填充）、邊框、邊界(外邊距)這就是盒模型。下面是盒模型的圖例：
2）盒模型組成及原理：
css盒模型由內而外依次是元素內容（content）、內邊矩（padding-top、padding-right、padding- bottom、padding-left）、邊框（border-top、border-right、border-bottom、border- left）和外邊距（marging-top、margin-right、margin-bottom、margin-left）。
內邊距、邊框和外邊距可以應用於乙個元素的所有邊，也可以應用於單獨的邊。而且，外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。
1、元素框的最內部分是實際的內容；直接包圍內容的是內邊距（padding），內邊距呈現了元 素的背景（background）；內邊距的邊緣是邊框（border）；邊框以外是外邊距（margin），外邊距預設是透明的，因此不會遮擋其後的任 何元素（其實元素的margin就是其所在父元素的padding）。元素的背景應用於由內容和內邊距、邊框組成的區域。
2、內邊距、邊框和外邊距都是可選的，預設值是零。但是，許多元素將由使用者**樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器（*）對所有元素進行設定：
3、 在 css 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
3）盒模型應用：
css中的盒子模型是為了讓我們充分理解div+css模型的定位功能，就是利用盒子模型這樣的布局方式代替了傳統的**布局方式，所以盒子模型是在學習div+css布局方式中必須要學習的乙個模型，通過這個模型能夠明白網頁中div和div之間的相對位置是如何布局的。
如下圖例項專案所示：
CSS 繼承與層疊
css 繼承 即，從父元素那繼承部分css屬性 好處 1.父元素設定樣式，子元素可以繼承部分屬性 2.減少css 注意 當元素本身的樣式與繼承而來的樣式有衝突時，將忽略繼承來的樣式，如下 chrom瀏覽器預設字型大小是16px h1 預設字型大小font size 是2em 正常字型的兩倍 因此，在...
CSS繼承與層疊
層疊優先順序 盒模型定位體系 常規流首先，css被稱為層疊樣式表，css有兩大特性 繼承性和層疊性 繼承 是給父級設定了一些屬性。子級繼承了父級的該屬性，這就是我們css的繼承。但是不是每個屬性都能繼承的。這裡我列舉一些 color font text line 像一些盒子元素，定位元素 浮動 絕對...
CSS 層疊和繼承
我們知道文件中的乙個元素可能同時被多個css選擇器選中，每個選擇器都有一些css規則，這就是層疊。這些規則有可能不矛盾的，自然這些規則將會同時起效，然而有些規則是相互衝突的，例如 html xmlns head title css cascade title style type text css ...