css3盒子模型

通常要把乙個容器分成三欄的話比較簡便的方法是把三個字容器的 width 都設為33.3%，這種方法無法把父容器的寬度完全填充，在父容器的寬度足夠大的時候留下的空白會是頁面變得很不美觀。利用css3盒子模型，這種問題將迎刃而解。

<
div 
class
="content"
>
<
div 
class
="v1"
>
div>
<
div 
class
="v2"
>
div>
<
div 
class
="v3"
>
div>
div>

.content.v1.v2.v3

幾個有用的屬性：

-webkit-box-orient

box-orient屬性用於設定盒模型內部元素的排列方式：

inline-axis：從左向右排列（預設值）

horizontal：水平排列

vertical：垂直排列

block-axis：從上向下排列

-webkit-box-sizing

box-sizing屬性用於改變容器的盒模型組成方式

（規定兩個併排的帶邊框的框）：

content-box: 此值維持css2.1盒模型的組成模式，border|padding|content

border-box: 此值改變css2.1盒模型組成模式，content|border|padding

-webkit-box-direction

box-direction 屬性用於改變容器的顯示順序,使之反向排列（以反方向顯示 div 框的子元素），預設的情況下，block 級元素是按照載入順序從上到下排列， inline 級元素是從左到右排列的：

box-direction: normal|reverse|inherit;

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

-webkit-box-pack

box-pack 屬性可以用於設定子容器在水平軸上的空間分配方式，它共有四種可能值：start，end，justify 和 center：

start ：所有子容器都分布在父容器的左側，右側留空

end ：所有子容器都分布在父容器的右側，左側留空

justify ：所有子容器平均分布（預設值）

center ：平均分配父容器剩餘的空間（能壓縮子容器的大小，並且有全域性居中的效果）

-webkit-box-align

box-align 屬性用於管理子容器在豎軸上的空間分配方式，共有五個值：start，end，center，baseline 和 stretch。

start ：子容器從父容器頂部開始排列

end ：子容器從父容器底部開始排列

center ：子容器橫向居中

baseline ：所有子容器沿同一基線排列

stretch ：所有子容器和父容器保持同一高度（預設值）

支援chrome和firefox和safari，ie和opera無效。