CSS盒模型(Box Model)

閱讀目錄

    1. 什麼是CSS盒模型web

    2. IE盒模型和W3C盒模型瀏覽器

    3. CSS3屬性box-sizing佈局

    4. 關於盒模型的使用ui


    在最初接觸CSS的時候,對於CSS盒模型的不瞭解,撞了不少次的南牆呀。盒模型是網頁佈局的基礎,它制定了元素如何在頁面中顯示,若是足夠地掌握,那使用CSS佈局那將會容易得多。spa

1. 什麼是CSS盒模型

    盒模型,顧名思義,就是一個盒子。生活中的盒子,有長寬高,盒子自己也有厚度,能夠用來裝東西。頁面上的盒模型咱們能夠理解爲,從盒子頂部俯視所得的一個平面圖,盒子裏裝的東西,至關於盒模型的內容(content);東西與盒子之間的空隙,理解爲盒模型的內邊距(padding);盒子自己的厚度,就是盒模型的邊框(border);盒子外與其餘盒子之間的間隔,就是盒子的外邊距(margin)。3d

    元素的外邊距(margin)、邊框(border)、內邊距(padding)、內容(content)就構成了CSS盒模型。code

T%}$LA06KCITM86UDGXYMMM

圖1. 盒模型示意圖blog

2. IE盒模型和W3C盒模型

    CSS盒模型分爲IE盒模型(圖2)和W3C盒模型(圖3)。其實,IE盒模型是怪異模式(Quirks Mode)下的盒模型,而W3C盒模型是標準模式(Standards Mode)下的盒模型。繼承

    IE6及其更高的版本,還有如今全部標準的瀏覽器都遵循的是W3C盒模型,IE6如下版本的瀏覽器遵循的是IE盒模型。get

KU5Z0AQ77VG8P8O_thumb4

圖2. IE盒模型

 

AWM_P51_7YPRBMZW3_thumb3

圖3. W3C盒模型 

    從上圖直觀的能夠看出,IE盒模型的寬度或者高度計算方式爲:width/height = content + padding + border,W3C盒模型的寬度或者高度計算方式爲:width/height = content

    舉一個簡單的例子:一個div的寬度和高度爲100px,內邊距爲10px,邊框爲5px,外邊距爲30px。圖4爲不一樣模型下顯示的結果,W3C盒模型下顯示的div所佔的總寬度和總高度(包括外邊距、邊框、內邊距、內容)爲100 + 10 + 5 + 30 = 145px,IE盒模型下顯示的div所佔的總寬度和總高度(包括外邊距、邊框、內邊距、內容)爲100 + 30 = 130px。很明顯的區別,若是元素的寬度(width)必定的狀況下,W3C盒模型的寬度(width)不包括內邊距和邊框,IE盒模包括。

    代碼以下:

<style>
  .content {background: #eee; height: auto;border: 1px solid blue;}
  .div {width: 100px;height: 100px;margin: 30px;padding: 10px;border: 5px solid blue;}
  .div-01 {background: orange;}
  .div-02 {background: yellow;box-sizing: border-box;}
</style>
<div class="content">
  <div class="div div-01">div01</div>
  <div class="div div-02">div02</div>
</div>

    頁面效果以下:

image

圖4. 區別

3. CSS3屬性box-sizing

    若是計算一個盒子的長寬高,咱們通常都是盒子自己的厚度加上盒子裏的空間大小,所在在IE盒模型和W3C盒模型,咱們會以爲IE盒模型更符合邏輯。

    不一樣的人有不一樣的習慣,因此CSS3新增了一個屬性box-sizing: content-box | border-box | inherit,默認值爲content-box。若是值爲content-box,那元素遵循的是W3C盒模型;若是值爲border-box,那元素遵循的是IE盒模型;若是值爲inherit,該屬性的值應該從父元素繼承。

4. 關於盒模型的使用

    有沒有人和我同樣,以爲屬性box-sizing真是個好東西,只需設置全部元素的該屬性爲content-box或者border-box,知足本身的習慣。

image

    雖然說如今的瀏覽器都兼容該屬性(如上圖),仍是得以防萬一,在屬性前最好暫時加-webkit--moz-前綴。

* {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

    在上圖,咱們看到IE兼容屬性box-sizing必須是8或者更高的版本,其餘瀏覽器均可以自動升級,兼容性不擔憂,那若是是IE七、IE6或者更低的版本,怎麼辦?還有,若是咱們不用該屬性,那瀏覽器該選擇哪一種盒模型呢?

    其實,瀏覽器選擇哪一個盒模型,主要看瀏覽器處於標準模式(Standards Mode)仍是怪異模式(Quirks Mode)。咱們都記得<!DOCTYPE>聲明吧,這是告訴瀏覽器選擇哪一個版本的HTML,<!DOCTYPE>後面通常有DTD的聲明,若是有DTD的聲明,瀏覽器就是處於標準模式;若是沒有DTD聲明或者HTML4一下的DTD聲明,那瀏覽器按照本身的方式解析代碼,處於怪異模式。

    處於標準模式的瀏覽器(IE瀏覽器版本必須是6或者6以上),會選擇W3C盒模型解析代碼;處於怪異模式的瀏覽器,則會按照本身的方式去解析代碼,IE6如下則會是選擇IE盒模型,其餘現代的瀏覽器都是採用W3C盒模型。

    由於IE6如下版本的瀏覽器沒有遵循Web標準,不論頁面開頭有沒有DTD聲明,它都是按照IE盒模型解析代碼的。

相關文章
相關標籤/搜索