盒子模型相關知識總結

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繼承機制

盒子模型

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 指的是內容區域的寬度和高度。增長內邊距、邊框和外邊距不會影響內容區域的尺寸，可是會增長元素框的總尺寸。

 

 

• width 和height 設置了內容框的寬/高
• padding 家族屬性設置內邊距的寬度(別忘了普通屬性好比 padding-bottom ，一次設置一個邊).
• border 家族屬性設置邊界的寬度、樣式和顏色(許多可用的普通邊界屬性還有不少)。
• margin 家族屬性設置包圍CSS盒子外部區域的寬度，這個屬性推開佈局中其餘的CSS盒子

溢流（overflow）

當用絕對的值設置盒子的大小時（好比，固定像素的 width 和 height），內容可能會超出設置的大小，此時內容就會溢流盒子。要控制這時候發生的事情，咱們可使用 overflow 屬性。 該屬性有幾個可能的取值，不過最經常使用的是：

 

• auto：若是內容太多，那麼超出盒子大小的內容會被隱藏，滾動條顯示出來，從而可讓用戶滾動看到全部內容。
• hidden：若是內容太多，那麼超出盒子大小的內容被隱藏了。
• visible：若是內容太多，超出盒子大小的內容顯示在盒子以外（這一般是默認的行爲）。

背景剪裁 (Background clip)

盒背景由顏色和圖像組成，堆疊在彼此之間(background-color，background-image)。它們被應用於一個盒並在該盒子下畫。默認狀況下，背景延伸到邊界的外邊緣。這一般很好，但在某些狀況下可能會使人煩惱(若是您有一個平鋪的背景圖片，您只想擴展到內容的邊緣呢?)這種行爲能夠經過設置background-clip屬性。

輪廓(Outline)

盒子的 outline 看起來像邊界，可是它不是盒模型的一部分。它表現得像邊界，可是是畫在盒子之上，不會修改盒子的大小（具體來講，ouline 是畫在邊界框以外，外邊距區域以內）。

設置寬和高的約束

經過屬性 min-width、max-width、min-height 和 max-height 實現設置大小約束

1.  
   width: 70%;
2.  
   max-width: 1280px;
3.  
   min-width: 480px;

盒子顯示（display）類型

常見的display的類型

 

display 能夠有不少種不一樣的值, 其中三種常見的值爲 block, inline, 和 inline-block.

• 塊盒(block box)是被定義爲堆放在其它盒子之上的盒子（即盒子以前以及以後的內容出如今不一樣的行上），而且能夠給它設置高度和寬度。上面所述的整個盒模型都適用於塊盒。
• 行內盒（inline box）與塊盒相反：它跟隨文檔的文本流堆放（即，它會與周圍的文本和其它行內元素出如今同一行，而且其內容會像段落中的文本行同樣，隨着文本流換行）。寬度和高度設置對行內盒無效；在行內盒上的全部內邊距、外邊距和邊界設置會改變周圍文本的位置，可是不會影響周圍塊盒的位置。
• 行內塊盒（inline-block box）介於前二者之間： 它會像行內盒同樣，跟隨周圍的文本流堆放，不會在其先後建立換行；不過，它能夠像塊盒同樣，使用寬度和高度設置大小，而且維護其塊完整性 — 它不會跨段落行換行（對於一行文本容納不下的行內盒，會落到第二行上，由於第一行上沒有足夠的空間容納它，而且不會跨兩行換行）。

塊級元素默認設置爲 display: block; ，行內元素默認設置爲 display: inline; 。

不常見的display類型

 

同時， display 屬性也有一些不經常使用的值，在之後你將會遇到。其中一些已經出現了有一段時間，而且能夠很好的被支持, 而另外一些則比較新，不可以被很好的支持。這些值一般是爲了使建立網頁/網頁應用更簡單而被創造出來。最被關注的有這些:

• display: table — 容許你像處理table佈局那樣處理非table元素，而不是濫用HTML的<table>標籤來達到一樣的目的。
• display: flex — 容許你處理一些困擾CSS已久的一些傳統佈局問題，例如佈置一系列彈性等寬容器或者垂直居中內容。
• display: grid — 給出一種簡單實現CSS網格系統的方式，而在傳統上它依賴於一些棘手難以處理的CSS網格框架。

css的兩種盒模型

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css盒模型</title> </head> <style type="text/css"> .content { width: 300px; height: 400px; border: 5px solid #242424; padding: 20px; background-color: #898989; } </style> <body> <div class="content"></div> </body> </html>

   上面代碼的邏輯很簡單，就是設一個寬300px，高400px的div，並設置5px的邊框和20px的padding。而後咱們來看效果：

 

 

這裏咱們會發現明明咱們設置了300*400長寬比，爲何呈現出來的是一個350*450的盒子呢？ 
接着讓咱們打開調試頁面一探究竟。 
咱們能夠找到下面的這張示意圖：

 

 

 

在這張圖中，咱們發現咱們設置的300*400出如今了最裏面的那個藍框中，與此同時咱們能夠發如今這個盒模型中除了咱們設置的內容（content），還有margin（外邊距）、border（邊框）、padding（內邊框） 

margin(外邊距) - 清除邊框外的區域，外邊距是透明的。 
border(邊框) - 圍繞在內邊距和內容外的邊框。 
padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。 
content(內容) - 盒子的內容，顯示文本和圖像。

爲了正確設置元素在全部瀏覽器中的寬度和高度，你須要知道盒模型是如何工做的。

而咱們在測試效果圖看到的350*450盒子， 


350 = 300（width） + 20（padding）* 2 + 5（border）* 2 
450= 400 （height）+ 20（padding）* 2 + 5（border）* 2 

css的兩種盒模型

---

而引發上面效果的緣由來自於 css 的兩種盒模型的不一樣，這裏我先對兩種盒模型作個介紹。

W3C的標準盒模型

 

 

在標準的盒子模型中，width指content部分的寬度

 

IE的盒模型

 

 

在IE盒子模型中，width表示content+padding+border這三個部分的寬度

咱們能夠看出咱們上面的使用的默認正是W3C標準盒模型 
而這裏盒模型的選取更傾向於項目和開發者的習慣，並無絕對的好壞之分。 

box-sizing的使用

---

若是想要切換盒模型也很簡單，這裏須要藉助css3的box-sizing屬性 

  box-sizing: content-box 是W3C盒子模型 
  box-sizing: border-box 是IE盒子模型

box-sizing的默認屬性是content-box