CSS3盒模型
CSS有一種基礎(chǔ)設(shè)計(jì)模式叫盒模型， 定義了Web頁面中的元素是如何看做盒子來解析的。 每一個(gè)盒子有不同的展示界面， 在 CSS 中 主要有以下幾種盒模型： inline、inline- block、block、table、absolute，position、float。 瀏覽器把每個(gè)元素看 一個(gè)盒模型， 每一個(gè)盒模型是由以下幾個(gè)屬性組合所決定的： display、position、float、width、height、margin、padding和border等， 不同類型的盒模型會產(chǎn)生不同的布局。
什么是盒模型？
CSS中每一個(gè)元素都是一個(gè)盒模型，包括HTML和body標(biāo)簽元素。在平時(shí)設(shè)計(jì)中，大家對content、padding、margin、background和border來說一定不會陌生了， 因?yàn)楹心Ｐ投季邆溥@些屬性。 其中width、height、border、background、padding和margin之間的層次關(guān)系和相互影響，可以 看出 padding、content、 background-image、background-color，它們四者構(gòu)成了Z軸（ 垂直屏幕的坐標(biāo)） 多重層疊關(guān)系。 但是border與margin、padding三者之間應(yīng)該是平面上 的并級關(guān)系，并不能構(gòu)成Z軸的層疊關(guān)系。
在CSS中盒模型被分為兩種：第 一種 是 W3C 的 標(biāo)準(zhǔn) 模型。另一種 是 IE 的 傳統(tǒng) 模型。
它們相同之處都是對元素計(jì)算尺寸的模型，具體說就是對元素的width、height、padding和border以及元素實(shí)際尺寸的計(jì)算關(guān)系，不同之處是兩者的計(jì)算方法 不一致。

成都創(chuàng)新互聯(lián)是專業(yè)的當(dāng)雄網(wǎng)站建設(shè)公司，當(dāng)雄接單;提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行當(dāng)雄網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

1. W3C的標(biāo)準(zhǔn)盒模型。
2. http:/ /www.iis7.com/b/plc/
   外盒尺寸計(jì)算（元素空間尺寸）
   element空間高度＝內(nèi)容高度＋內(nèi)距＋邊框＋外距
   element空間寬度＝內(nèi)容寬度＋內(nèi)距＋邊框＋外距內(nèi)盒尺寸計(jì)算（ 元素大?。?br/>element高度＝內(nèi)容高度＋內(nèi)距＋邊框（height為內(nèi)容高度）
   element 寬度＝內(nèi)容寬度＋內(nèi)距＋邊框（width為內(nèi)容寬度）
3. IE傳統(tǒng)下盒模型（ IE6以下，不包含IE6版本或QuirksMode下IE5.5+）。
   外盒尺寸計(jì)算（ 元素空間尺寸）
   element空間高度＝內(nèi)容高度＋外距（height包含了元素內(nèi)容寬度、邊框、內(nèi)距）
   element寬間寬度＝內(nèi)容寬度＋外距（width包含了元素內(nèi)容寬度、邊框、內(nèi)距）
   內(nèi)盒尺寸計(jì)算（ 元素 大?。?br/>element高度＝內(nèi)容高度（ height 包含了元素內(nèi)容寬度、邊框、內(nèi)距）
   element寬度＝內(nèi)容寬度（ width包含了元素內(nèi)容寬度、邊框、內(nèi)距）
   為了解決這種問題， CSS3增添 了 一個(gè)盒模型屬性box-sizing，能夠事先定義盒模型的尺寸解析方式，box- sizing 的 屬性 值 主要 有 以下 三個(gè)：
   1· content-box： 默認(rèn)值， 讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度和高度（ width/ height） 等于元素邊框?qū)挾龋?border） 加上元素內(nèi)距（ padding） 加上元素內(nèi)容寬度或高度（ content width/ height），也就是 element width/ height=border+padding+content width/ height。
   2· border-box： 此值會重新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統(tǒng)的盒模型（ IE6以下版本和IE6～7怪異模式）。元素的寬度或高度等于元素 內(nèi)容的寬度或高度。 從盒模型介紹可知， 這里的內(nèi)容寬度或高度包含了元素的border、padding、內(nèi)容的寬度或高度（ 此處的內(nèi)容寬度或高度＝盒子的寬度或 高度-邊框-內(nèi)距）。
   3· inherit：此值使元素繼承父元素的盒模型模式。 box-sizing屬性主要用來控制元素的盒模型的解析模式， 其主要目的是控制元素的總寬度。 在W3C規(guī)范中， 元素的box-sizing默認(rèn)屬性值是content-box 值， 如果不顯式重置box-sizing屬性值為border-box， 才能明確對元素設(shè)置一個(gè)總寬度。在這種情況之下會使 頁面布局更加方便。