css3的盒模型及網頁設計的範例_css3彈性盒布局和盒模型的區別

1、css3 彈性盒布局和盒模型的區別

彈性盒布局的容器（flex container）指的是採用了彈性盒布局的 DOM 元素，而彈性盒布局的條目（flex item）指的是容器中包含的子 DOM 元素。圖中的最外圍的邊框表示的是容器，而編號 1 和 2 的邊框表示的是容器中的條目。
從圖中可以看到，彈性盒布局中有兩個互相垂直的坐標軸：一個稱之為主軸（main axis），另外一個稱之為交叉軸（cross axis）。主軸並不固定為水平方向的 X 軸，交叉軸也不固定為垂直方向的 Y 軸。在使用時，通過 CSS 屬性聲明首先定義主軸的方向（水平或垂直），則交叉軸的方向也相應確定下來。容器中的條目可以排列成單行或多行。主軸確定了容器中每一行上條目的排列方向，而交叉軸則確定行本身的排列方向。可以根據不同的頁面設計要求來確定合適的主軸方向。有些容器中的條目要求從左到右水平排列，則主軸應該是水平方向的；而另外一些容器中的條目要求從上到下垂直排列，則主軸應該是垂直方向的。
確定主軸和交叉軸的方向之後，還需要確定它們各自的排列方向。對於水平方向上的軸，可以從左到右或從右到左來排列；對於垂直方向上的軸，則可以從上到下或從下到上來排列。對於主軸來說，排列條目的起始和結束位置分別稱為主軸起始（main start）和主軸結束（main end）；對於交叉軸來說，排列行的起始和結束位置分別稱為交叉軸起始（cross start）和交叉軸結束（cross end）。在容器進行布局時，在每一行中會把其中的條目從主軸起始位置開始，依次排列到主軸結束位置；而當容器中存在多行時，會把每一行從交叉軸起始位置開始，依次排列到交叉軸結束位置。
彈性盒布局中的條目有兩個尺寸：主軸尺寸和交叉軸尺寸，分別對應其 DOM 元素在主軸和交叉軸上的大小。如果主軸是水平方向，則主軸尺寸和交叉軸尺寸分別對應於 DOM 元素的寬度和高度；如果主軸是垂直方向，則兩個尺寸要反過來。與主軸和交叉軸尺寸對應的是主軸尺寸屬性和交叉軸尺寸屬性，指的是 CSS 中的屬性 width 或 height。比如，當主軸是水平方向時，主軸尺寸屬性是 width，而 width 的值是主軸尺寸的大小。
彈性盒布局模型中的 CSS 樣式聲明分別適用於容器或條目。在下面的內容中會詳細的介紹相關的 CSS 屬性。首先介紹如何使用彈性盒布局模型進行基本的頁面布局。在本文的所有代碼示例中，容器的 CSS 類名統一為 flex-container，而條目的 CSS 類名則為 flex-item。所有的示例都可以在CodePen上進行預覽。

2、css3中用哪個屬於可解決盒子模型在不同瀏覽器下表現不一致的問題

css3用這句把盒模型設為怪異模式就一致了：

box-sizing: border-box;/*請自行添加相關瀏覽器前綴*/

問題是ie低版本是不認專css3這句的，所屬以更建議用正確的html聲明，讓瀏覽器解析盒模型時用標准模式來形成一致的尺寸。如果正確的聲明了xhtml或html5，在不同瀏覽器下應該是表現一致的，除非你還有什麼特別的代碼行為觸發了怪異模式。

3、以下哪些css3屬性可設定彈性盒子模型讓子元素反向排列

「以下哪些css3屬性」選項呢？

box-direction 屬性用於改變容器的顯示順序,使之反向排列。默認的情況下，內block 級元素容是按照載入順序從上到下排列， inline 級元素是從左到右排列的。下面來看看box-direction：

reverse：block 級元素顯示在最頂部，最後載入的 inline 級元素顯示在左邊

4、css3盒子模型，display:-webkit-box的問題

最簡單的辦法是：使用 box-flex 的每一個子元素都加上一句： width: 0%;，原因不明，反正有效。回具體CSS修改如下：

.test{
  background:red;
  display:-webkit-box;
  width:600px;
  height:300px;
}
.test1{
  background:green;
  -webkit-box-flex:1;
  width: 0%;                 /*  ****加上答這一行**** */
}
.test2{
  background:blue;
  -webkit-box-flex:1;
  overflow: hidden;
  width: 0%;                /*  ****加上這一行**** */
}
.test3{
background:yellow;
-webkit-box-flex:1;
width: 0%;                 /*  ****加上這一行**** */
}

5、css3的彈性框模型是什麼意思？

彈性盒模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間。這與XUL（火狐使用的用戶交互語言）相似，其它語言也使用相同的盒模型，如XAML 、GladeXML。

使用該模型，可以很輕松的創建自適應瀏覽器窗口的流動布局或自適應字體大小的彈性布局。例子使用以下的HTML代碼：

傳統的盒模型基於HTML流在垂直方向上排列盒子。使用彈性盒模型可以規定特定的順序，也可以反轉之。要開啟彈性盒模型，只需設置擁有子盒子的盒子的display的屬性值為box（或inline-box）即可。

display: box;

水平或垂直分布

「box-orient」定義分布的坐標軸：vertical和horizional。這兩個值定義盒子如何顯示

body{
display: box;
box-orient: horizontal;
}

反向分布

「box-direction」可以設置盒子出現的順序。默認情況下，只需定義分布坐標軸——box隨html流分布。如果為水平坐標軸，則從左到右分布；垂直坐標軸則從上到下分布。定義「box-direction」的屬性值為「reverse」，則反轉盒子的排列順序。

body {
display: box;
box-orient: vertical;
box-direction: reverse;
}

具體分布

屬性「box-ordinal-group」定義盒子分布的順序。可以隨意的控制其分布順序。這些組以一個從「1」開始的數字定義，盒模型將首先分布這些組，所有這些盒子將在每個組中。分布將從小到大排列。

body {
display: box;
box-orient: vertical;
box-direction : reverse;
}
#box1 {
box-ordinal-group: 2;
}
#box2 {
box-ordinal-group: 2;
}
#box3 {
box-ordinal-group: 1;
}

盒子尺寸

默認情況下，盒子並不具有彈性，如果box-flex的屬性值至少為1時，則變得富有彈性。

如果盒子不具有彈性，它將盡可能的寬使其內容可見，且沒有任何溢出，其大小由「width」和「height」來決定（或min-height、min-width、max-width、max-height）。

如果盒子是彈性的，其大小將按下面的方式計算：

具體的大小聲明（width、height、min-width、min-height、max-width、max-height）；

父盒子的大小和所有餘下的可利用的內部空間

如果盒子沒有任何大小聲明，那麼其大小將完全取決於父box的大小。即：盒子的大小等於父級盒子的大小乘以其box-flex在所有子盒子box-flex總和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。

如果一個或更多的盒子有一個具體的大小聲明，那麼其大小將計算其中，餘下的彈性盒子將按照上面的原則分享剩下的可利用空間。

看看下面的例子，理解起來更容易。

所有盒子都是彈性的

下面的例子中，box1的大小為box2的兩倍，box2與box3大小一樣。看起來好像是用百分比定義盒子的大小，但是有一個區別：使用彈性盒模型，增加一個盒子，無須重新計算其大小。

body {
display: box;
box-orient: horizontal;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
box-flex: 1;
}

一些盒子有固定大小

下面的例子中，box3並不是彈性的，寬度為160px；這樣box1和box2將有240px的可利用空間。因此，box1的寬度為160px(240*2/3)，box2的寬度為80px(240*1/3)。

body {
display: box;
box-orient: horizontal;
width: 400px;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
width: 160px;
}

溢出管理

因為是彈性盒子、非彈性盒子混排，有可能所有盒子的尺寸大於或小於父盒子的尺寸。這樣就有可能空間太多或空間不足。

空間太多如何處理

可利用空間的分布取決於兩個屬性值：box-align 和 box-pack。

屬性「box-pack」管理水平方向上的空間分布，有以下四個可能屬性：start、end、 justify、 or center。

start 所有盒子在父盒子的左側，餘下的空間在右側；

end所有盒子在父盒子的右側，餘下的空間在左側；

justify 餘下的空間在盒子間平均分配；

center 可利用的空間在父盒子的兩側平均分配。

屬性「box- align」管理垂直方向上的空間分布，有以下五個可能屬性之：start、 end,、center、 baseline和 stretch。

start 每個盒子沿父盒子的上邊緣排列，餘下的空間位於底部；

end 每個盒子沿父盒子的下邊緣排列，餘下的空間位於頂部；

center 可用空間平均分配，上面一半，下面一半；

baseline 所有盒子沿著它們的基線排列，餘下的空間可前可後；

stretch 每個盒子的高度調整到適合父盒子的高度

body {
display: box;
box-orient: horizontal;
width: 400px;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
width: 160px;
}

空間不足怎麼辦

與傳統的盒模型一樣，overflow屬性用來決定其顯示方式。為了避免溢出，你可以設置box-lines為multiple使其換行顯示。

彈性盒模型看起來很不錯，Gecko 和 WebKit對該模型都有一些嘗試性的測試。在這些屬性之前加上-moz和-webkit即可使用該屬性。也即是說，firefox、safari、chrome可以使用這些特性，可以看看這個彈性盒模型的demo。

6、css3什麼屬性可以改變盒模型?

比如你現在CSS盒子塊里現有那些樣式然後你需要怎麼去改變呵呵麻煩您說清楚我們好為你跟好的解答

7、使用css3時能選擇是標准盒模型和傳統ie盒模型嗎

css3是解釋語言，你寫下的代碼，是被客戶端的瀏覽器編譯的，所有才會有兼容的問題，不存在選擇標准盒模型和傳統ie盒模型，客戶端用的瀏覽器是什麼版本，就是用什麼內核

導航:首頁 > 萬維百科 > css3的盒模型及網頁設計的範例

css3的盒模型及網頁設計的範例

與css3的盒模型及網頁設計的範例相關的知識