css3 盒模型

0，前言

在css2.1 以前，咱們都熟知的兩種盒模型，一種是w3c標準盒模型，另一種是怪異模式下的盒模型。在css3以前咱們一直使用的是標準盒模型，可是標準盒模型的寬度老是須要當心的去使用，稍有不甚，有會帶來混亂。css3讓咱們以前瞭解的怪異模式可以很好的在頁面中使用，下面來了解下上面提到的w3c標準盒模型和怪異模式下的盒模型。

  
  
  
  

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

   
   
   
   

  
  
  
  
div { width: 200px; height: 100px; padding: 20px; border:30px solid blue;  margin: 10px; background: red; } 

下面來看看，上面的代碼和標準盒模型和怪異模式下的盒模型表現形式有什麼不一樣。

1，w3c標準盒模型

在網頁中，每個元素都是一個盒模型，咱們稱爲盒子，要想寫出好的網頁，就須要去了解盒子是怎麼組成的，達到心中有數的境界。

官方定義： http://www.w3school.com.cn/css/css_boxmodel.asp

一個標準的盒子是由 內容+內邊距+邊框+外邊距，這裏的內、外邊距四邊都是有的，看你怎麼去設定了，而咱們在樣式中使用的width 指的盒子的內容，內邊距和邊框的修改都會改變整個元素的大小。background 背景是由 內容 + 內邊距 構成的，下面看一個圖

這是上面那張圖的盒模型，加上外邊距的話，總體寬度是 320，總體高度是220

這裏的 200X100 是樣式中聲明的寬度和高，也就是咱們的內容，接下來是內邊距，內容盒內邊距組成的部分就是紅色背景的部分，接下來就是 邊框 30 ，外邊距10 。

width = 內容 + 內邊距 + 邊框

標準盒模型的缺點就是，一個元素的總體寬和高，要根據內、外邊距、邊框的改變去調整內容的寬高，也就是樣式中咱們所使用的寬、高。

2，怪異模式下盒模型

怪異模式則是使用瀏覽器本身的方式解析執行代碼，由於不一樣瀏覽器解析執行的方式不同，因此咱們稱之爲怪異模式。瀏覽器解析時到底使用標準模式仍是怪異模 式，與你網頁中的DTD聲明直接相關，DTD聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁並顯示，忽略DTD聲 明,將使網頁進入怪異模式(quirks mode)。

怪異模式IE8如下獨有的。

簡單的說，文檔聲明的正確與否決定了，瀏覽器解析模式，是否使用怪異模式，即錯誤的文檔聲明會進入怪異模式

那咱們如今故意寫錯文檔聲明，進入怪異模式下，探個究竟：

怪異模式下：width = 內容 + 內邊距(兩邊的) + 邊框 ，高度是不可預訂的（至少看起來是這樣的）

有沒有發現什麼，怪異模式下的盒子，沒必要擔憂咱們對內邊距和邊框的修改來改變總體元素的寬度，而致使頁面混亂，可是它的缺點是隻在IE8 如下，咱們不可能編寫頁面時使用這種模式，由於咱們要兼容大多數瀏覽器。何況它的高度仍是不可預訂的。

警告：瞭解便可，切勿使用

3，CSS3 盒模型

如今咱們來認識下css3中的盒模型屬性 box-sizing ,它有三個屬性

content-box 默認值，維持w3c 標準盒子

border-box 和IE怪異模式下相同，盒子的寬度 = 內容寬度+ 內邊距 + 邊框

inherit 繼承父元素的盒模型模式

這裏主要介紹border-box 這個值，雖然和怪異模式下很像，但仍是有區別的，就是它的高度 等於height，它能夠普遍的去使用，由於它是標準哦，重要的是它支持 IE8 以上瀏覽器、以及其餘瀏覽器

可是在IE下面使用的時候，必定不要進入怪異模式，使用 border-box 便可，若是進入怪異模式，即便使用 border-box ，也是沒有效果的，這個是我不當心誤入的。

在正常模式下，IE8 下設置 box-sizing: border-box; 完美的使 width = 內容 + 內邊距 + 邊框； height = 內容 + 內邊距 + 邊框; 

上面是 border-box 的兼容狀況（是否是發現能夠大膽的使用了），附上地址  http://caniuse.com/#search=box-sizing

來自爲知筆記(Wiz)