css3盒子模型

标签：style   blog   io   ar   color   sp   on   div   art   

通常要把一个容器分成三栏的话比较简便的方法是把三个字容器的 width 都设为33.3%，这种方法无法把父容器的宽度完全填充，在父容器的宽度足够大的时候留下的空白会是页面变得很不美观。利用css3盒子模型，这种问题将迎刃而解。

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

.content{
    display:-webkit-box;
    display:-moz-box;
    display:box;
    width:500px;
    height:200px;
}
.v1{
    background-color:#0f0;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
     box-flex: 2;
}
.v2{
     background-color:#f00;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
     box-flex: 1; 
}
.v3{
    width:100px;
    background-color:#0f0;
}

几个有用的属性：

-webkit-box-orient

box-orient属性用于设置盒模型内部元素的排列方式：

1. inline-axis：从左向右排列（默认值）
2. horizontal：水平排列
3. vertical：垂直排列
4. block-axis：从上向下排列

-webkit-box-sizing

box-sizing属性用于改变容器的盒模型组成方式（规定两个并排的带边框的框）：

1. content-box: 此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content}
2. border-box: 此值改变css2.1盒模型组成模式，content|border|padding {element width=content}

-webkit-box-direction

box-direction 属性用于改变容器的显示顺序,使之反向排列（以反方向显示 div 框的子元素），默认的情况下，block 级元素是按照加载顺序从上到下排列， inline 级元素是从左到右排列的：

box-direction: normal|reverse|inherit;

1. reverse：block 级元素显示在最顶部，最后加载的 inline 级元素显示在左边

-webkit-box-pack

box-pack 属性可以用于设置子容器在水平轴上的空间分配方式，它共有四种可能值：start，end，justify 和 center：

1. start ：所有子容器都分布在父容器的左侧，右侧留空
2. end ：所有子容器都分布在父容器的右侧，左侧留空
3. justify ：所有子容器平均分布（默认值）
4. center ：平均分配父容器剩余的空间（能压缩子容器的大小，并且有全局居中的效果）

-webkit-box-align

box-align 属性用于管理子容器在竖轴上的空间分配方式，共有五个值：start，end，center，baseline 和 stretch。

1. start ：子容器从父容器顶部开始排列
2. end ：子容器从父容器底部开始排列
3. center ：子容器横向居中
4. baseline ：所有子容器沿同一基线排列
5. stretch ：所有子容器和父容器保持同一高度（默认值）

支持chrome和firefox和safari，ie和opera无效。

css3盒子模型

标签：style   blog   io   ar   color   sp   on   div   art   

原文地址：http://www.cnblogs.com/shupiankele/p/4153251.html