注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

webkit-box  

2012-08-10 10:19:12|  分类: 移动客户端 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

1、之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性,浏览器会帮我们做额外的计算。

提供的关于盒模型的几个属性:


box-orient           子元素排列 vertical or horizontal
box-flex             兄弟元素之间比例,仅作一个系数
box-align            box 排列
box-direction        box 方向
box-flex-group       以组为单位的流体系数
box-lines            
box-ordinal-group    以组为单位的子元素排列方向
box-pack

以下是关于flexible box的几个实例
1、三列自适应布局,且有固定margin:

<!DOCTYPE html><html><style>
.wrap {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
}
.child {
    min-height: 200px;
    border: 2px solid #666;
    -webkit-box-flex: 1;
    margin: 10px;
    font-size: 100px;
    font-weight: bold;
    font-family: Georgia;
    -webkit-box-align: center;
}
</style><div class="wrap"><div class="child">1</div><div class="child">2</div><div class="child">3</div></div></html>

2、当一列定宽,其余两列分配不同比例亦可(三列布局,一列定宽,其余两列按1:2的比例自适应):

<!DOCTYPE html><html><meta charset="utf-8" /><style>
.wrap {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
}
.child {
    min-height: 200px;
    border: 2px solid #666;
    margin: 10px;
    font-size: 40px;
    font-weight: bold;
    font-family: Georgia;
    -webkit-box-align: center;
}
.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
</style><div class="wrap"><div class="child w200">200px</div><div class="child flex1">比例1</div><div class="child flex2">比例2</div></div></html>


3、下面是一个常见的web page 的基本布局:

<!DOCTYPE html><html><meta charset="utf-8" /><style>
header, footer, section {
    border: 10px solid #333;
    font-family: Georgia;
    font-size: 40px;
    text-align: center;
    margin: 10px;
}
#doc {
    width: 80%;
    min-width: 600px;
    height: 100%;
    display: -webkit-box;
 -webkit-box-orient: vertical;
    margin: 0 auto;
}
header,
footer {
    min-height: 100px;
    -webkit-box-flex: 1;
}
#content {
    min-height: 400px;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
}

.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
.flex3 {-webkit-box-flex: 3}
</style><div id="doc"><header>Header</header><div id="content"><section class="w200">定宽200</section><section class="flex3">比例3</section><section class="flex1">比例1</section></div><footer>Footer</footer></div></html>


 


  评论这张
 
阅读(1492)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017