CSS3中几个新增加的盒模型属性使用教程

2020-05-05 07:19:53易采站长站整理

HTML代码:

XML/HTML Code复制内容到剪贴板

<article>  
<section>01</section>  
    <section>02</section>  
    <section>03</section>  
</article>  

CSS代码:

CSS Code复制内容到剪贴板

.wrap{   
 width:600px;   
 height:108px;   
 display:-moz-box;   
 display:-webkit-box;   
 display:box;   
 -moz-box-align:stretch;   
 -webkit-box-align:stretch;   
 -o-box-align:stretch;   
 box-align:stretch;   
}   
.wrap section{   
 height:80px;   
}   
.wrap .sectionOne{   
 background:orange;   
 -moz-box-flex:1;   
 -webkit-box-flex:1;   
 box-flex:1;   
}   
.wrap .sectionTwo{   
 background:purple;   
 -moz-box-flex:2;   
 -webkit-box-flex:2;   
 box-flex:2;   
 height:108px;   
}   
.wrap .sectionThree{   
 width:100px;   
 background:green;   
}  

start
在box-align表示居顶对齐,如下图所示
201631115408970.jpg (544×99)

end
在box-align表示居底对齐,如下图所示
201631115453416.jpg (541×96)

center
在box-align表示居中对齐,如下图所示
201631115511678.jpg (539×96)

stretch
在box-align表示拉伸,拉伸到与父容器等高
201631115528844.jpg (541×98)

4、box-pack
box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示:
start | end | center | justify
HTML代码:

XML/HTML Code复制内容到剪贴板

<article>  
    <section>01</section>  
    <section>02</section>  
    <section>03</section>  
</article>  

CSS代码:

CSS Code复制内容到剪贴板

.wrap{   
 width:600px;   
 height:108px;   
 border:1px solid red;   
 display:-moz-box;   
 display:-webkit-box;   
 display:box;