盒子模型是如何使用的呢?
首先我们来看看
<html> <head> <title>box</title> <meta charset=-"utf-8"> </head> <body> <!--盒子模型--> <div class="ub"> </div> <!--简单的一个盒子模型--> <div class="ub"> 盒子模型分为三块，前边占2份，后边占份 <div class="ub-f2"> <div class="ub ub-con ub-ac ub-pc">我是内容 占2份大小 </div> </div> <div class="ub-f1"> <div class="ub-f2"> <div class="ub ub-con ub-ac ub-pc">我是内容 占1份大小 </div> </div> </div> </div> </body> </html>
.ub{
display:-webkit-box;
}
.ub-f1{
position:relative;
-webkit-box-flex:1;
}
.ub-f2{
position:relative;
-webkit-box-flex:2;
}
.ub-f3{
position:relative;
-webkit-box-flex:3;
}
.ub-f4{
position:relative;
-webkit-box-flex:4;
}
/** ub-con **/
.ub-con{
position:absolute;
width:100%;
height:100%;
}
/**上下对齐方式**/
.ub-ac{
-webkit-box-align:center;
}
.ub-ae{
-webkit-box-align:end;
}
/**左右对齐方式**/
.ub-pc{
-webkit-box-pack:center;
}
.ub-pe{
-webkit-box-pack:end;
}
/**两端对齐**/
.ub-pj{
-webkit-box-pack:justify;
}
/**竖向反转**/
.ub-rev{
-webkit-box-reverse:reverse;
}
/**竖向排列**/
.ub-ver{
-webkit-box-direction:vertical;
}