盒子模型是css裡的乙個重點內容，一般來講主要是w3c的盒子模型，不過ie原先也有自己的盒子模型，但是隨著發展ie也調整了盒子模型同步w3c，因此這裡就不講ie盒子模型了。
標準w3c盒子模型
以下用乙個div的盒子模型作為範例進行解讀：
可以看出這個div裡面只有範例的文字，而它的盒模型分為四部分：content部分（這部分就是div裡的內容部分），padding部分（這個是內邊距），border部分（邊框），margin部分（外邊距）。而該div的width和height在沒有其他因素的影響下是content的寬和高。
padding和border以及margin都有top、bottom、left、right四個屬性，代表各自四個方向的部分，下面進行了文字標註。
這就是標準的w3c盒子模型，另外有；兩個屬性對於盒子模型也非常重要，乙個是box-sizing，乙個是background-clip，這兩個屬性經常會和盒子模型一起使用，這裡也一起說一下。
box-sizing屬性具有三個值，且該屬性無法繼承，該屬性用來改變盒子模型的content內容部分寬高的計算方式，預設的寬高計算方式是只計算content部分為寬高，在這裡選用不同的值可以改變這種計算方式，這三個值分別是：
border-box：將border部分和padding部分都算入width和height裡
padding-box：將padding部分計算入width和height裡
content-box：預設content內容部分計算為width和height裡
這裡舉個例子更好理解：
內容
如果這裡使用了box-sizing:padding-box的css，那麼width就是包含了padding部分了，我們知道padding的上下左右都為10px，因此content=width-padding（左右部分），因此是100-20等於80，content部分為80px。
如果這裡使用的是box-sizing:border-box的css，那麼width就是包含了border和padding部分，padding的上下左右都為10px，border的上下左右夜斗為10px，因此content=width - padding（左右）- border（左右），這樣的話就是100-20-20=60，content部分為60px。
blackground-clip屬性同樣具有三個值，該屬性的值用來選擇渲染的內容部分，預設情況下blackground-clip的預設值是content-box，也就是預設content部分進行background渲染，該屬性沒有繼承性。
content-box：background的渲染部分是content部分。
padding-box：background的渲染部分是content部分加上padding部分。
border-box：background的渲染部分是content部分加上padding部分以及border部分。
舉個例子:
內容
//以下是css
div
css盒子模型 CSS 盒子模型詳解（一）
在網頁布局中，一定離不開盒子模型這個東西。今天就來說一下這個概念。所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。或者說，每乙個可見的 html 元素都是乙個盒子。每個矩形都由元素的內容 content 內邊距 padding 邊框 b...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型，div css布局
css盒子模型 border border width 邊框的寬度 border color 邊框的顏色 border style 邊框的線型 border top 上邊框 border bottom 下邊框 border left 左邊框 border right 右邊框 padding 代表邊框...