CSS3 box學習，css3box學習

CSS3 box學習，css3box學習

CSS3提供的盒子樣式可實現對盒子內部元素的彈性布局，我們就不用使用float或者display：inline來使塊元素橫向排布（box-orient可以做到），或者計算每個塊的寬度or百分比來實現均分（box-flex可做到）。so，大膽地用吧妹紙。對父元素設定display:box，可對內部的塊級子項目進行布局，此時，內部的元素按照內嵌元素的相片順序，但可以設定寬和高。對父盒子使用如下的樣式：

1.box-orient

規定了內部子項目的相片順序，具體有

• vertical
• horizontal
• inline-axis
• block-axis

2.box-align

規定了內部子項目在垂直方向上的相片順序：

• center：即垂直置中於父盒子中
• start：從父元素頂部開始排列
• end：對齊父元素底部
• stretch：縱向展開填滿整個父元素
• baseline

3.box-pack

在水平方向上的對齊
start：靠左對齊
center：實現子項目在水平方向上置中對齊
justify：左右對齊
end：靠右對齊

說明：box-align和box-pack對齊的解釋都和box-orient的設定有關。

4.box-direction

子盒子的排列順序。

5.box-sizing

設定width都包括了盒子的哪些部分：

• content-box：width=內容區
• border-box：width=內容區+padding+border

6.box-flex

這個屬性要在子項目中設定，用來分配父元素的剩餘寬度和高度（當設定為vertical排布時），設定這個屬性必須由父元素設定了display：box才有用。
剩餘寬度的理解：

父容器寬度-子容器固定寬度（優先）/子容器內容寬度-子容器margin&border&padding

box-align和box-pack對內嵌元素也起作用，而box-flex對內嵌元素不管用。

發現一個奇怪的現象，當img和input標籤放一起，使用box-align:center無法對input垂直置中，而當對img設定vertical-align:middle後就可以了。艾瑪，應該是vertical-align的關係有關，而不是由box-align控制的。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。