盒模型display:-webkit-box;(轉)

標籤：基礎   enter   預設   .section   pack   strong   cal   盒子模型   nbsp   

box-flex是css3新添加的盒子模型屬性，它的出現可以解決我們通過N多結構、css實現的布局方式。經典的一個布局應用就是布局的垂直等高、水平均分、按比例劃分。目前box-flex屬性還沒有得到firefox、Opera、chrome瀏覽器的完全支援，但可以使用它們的私人屬性定義firefox(-moz)、opera(-0)、chrome/safari（-webkit)。  一、box-flex屬性box-flex主要讓子容器針對父容器的寬度按一定規則進行劃分 HTML代碼：010203 CSS代碼：.wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;}.sectionOne{background:orange;-moz-box-flex:3;-webkit-box-flex:3;box-flex:3;}.sectionTwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}.sectionThree{-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;background:green;}展示效果：說明：必須給父容器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代碼010203 CSS代碼 .wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;}.sectionOne{background:orange;-moz-box-flex:3;-webkit-box-flex:3;box-flex:3;}.sectionTwo{background:purple;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}.sectionThree{width:200px;//設定固定寬度background:green;}展示效果說明：sectionThree設定了固定寬度為200px，父容器的寬度600px減去改子容器的200px還剩下400px，這400px寬度值則按box-flex設定的值進行劃分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。在以上代碼的基礎上給sectionTwo子容器添加margin:0px 50px使子容器之間產生一定的間隔其寬度又如何進行分配劃分 的那？接著看 CSS代碼 .wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;}.sectionOne{background:orange;-moz-box-flex:3;-webkit-box-flex:3;box-flex:3;}.sectionTwo{background:purple;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;margin:0px 50px;//添加margin屬性}.sectionThree{width:200px;background:green;}展示效果說明：父容器的寬度600px減去設定了子容器的200px基礎上再減去100px(2×50)剩下300px，這300px寬度值則按box-flex設定的 值進行劃分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。 二、box屬性具體屬性如下代碼所示：box-orient | box-direction | box-align | box-pack | box-lines  1、box-orientbox-orient(orient譯為排列更準確)用來確定父容器裡子容器的相片順序，是水平還是垂直。可選屬性如下所示：horizontal | vertical | inline-axis | block-axis | inherithorizontal、inline-axis說明：給box設定horizontal或inline-axis屬性其效果似乎表現一致，都可將子容器水平排列，具體兩者有什麼實質差別暫時還 沒有搞清楚。如果父容器選擇horizontal或inline-axis屬性對子容器進行水平排列，其是對父容器的寬度進行分配劃分。此時如果父 容器定義了高度值，其子容器的高度值設定則無效狀態，所有子容器的高度等於父容器的高度值；如果父容器不設定高度 值，其子容器的高度值才有效並且取最大高度值的子容器的高度。HTML代碼：010203CSS代碼：.wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;-moz-box-orient:horizontal;-webkit-box-orient:horizontal;box-orient:horizontal;//水平排列}.sectionOne{background:orange;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}.sectionTwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}.sectionThree{width:100px;background:green;}展示效果：vertical、block-axis說明：給box設定vertical或block-axis屬性(此屬性是預設值)其效果似乎表現一致，都可將子容器垂直排列，具體兩者有什麼 實質差別暫時還沒有搞清楚。如果父容器選擇vertical或block-axis屬性對子容器進行垂直排列，其是對父容器的高度進行分配劃分。此時如果父容器定義了寬度值，其子容器的寬度值設定則無效狀態；如果父容器不設定寬度值，其子容器的寬度值才有效並且取最大寬度值的子容器的寬度。HTML代碼：010203CSS代碼：.wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;-moz-box-orient:vertical;-webkit-box-orient:vertical;box-orient:vertical;//垂直排列}.sectionOne{background:orange;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}.sectionTwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}.sectionThree{height:100px;background:green;}展示效果：inherit說明：inherit屬性則是讓子容器繼承父容器的相關屬性。2、box-directionbox-direction用來確定父容器裡的子容器排列順序，具體屬性如下代碼所示：normal | reverse | inheritnormal是預設值按照HTML文檔裡結構的先後順序依次展示。如下代碼，如果box-direction設定為normal，則結構依次展示sectionOne、 sectionTwo、sectionThreeHTML代碼：010203CSS代碼：.wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;-moz-box-direction:normal;//設定mormal預設值-webkit-box-direction:normal;//設定mormal預設值box-direction:normal;//設定mormal預設值}.sectionOne{background:orange;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}.sectionTwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}.sectionThree{width:100px;background:green;}展示效果：reverse表示反轉如上面所示設定nomal其結構的排列順序為sectionOne、sectionTwo、sectionThree；如果設定reverse反轉，其結構的排列順序為sectionThree、sectionTwo、sectionOneHTML代碼：010203CSS代碼：.wrap{width:600px;height:200px;display:-moz-box;display:-webkit-box;display:box;-moz-box-direction:reverse;//設定為反轉-webkit-box-direction:reverse;//設定為反轉box-direction:reverse;//設定為反轉}.sectionOne{background:orange;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}.sectionTwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}.sectionThree{width:100px;background:green;}展示效果：3、box-alignbox-align表示父容器裡面子容器的垂直對齊，選擇性參數如下所示：start | end | center | baseline | stretchHTML代碼：010203CSS代碼：.wrap{width:600px;height:108px;display:-moz-box;display:-webkit-box;display:box;-moz-box-align:stretch;-webkit-box-align:stretch;-o-box-align:stretch;box-align:stretch;}.wrap section{height:80px;}.wrap .sectionOne{background:orange;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}.wrap .sectionTwo{background:purple;-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;height:108px;}.wrap .sectionThree{width:100px;background:green;}start在box-align表示居頂對齊，如所示end在box-align表示居底對齊，如所示center在box-align表示置中對齊，如所示stretch在box-align表示展開，展開到與父容器等高3、box-packbox-pack表示父容器裡面子容器的水平對齊，選擇性參數如下所示：start | end | center | justifyHTML代碼：010203CSS代碼：.wrap{width:600px;height:108px;border:1px solid red;display:-moz-box;display:-webkit-box;display:box;-moz-box-pack:end;-webkit-box-pack:end;-o-box-pack:end;box-pack:end;}.wrap section{width:100px;}.wrap .sectionOne{background:orange;}.wrap .sectionTwo{background:purple;}.wrap .sectionThree{background:green;}start在box-pack表示水平居靠左對齊，如所示end在box-pack表示水平居靠右對齊，如所示center在box-pack表示水平置中對齊，如所示justify在box-pack表示水平等分父容器寬度（唯一遺憾的是，firefox與opera暫時不支援，只有safari、chrome支援）

盒模型display:-webkit-box;(轉)