首页 > 代码库 > css3盒子模型

css3盒子模型

通常要把一个容器分成三栏的话比较简便的方法是把三个字容器的 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盒子模型