css3中webkit-box的用法[教程]

css3-webkit-box

实例3截图

webkit-box

一、前言

1、之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。

2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性,浏览器会帮我们做额外的计算。

?PS : ?css3不支持低版本浏览器,建议用最新版本谷歌或火狐浏览器!

二、关于盒模型的几个属性

box-orient 子元素排列 vertical or horizontal
box-flex 兄弟元素之间比例,仅作一个系数
box-align box 排列
box-direction box 方向
box-flex-group 以组为单位的流体系数
box-lines
box-ordinal-group 以组为单位的子元素排列方向
box-pack 通过一起使用 box-align 和 box-pack 属性 →? ?w3c

 

三、以下是关于flexible box的几个实例

1、三列自适应布局,且有固定margin:

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class="wrap">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</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>

大话可以复制三个实例代码到记事本里,后缀改成.html 打开看下效果!

标签: