關於CSS層疊、CSS繼承、CSS盒模型概述

1、CSS層疊

在前端程序員對CSS編寫的過程當中，CSS選擇器的做用是用來選中某個元素，並對當前的元素進行樣式上的渲染，那麼每個選擇器都有屬於本身的一些解析規則。那咱們今天所探討的CSS層疊就是瀏覽器對多個樣式的來源進行疊加，並最終解析成渲染效果，那這個過程咱們就稱爲CSS層疊。

1）CSS樣式的來源

css之因此有「層疊」的概念，是由於有多個樣式來源。其實css的樣式來源有5個，開發人員只能接觸到後面3個。

前三個咱們程序員習慣的稱爲：「內聯樣式表」、「內部樣式表」、「外部樣式表」，這三個樣式表也是咱們程序員所接觸的css樣式編寫的部分，這裏就不作多的介紹。

下面咱們來認識下後面兩個：「瀏覽器默認樣式」以及「用於自定義樣式」。 a：瀏覽器默認樣式：

當你不爲html設置任何樣式時，顯示在瀏覽器上，b標籤會顯示粗體、em標籤有傾斜、h1-h6字號有默認的大小……這是就是瀏覽器默認的樣式。

由於瀏覽器自帶一個默認的樣式，若是html中沒有爲標籤設置樣式，則瀏覽器會按照本身的樣式來顯示。可是瀏覽器默認樣式的級別是最低的，一旦有其餘地方設置了標籤樣式，瀏覽器默認樣式就會被幹掉。

注意，不一樣瀏覽器的默認樣式有些地方是不同的。例如，咱們在寫css時，都會首先設置 * {margin:0; padding:0;}，就是由於有瀏覽器兼容性問題。乾脆，所有弄成0，這樣各個瀏覽器就都統一了。

a：用戶樣自定義式：

在一些新聞網站中，常常看到能夠設置字體大小的快捷菜單，例以下圖就是搜狐新聞中的設置。這些都是用戶能夠根據本身的意願去修改的。

其實瀏覽器也有這樣的設置，例如chrome瀏覽器中，咱們就能夠設置字號和字體

2）CSS權重規則

每一個選擇器都有一些css規則，這些規則有可能不矛盾的，天然這些規則將會同時起效，然而有些規則是相互衝突的，爲此須要爲每條規則制定特殊性，當發生衝突的時候必須選出一條最高特殊性的規則來應用。

CSS規則的特殊性能夠用4個整數來表示，例如0，0，0，0.計算規則以下：

一、對於規則中的每一個ID選擇符，權重值表示爲0，1，0，0

二、對於規則中每一個類選擇符和屬性選擇符以及僞類，權重值表示爲0，0，1，0

三、對於規則中的每一個元素名或者僞元素，權重值表示爲0，0，0，1

四、對於通配符，權重值表示爲0，0，0，0.

五、對於內聯規則，權重值表示爲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解析規則一目瞭然。

2、css繼承

想要了解CSS繼承，咱們必需要先談談文檔樹，例：

在HTML結構中各個元素的嵌套規則是咱們前端程序員必需要掌握的專業技能，那麼只要元素之間有了嵌套，那必然會產生父元素與子元素的關係，那繼承是指咱們設置上級（父級）的CSS樣式，上級（父級）及如下的子級（下級）都具備此屬性。在CSS中有一些特定的屬性，例如：color、font-size、font-family、text-align等，這些屬性會在給父元素設定後傳遞到子元素甚至傳遞到孫元素的樣式中，那麼這些子元素/孫元素會獲得樣式的渲染，這就是CSS的繼承機制。

在瀏覽器上顯示的則是以下圖所示：

注：在給body設置了font-size、color屬性以後，嵌套在body裏面的div、p、span標籤也應用了此屬性，那麼這種狀況就是CSS的繼承屬性傳遞到了子元素以及孫元素身上。這就是css繼承機制。

3、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）。

內邊距、邊框和外邊距能夠應用於一個元素的全部邊，也能夠應用於單獨的邊。並且，外邊距能夠是負值，並且在不少狀況下都要使用負值的外邊距。

一、元素框的最內部分是實際的內容；直接包圍內容的是內邊距（padding），內邊距呈現了元 素的背景（background）；內邊距的邊緣是邊框（border）；邊框之外是外邊距（margin），外邊距默認是透明的，所以不會遮擋其後的任 何元素（其實元素的margin就是其所在父元素的padding）。元素的背景應用於由內容和內邊距、邊框組成的區域。

二、內邊距、邊框和外邊距都是可選的，默認值是零。可是，許多元素將由用戶代理樣式表設置外邊距和內邊距。能夠經過將元素的 margin 和 padding 設置爲零來覆蓋這些瀏覽器樣式。這能夠分別進行，也可使用通用選擇器（*）對全部元素進行設置：

三、 在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素框的總尺寸。

3）盒模型應用：

CSS中的盒子模型是爲了讓咱們充分理解div+css模型的定位功能，就是利用盒子模型這樣的佈局方式代替了傳統的表格佈局方式，因此盒子模型是在學習div+css佈局方式中必需要學習的一個模型，經過這個模型可以明白網頁中div和div之間的相對位置是如何佈局的。

以下圖實例項目所示：

總結：以上文章是對CSS層疊、CSS繼承以及CSS盒模型三個知識模塊的概述。