css盒子模型的理解：5分鐘搞懂css盒子模型是什嗎？

css盒子模型是什嗎？畢竟在學習css時經常可以看到css盒子模型，所以，接下來的這篇文章php中文網就跟大家來談一談css盒子模型的概念以及對css盒子模型的理解。

首先，我們來看一看css盒子模型是什嗎？

從百度百科上我們可以知道，網頁設計中常聽的屬性名稱：內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模型。如：

CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。

那麼，在知道了css盒子模型是什麼之後，對於css盒子模型又該如何理解呢？

css盒子模型的理解

我們可以把css盒子模型當成日常中的一個盒子去理解。

content就是盒子裡裝的東西，它有高度（height）和寬度（width）,可以是圖片，可以是文字或者小盒子嵌套，在現實中，內容不能大於盒子，內容大於盒子就會撐破盒子，但在css中，盒子有彈性的，頂多內容太大就會撐大盒子，但是不會損害盒子。

padding即是填充，就好像我們為了保證盒子裡的東西不損壞，填充了一些東西，比如泡沫或者塑料薄膜，填充物有大有小，有軟有硬，反應在網頁中就是padding的大小了。

border就是再外一層的邊框，因為邊框有大小和顏色的屬性，相當於盒子的厚度和它的顏色或者材料。

margin外邊距，就是我們的盒子與其他的盒子或者其他東西的距離。假如有很多盒子，margin就是盒子之間直接的距離，可以通風，也美觀同時方便取出。

css盒子模型有兩種，一種是W3C盒模型也就是標準模型，另一種是IE盒模型

css兩種盒子模型的設定方法：

/* 標準模型 */box-sizing:content-box; /*IE模型*/box-sizing:border-box;

css兩種盒模型可以用分別表示：

標準模型：

IE盒模型：

從上面圖中我們可以明顯的看出，IE盒模型的寬度或者高度為content（內容）的寬度和高度，W3C盒模型即標準模型的寬度或者高度為content（內容） + padding （內邊距）+ border（邊框）

我們來舉一個例子：一個div的寬度和高度為105px，內邊距為10px，邊框為5px，外邊距為30px。W3C盒模型下顯示的div所佔的總寬度和總高度（包括外邊距、邊框、內邊距、內容）為105 + 15 + 5 + 30 = 155px，IE盒模型下顯示的div所佔的總寬度和總高度（包括外邊距、邊框、內邊距、內容）為105+ 30 = 135px。

<style>  .content {background: #eee; height: auto;border: 1px solid black;}  .div {width: 105px;height: 105px;margin: 30px;padding: 15px;border: 5px solid black;}  .div-01 {background: green;}  .div-02 {background: pink;box-sizing: border-box;}</style><div class="content">  <div class="div div-01">W3C盒模型</div>  <div class="div div-02">IE盒模型</div></div>

效果如下：

很明顯的區別，如果元素的寬度（width）一定的情況下，W3C盒模型的寬度（width）不包括內邊距和邊框，IE盒模包括。

當然，看到這裡，css盒子模型中內容肯定不能完全掌握，接下來大家可以去看看php中文網的css視頻教程欄目和css3視頻教程欄目，裡面的視頻關於css3盒子模型講的很詳細。