1.Box-flex 定义盒子的弹性空间
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
例题:中间宽度固定,两侧宽度自适应:
.box div:nth-of-type(1){ -webkit-box-flex:1;}
.box div:nth-of-type(2){ -webkit-box-flex:400px;}
.box div:nth-of-type(3){ -webkit-box-flex:1;}
中间自适应屏幕,两侧固定宽度:
.box div:nth-of-type(1){ -webkit-box-flex:400px;}
.box div:nth-of-type(2){ -webkit-box-flex:1;}
.box div:nth-of-type(3){ -webkit-box-flex:400px;}
或者
.box div:nth-of-type(1){ width:400px; float:left;}
.box div:nth-of-type(2){ float:left;}
.box div:nth-of-type(3){ width:400px; float:left;}
一个未知宽高的块元素水平垂直居中:
方法一:
table:
table {position:absolute; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.5);}
.test {background:red; display:inline-block;}
<table>
<tr>
<td>
<div class="test">
水平垂直居中了吧<br>
两行文字哦
</div>
</td>
</tr>
</table>
方法二:
.test {position: absolute; left:50%; top:50%;
-webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}//css3里面有个比较特殊的属性是相对自身宽高来计算的。那就是transform:translate();
方法三:
.a{
position:absolute;
width:100px;
height:100px;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
方法四:
弹性盒模型:
.flex {display:-webkit-box; display:-ms-flex; display:-webkit-flex; display:flex;}
.flex-hc { -webkit-box-pack:center;
-ms-justify-content:center;
-webkit-justify-content:center;
justify-content:center;}
.flex-vc { -webkit-box-align:center;
-ms-align-items:center;
-webkit-align-items:center;
align-items:center;}
.wrap {position:fixed; width:100%; height:100%; left:0px; top:0px;}
.test{ width: 100px; height: 100px; background: red;}