css3中的display：-webkit-box的用法

来源：互联网发布：编写网站的软件编辑：程序博客网时间：2024/05/18 22:47

css3中的display：-webkit-box的用法

webkit-box

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

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

3.box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。

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

box-orient

子元素排列 vertical（竖排）orhorizontal（横排）

box-flex

兄弟元素之间比例，仅作一个系数

box-align

box排列

box-direction

Box方向

box-flex-group

以组为单位的流体系数

box-lines

box-ordinal-group

以组为单位的子元素排列方向

-moz-box-pack:end;

-webkit-box-pack:end;
效果图

box-pack以下是关于flexiblebox的几个实例

1.1. 四列自适应的布局。

效果图

1.1html

<!DOCTYPE html>

<html>

<head>

<title>css3中webkit-box的用法</title>

</head>

<style>

.wrap {

display:-moz-box;

display:box;

display: -webkit-box;

-webkit-box-orient: horizontal;/* 横排显示*/

}

.child {

min-height: 200px;

border: 2px solid orangered;

-webkit-box-flex: 1; /* 一比一*/

margin: 20px;

font-size: 100px;

font-weight: bold;

font-family: Georgia;

-webkit-box-align: center; /* 居中显示*/

}

</style>

<body>

</div>

</body>

</html>

1.2. 当一列定宽，其余两列分配不同比例即可（三列布局，）

效果图

html代码

<head>

<title>css3中webkit-box的用法</title>

</head>

<style>

.wrap {

display: -webkit-box;

-webkit-box-orient: horizontal;/*横排*/

}

.child {

min-height: 200px;

border: 2px solid orange;

-webkit-box-flex: 1;

margin: 10px;

font-size: 50px;

font-weight: bold;

font-family: Georgia;

-webkit-box-align: center;

}

.w100 {width: 100px}

.flex1 {-webkit-box-flex: 1}

.flex2 {-webkit-box-flex: 2}

</style>

<body>

</div>

</body>

1.1. 下面是一个常见的web page 的基本布局

效果图

<head>

<title>css3中webkit-box的用法</title>

</head>

<style>

header, footer, section {

border: 5px solid #FFA500;

font-family: Georgia;

font-size: 40px;

text-align: center;

margin: 20px;

}

#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>

<body>

<header>Header</header>

</div>

<footer>Footer</footer>

</div>

</body>

0 0