盒子模型是如何使用的呢?
首先我们来看看
<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;
}
/**
contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
**/
.ub-img
{
-webkit-background-size:contain;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.ub-img1
{
-webkit-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
.ub-img2
{
background-repeat:repeat-x;
background-size:auto 100%
}
.ub-img3
{
background-repeat:repeat-y;
background-size:100% auto
}
.ub-img4
{
-webkit-background-size:100% auto;
background-size:100% auto;
background-repeat:no-repeat;
background-position:center;
}
.ub-img5
{
-webkit-background-size:auto 100%;
background-size:auto 100%;
background-repeat:no-repeat;
background-position:center;
}
.ub-img6
{
background-repeat:no-repeat;
background-position:center;
}
.ub-img7
{
-webkit-background-size:100% 100%;
background-size:100% 100%;
background-repeat:no-repeat;
background-position:center;
}box中的图，基本不常用，如果要使用可以自己去写代码，没有必要在大脑中去翻译一下官方写的代码，
因此对背景的css代码需要知道
例如：
background-image:url(...); background-position:center; background-size:contain|conver|50% 50%; 如果是数字前边是宽后边是高 background-repeat:no-repeat; background-color:#fff;
基本就是这些。