css盒模型是什麼

CSS3盒子模型是CSS技術所使用的一種思考模型，指在一個網頁文件中，每個元素都被呈現為一個矩形的盒子，描述了元素所佔空間的內容。 css有兩種盒子模型：W3C盒模型（標準盒模型）和IE盒模型（怪異盒模型）。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

1、什麼是CSS盒模型

#CSS3盒模型就是CSS技術所使用的一種思維模型，指在一個網頁文檔中，每個元素都被呈現為一個矩形的盒子，描述了元素所佔空間的內容。

盒子模型，顧名思義，就是一個盒子。生活中的盒子，有長寬高，盒子本身也有厚度，可以用來裝東西。頁面上的盒子模型我們可以理解為，從盒子頂部俯視所得的一個平面圖，盒子裡裝的東西，相當於盒子模型的內容（content）；東西與盒子之間的空隙，理解為盒子模型的內邊距（padding）；盒子本身的厚度，就是盒子模型的邊框（border）；盒子外與其他盒子之間的間隔，就是盒子的外邊距（margin）。

元素的外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）就構成了CSS盒子模型。

圖1.盒模型示意圖

#2、IE盒模型與W3C盒子模型

    CSS盒模型分為IE盒模型（圖2）與W3C盒模型（圖3）。其實，IE盒模型是怪異模式（Quirks Mode）下的盒子模型，而W3C盒模型是標準模式（Standards Mode）下的盒子模型。

    IE6及其更高的版本，還有現在所有標準的瀏覽器都遵循的是W3C盒模型，IE6以下版本的瀏覽器遵循的是IE盒模型。

圖2. IE盒模型

#圖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>
  <div>div01</div>
  <div>div02</div>
</div>

頁面效果如下：

圖4. 區別

#3、CSS3屬性box-sizing

    如果計算一個盒子的長寬高，我們通常都是盒子本身的厚度加上盒子裡的空間大小，所在在IE盒模型和W3C盒模型，我們會覺得IE盒模型比較符合邏輯。 （學習影片分享：css影片教學）

    不同的人有不同的習慣，所以CSS3新增了一個屬性box-sizing: content-box | border-box | inherit，預設值為content-box。如果值為content-box，那麼元素遵循的是W3C盒模型；如果值為border-box，則元素遵循的是IE盒模型；如果值為inherit，該屬性的值應該從父元素繼承。

4、關於盒子模型的使用

    有沒有人和我一樣，覺得屬性box-sizing真是個好東西，只需設定所有元素的該屬性為content-box或border-box，滿足自己的習慣。

虽说现在的浏览器都兼容该属性（如上图），还是得以防万一，在属性前最好暂时加-webkit-和-moz-前缀。

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

    在上图，我们看到IE兼容属性box-sizing必须是8或者更高的版本，其他浏览器都可以自动升级，兼容性不担心，那如果是IE7、IE6或者更低的版本，怎么办？还有，如果我们不用该属性，那浏览器该选择哪种盒模型呢？

    其实，浏览器选择哪个盒模型，主要看浏览器处于标准模式（Standards Mode）还是怪异模式（Quirks Mode）。我们都记得声明吧，这是告诉浏览器选择哪个版本的HTML，后面一般有DTD的声明，如果有DTD的声明，浏览器就是处于标准模式；如果没有DTD声明或者HTML4一下的DTD声明，那浏览器按照自己的方式解析代码，处于怪异模式。

    处于标准模式的浏览器（IE浏览器版本必须是6或者6以上），会选择W3C盒模型解析代码；处于怪异模式的浏览器，则会按照自己的方式去解析代码，IE6以下则会是选择IE盒模型，其他现代的浏览器都是采用W3C盒模型。

    因为IE6以下版本的浏览器没有遵循Web标准，不论页面开头有没有DTD声明，它都是按照IE盒模型解析代码的。

更多编程相关知识，请访问：编程视频！！

以上是css盒模型是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！