移動web開發實踐-css3（1）盒模型display:-webkit-box;的使用

時間 2019-11-15

標籤移動 web 開發實踐 css3 css 模型 display webkit box 使用欄目無線简体版

原文原文鏈接

提到移動佈局不得不提到盒模型display:-webkit-box;這個屬性，在移動佈局中浮動已經不在重要，相反自適應成爲主要的需求，因此display:-webkit-box;變得尤其重要。css

　　box-flex是css3新添加的盒子模型屬性，它的出現能夠解決咱們經過N多結構、css實現的佈局方式。經典的一個佈局應用就是佈局的垂直等高、水平均分、按比例劃分。

目前box-flex屬性尚未獲得firefox、Opera、chrome瀏覽器的徹底支持，但可使用它們的私有屬性定義firefox(-moz)、opera(-0)、chrome/safari（-webkit)。

1、box-flex屬性

box-flex主要讓子容器針對父容器的寬度按必定規則進行劃分

.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設置了三、二、1，也就是說這三個子容器將父容器wrap的寬度600px分爲6份，sectionOne佔居父結構寬度的3/6即300px，sectionOne佔居父結構寬度的2/6即200px，sectionThree佔居父結構寬度的1/6即100px。

以上是按比例數進行劃分分配的，若是其中一個子容器或多個子容器設置了固定寬度又會怎樣劃分那？

若是其中一個子容器或多個子容器設置了固定寬度，其它子容器沒有設置，其計算方式是這樣的：子容器若是設置了固定寬度值，該子容器則直接應用設置的寬度值，其它沒有設置的則再父容器的寬度基礎上減去子容器設置的固定寬度，在剩下的寬度基礎上按必定比例進行劃分分配。請看下面代碼

說明：

sectionThree設置了固定寬度爲200px，父容器的寬度600px減去改子容器的200px還剩下400px，這400px寬度值則按box-flex設置的值進行劃分，sectionOne佔居3/4即300px,sectionTwo佔居1/4即100px。

在以上代碼的基礎上給sectionTwo子容器添加margin:0px 50px使子容器之間產生必定的間隔其寬度又如何進行分配劃分的那？接着看

說明：

父容器的寬度600px減去設置了子容器的200px基礎上再減去100px(2×50)剩下300px，這300px寬度值則按box-flex設置的值進行劃分，sectionOne佔居3/4即225px,sectionTwo佔居1/4即75px。

2、box屬性

上篇文章」css3彈性盒子模型之box-flex「將box-flex如何對父容器的寬度進行劃分分配講解完畢，下面在看一下父容器裏面的box屬性包括哪些box屬性，具體屬性以下代碼所示：

box-orient | box-direction | box-align | box-pack | box-lines

一、box-orient

box-orient(orient譯爲排列更準確)用來肯定父容器裏子容器的排列方式，是水平仍是垂直。可選屬性以下所示：

horizontal | vertical | inline-axis | block-axis | inherit

.wrap {
    width:600px; height:200px; display:-moz-box; display:-webkit-box; display:box; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal; //水平排列 }

horizontal、inline-axis說明：

給box設置horizontal或inline-axis屬性其效果彷佛表現一致，均可將子容器水平排列，具體二者有什麼實質差異暫時尚未搞清楚。

若是父容器選擇horizontal或inline-axis屬性對子容器進行水平排列，其是對父容器的寬度進行分配劃分。此時若是父容器定義了高度值，其子容器的高度值設置則無效狀態，全部子容器的高度等於父容器的高度值；若是父容器不設置高度值，其子容器的高度值纔有效而且取最大高度值的子容器的高度。

vertical、block-axis說明：

給box設置vertical或block-axis屬性(此屬性是默認值)其效果彷佛表現一致，均可將子容器垂直排列，具體二者有什麼

實質差異暫時尚未搞清楚。

若是父容器選擇vertical或block-axis屬性對子容器進行垂直排列，其是對父容器的高度進行分配劃分。此時若是父容器

定義了寬度值，其子容器的寬度值設置則無效狀態；若是父容器不設置寬度值，其子容器的寬度值纔有效而且取最大寬度

值的子容器的寬度。

inherit說明：

inherit屬性則是讓子容器繼承父容器的相關屬性。

二、box-direction

box-direction用來肯定父容器裏的子容器排列順序，具體屬性以下代碼所示：

normal | reverse | inherit

.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; }

normal是默認值

按照HTML文檔裏結構的前後順序依次展現。以下代碼，若是box-direction設置爲normal，則結構依次展現sectionOne、sectionTwo、sectionThree

reverse表示反轉

如上面所示設置nomal其結構的排列順序爲sectionOne、sectionTwo、sectionThree；若是設置reverse反轉，其結構的排列順序爲sectionThree、sectionTwo、sectionOne

三、box-align

box-align表示父容器裏面子容器的垂直對齊方式，可選參數以下所示：

start | end | center | baseline | stretch

.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; }