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> <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. 当一列定宽,其余两列分配不同比例即可(三列布局,)
效果图
html代码
<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.1. 下面是一个常见的web page 的基本布局
效果图
<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> |