CSS3.0盒子模型:display:-webkit-box

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>css3盒子模型</title>  
 5   <style>
 6   .box3{
 7     width: 300px;
 8     height: 100px;
 9     /*设置css3盒子模型的父类*/
10     display: -webkit-box;
11     display: -moz-box;
12     display: box;
13 
14     background-color: #1d89cf;
15   }
16   .box3>section{
17     /*设置css3盒子模型的子类,将他们平分*/
18     -webkit-box-flex: 1;
19     -moz-box-flex: 1;
20     box-flex: 1;
21 
22     border: 1px solid #fff;
23     text-align: center;
24   }
25   </style>
26 </head>
27 
28 <body>
29 
30 <div class="box3">
31   <section>1</section>
32   <section>2</section>
33   <section>3</section>
34 </div>
35 
36 </body>
37 </html>

上面就是css3盒子模型最基本的一个代码。

display:-*-box; 是定义盒子模型的父容器。

-*-box-flex: 1; 是定义盒子模型的子容器在父容器中的比例。

如是1,2,1,意思就是section1、2、3分别占25%,50%,25%。

 

而-*-box有如下属性:

-*-box-orient: horizontal | vertical | inline-axis | block-axis | inherit

用来确定父容器中的子容器的布局是水平布局还是垂直布局。(默认水平)

 

-*-box-direction: normal | reverse | inherit

用来确定子容器的排列顺序,如是reverse,就是将123在页面中变成了321的排列

 

-*-box-align:start(顶对齐) | end(底对齐) | center(居中对齐) | baseline | stretch(拉伸,拉伸到和父容器等高)

用来确定子容器的垂直对齐方式。

 

-*-box-pack: start | end | center | justify

用来确定子容器的水平对齐方式。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。