CSS3盒模型

CSS3盒模型
CSS有一種基礎設計模式叫盒模型， 定義了Web頁面中的元素是如何看作盒子來解析的。 每個盒子有不一樣的展現界面， 在 CSS 中 主要有如下幾種盒模型： inline、inline- block、block、table、absolute，position、float。 瀏覽器把每一個元素看 一個盒模型， 每個盒模型是由如下幾個屬性組合所決定的： display、position、float、width、height、margin、padding和border等， 不一樣類型的盒模型會產生不一樣的佈局。
什麼是盒模型？
CSS中每個元素都是一個盒模型，包括HTML和body標籤元素。在平時設計中，你們對content、padding、margin、background和border來講必定不會陌生了， 由於盒模型都具有這些屬性。 其中width、height、border、background、padding和margin之間的層次關係和相互影響，能夠 看出 padding、content、 background-image、background-color，它們四者構成了Z軸（ 垂直屏幕的座標） 多重層疊關係。 可是border與margin、padding三者之間應該是平面上 的並級關係，並不能構成Z軸的層疊關係。
在CSS中盒模型被分爲兩種：第 一種 是 W3C 的 標準 模型。另外一種 是 IE 的 傳統 模型。
它們相同之處都是對元素計算尺寸的模型，具體說就是對元素的width、height、padding和border以及元素實際尺寸的計算關係，不一樣之處是二者的計算方法 不一致。

1. W3C的標準盒模型。
2. http:/ /www.iis7.com/b/plc/
   外盒尺寸計算（元素空間尺寸）
   element空間高度＝內容高度＋內距＋邊框＋外距
   element空間寬度＝內容寬度＋內距＋邊框＋外距內盒尺寸計算（ 元素大小）
   element高度＝內容高度＋內距＋邊框（height爲內容高度）
   element 寬度＝內容寬度＋內距＋邊框（width爲內容寬度）
3. IE傳統下盒模型（ IE6如下，不包含IE6版本或QuirksMode下IE5.5+）。 外盒尺寸計算（ 元素空間尺寸） element空間高度＝內容高度＋外距（height包含了元素內容寬度、邊框、內距） element寬間寬度＝內容寬度＋外距（width包含了元素內容寬度、邊框、內距） 內盒尺寸計算（ 元素 大小） element高度＝內容高度（ height 包含了元素內容寬度、邊框、內距） element寬度＝內容寬度（ width包含了元素內容寬度、邊框、內距）爲了解決這種問題， CSS3增添 了 一個盒模型屬性box-sizing，可以事先定義盒模型的尺寸解析方式，box- sizing 的 屬性 值 主要 有 如下 三個： 1· content-box： 默認值， 讓元素維持W3C的標準盒模型。元素的寬度和高度（ width/ height） 等於元素邊框寬度（ border） 加上元素內距（ padding） 加上元素內容寬度或高度（ content width/ height），也就是 element width/ height=border+padding+content width/ height。 2· border-box： 此值會從新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統的盒模型（ IE6如下版本和IE6～7怪異模式）。元素的寬度或高度等於元素 內容的寬度或高度。 從盒模型介紹可知， 這裏的內容寬度或高度包含了元素的border、padding、內容的寬度或高度（ 此處的內容寬度或高度＝盒子的寬度或 高度-邊框-內距）。 3· inherit：此值使元素繼承父元素的盒模型模式。 box-sizing屬性主要用來控制元素的盒模型的解析模式， 其主要目的是控制元素的總寬度。 在W3C規範中， 元素的box-sizing默認屬性值是content-box 值， 若是不顯式重置box-sizing屬性值爲border-box， 才能明確對元素設置一個總寬度。在這種狀況之下會使 頁面佈局更加方便。