css盒模型

css有種基礎實際模式叫盒模型，定義了web頁面中的元素是如何看作盒子來解析的。

一、css盒模型簡介

　　在css中主要有如下幾種盒模型：inline、inline-block，block、table、absolute position、float。

　　瀏覽器把每一個元素看作一個盒模型，每一個盒模型是由如下幾個屬性組合所決定的：display、position、float、width、height、margin、padding和border等，不一樣類型的盒模型會產生不一樣的佈局。

 

　　w3c標準的盒模型

　　外盒尺寸計算

　　　　element空間高度 = 內容高度（height）+ 內邊距（padding）+ 邊框（border）+ 外邊距（margin）

　　　　element空間寬度 = 內容寬度（width）+ 內邊距（padding）+ 邊框（border）+ 外邊距（margin）

　　內盒尺寸

　　　　element高度 = 內容高度（height）+ 內邊距（padding）+ 邊框（border）

　　　　element寬度 = 內容寬度（height）+ 內邊距（padding）+ 邊框（border）

二、css3盒模型

　　css3盒模型增添了一個盒模型屬性box-sizing，可以事先定義盒模型的尺寸解析方式，語法爲：box-sizing:content-box | border-box | inherit

　　box-sizing:content-box;默認值，讓元素維持w3c的標準盒模型。元素的寬度和高度（width、height）等於border+padding+height/width

　　box-sizing:border-box;此值會從新定義css2.1中盒模型組成的模式，讓元素維持IE傳統的盒模型（IE6如下版本和IE6~7的怪異模式）。元素的寬高等於元素內容（content）的寬高

　　box-sizing:inherit;此值使元素繼承父元素的盒模型模式；

　　box-sizing屬性主要用來控制元素的盒模型的解析模式，其主要目的是控制元素的總寬度。在w3c規範中，元素的box-sizing默認屬性值是content-box值，若是不顯示屬性值box-sizing屬性值爲border-box，才能明確對元素設置一個總寬度。這種狀況下會使頁面佈局更加方便。

 

　　IE6如下以及怪異模式下的IE瀏覽器對盒模型雖然不符合W3C的標準規範，但這種解析方式並非一無可取，它也有好的一方面，無論如何修稿元素的邊框或者內邊距大小，都不會影響元素盒子的總尺寸，也就不會打亂頁面的總體佈局。而在標準瀏覽器下，按照W3C規範對盒模型的解析，一旦修改了元素的邊框或者內邊距，就會影響元素盒子的尺寸，從而影響整個頁面的佈局。