注意：其子容器必須是block;塊元素才能運用此樣式，否則無效；
一、box-flex屬性
html**：展示效果：0102
03css**：
.wrap
.sectionone
.sectiontwo
.sectionthree
說明：必須給父容器wrap定義css屬性display:box其子容器才可以進行劃分(如果定了display:box則該容器則定義為了內聯元素，使用margin:0px auto讓其居中是無效的，要想使其居中只能通過它的父容器的text-align:center);分別給sectionone、sectiontwo、sectionthree的box-flex設定了3、2、1，也就是說這三個子容器將父容器wrap的寬度600px分為6份，sectionone占居父結構寬度的3/6即300px，sectionone占居父結構寬度的2/6即200px，sectionthree占居父結構寬度的1/6即100px。
以上是按比例數進行劃分分配的，如果其中乙個子容器或多個子容器設定了固定寬度又會怎樣劃分那？
如果其中乙個子容器或多個子容器設定了固定寬度，其它子容器沒有設定，其計算方式是這樣的：子容器如果設定了固定寬度值，該子容器則直接應用設定的寬度值，其它沒有設定的則再父容器的寬度基礎上減去子容器設定的固定寬度，在剩下的寬度基礎上按一定比例進行劃分分配。請看下面**:
html**：展示效果：0102
03css**：
.wrap
.sectionone
.sectiontwo
.sectionthree
說明：sectionthree設定了固定寬度為200px，父容器的寬度600px減去改子容器的200px還剩下400px，這400px寬度值則按box-flex設定的值進行劃分，sectionone占居3/4即300px,sectiontwo占居1/4即100px。
在以上**的基礎上給sectiontwo子容器新增margin:0px 50px使子容器之間產生一定的間隔其寬度又如何進行分配劃分的那？接著看
css**：展示效果：.wrap
.sectionone
.sectiontwo
.sectionthree
說明：父容器的寬度600px減去設定了子容器的200px基礎上再減去100px(2×50)剩下300px，這300px寬度值則按box-flex設定的值進行劃分，sectionone占居3/4即225px,sectiontwo占居1/4即75px。
二、box屬性
上面」css3彈性盒子模型之box-flex」將box-flex如何對父容器的寬度進行劃分分配講解完畢，下面在看一下父容器裡面的box屬性包括哪些box屬性，具體屬性如下**所示：
box-orient | box-direction | box-align | box-pack | box-lines1、box-orientbox-orient(orient譯為排列更準確)用來確定父容器裡子容器的排列方式，是水平還是垂直。可選屬性如下所示：
horizontal | vertical | inline-axis | block-axis | inherithorizontal、inline-axis說明：
給box設定horizontal或inline-axis屬性其效果似乎表現一致，都可將子容器水平排列，具體兩者有什麼實質差別暫時還沒有搞清楚。如果父容器選擇horizontal或inline-axis屬性對子容器進行水平排列，其是對父容器的寬度進行分配劃分。此時如果父容器定義了高度值，其子容器的高度值設定則無效狀態，所有子容器的高度等於父容器的高度值；如果父容器不設定高度值，其子容器的高度值才有效並且取最大高度值的子容器的高度。
vertical、block-axis說明：
給box設定vertical或block-axis屬性(此屬性是預設值)其效果似乎表現一致，都可將子容器垂直排列，具體兩者有什麼實質差別暫時還沒有搞清楚。如果父容器選擇vertical或block-axis屬性對子容器進行垂直排列，其是對父容器的高度進行分配劃分。此時如果父容器定義了寬度值，其子容器的寬度值設定則無效狀態；如果父容器不設定寬度值，其子容器的寬度值才有效並且取最大寬度值的子容器的寬度。
inherit說明：
inherit屬性則是讓子容器繼承父容器的相關屬性。
2、box-direction
box-direction用來確定父容器裡的子容器排列順序，具體屬性如下**所示：
normal | reverse | inheritnormal是預設值
按照html文件裡結構的先後順序依次展示。如下**，如果box-direction設定為normal，則結構依次展示sectionone、sectiontwo、sectionthree.
reverse表示反**
如上面所示設定nomal其結構的排列順序為sectionone、sectiontwo、sectionthree；如果設定reverse反轉，其結構的排列順序為sectionthree、sectiontwo、sectionone.
box-align表示父容器裡面子容器的垂直對齊方式，可選引數如下所示：
box-pack表示父容器裡面子容器的水平對齊方式，可選引數如下所示：
CSS3中 webkit box的用法
1 之前要實現橫列的web布局，通常就是float或者display inline block 但是都不能做到真正的流體布局。至少width要自己去算百分比。2.flexible box 就可以實現真正意義上的流體布局。只要給出相應屬性，瀏覽器會幫我們做額外的計算。提供的關於盒模型的幾個屬性 box...
css3中webkit box的用法
1 之前要實現橫列的web布局，通常就是float或者display inline block 但是都不能做到真正的流體布局。至少width要自己去算百分比。2.flexible box 就可以實現真正意義上的流體布局。只要給出相應屬性，瀏覽器會幫我們做額外的計算。提供的關於盒模型的幾個屬性 box...
Css3中的背景
css3對背景作了很多改變，最明顯的是可以選擇多重背景，同時它也增加了四個新的屬性。多重背景 css3中，對乙個元素可以使用一張以上的背景。除了使用逗號將分開以外，其 與css2相同。第乙個宣告的定位在元素的頂部，接下來的層列於下，像這樣 該屬確定背景畫區，有以下幾種可能的屬性 background...