a{width:500px;overflow-x:scroll;}display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。具体详细情况我也说不清楚，不过在网上给你找了一篇关于这两个CSS盒子模型的详细介绍。你自己去看看吧>代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> flex box d性布局 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
html,body{height:100%;margin:0;}/需要添加高度控制，否则无法撑满整个屏幕/
body{
display:-webkit-box;
-webkit-box-orient:vertical;/按照垂直方向上进行自适应处理/
}
content{-webkit-box-flex:1;/分配剩余的所有空间/} header{height:50px;min-width:500px;}/顶部模块高度定死/
logo{width:100px;height:50px;background:#99f;}/为区分模块，设置了背景色 logo部分固定宽高/
nav{height:50px;background:#ccc;}/nav模块不固定宽度/
content{min-height:100px;}/为防止之后的调整窗口大小是出现影响视觉效果的问题，特设置最小高度/
content,header{display:-webkit-box;/为content,header部分也添加box的展示模式/}
nav{-webkit-box-flex:1;}
con2{-webkit-box-flex:1;}
con1{width:200px;background:#f99;}/固定宽度，高度不定/
con2{min-width:200px;background:#999;}/同上的min-height/
con3{width:100px;background:#9f9;}/固定宽度，高度不定/
footer{height:50px;min-width:500px;background:#ccc;}/固定高度/
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<div class="header">
<div class="logo">logo部分，宽高固定</div>
<div class="nav">nav部分，高度固定，宽度自适应</div>
</div>
<div class="content">
<div class="con1">内容初始化第1模块</div>
<div class="con2">内容初始化第2模块</div>
<div class="con3">内容初始化第3模块</div>
</div>
<div class="footer">底部，宽度不定，高度固定</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）