2.css3中的display：-webkit-box的用法
2020-02-27 本文已影响0人
冰点雨
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;
image.png
box-pack以下是关于flexiblebox的几个实例
1.1. 四列自适应的布局。
效果图
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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 class="wrap">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
</body>
</html>
1.2. 当一列定宽，其余两列分配不同比例即可（三列布局，）
效果图
image.png
<head>
<meta charset="UTF-8">
<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 class="wrap">
<div class="child w200 ">100px</div>
<div class="child flex1">1</div>
<div class="child flex2">比例2</div>
</div>
</body>
1.3. 下面是一个常见的web page 的基本布局
效果图
image.png
<head>
<meta charset="UTF-8">
<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>
<div id=”doc”>
<header>Header</header>
<div id=”content”>
<section>定宽200</section>
<section>比例3</section>
<section>比例1</section>
</div>
<footer>Footer</footer>
</div>
</body>
