弹性盒模型--新版与旧版比较（2）
?
彈性空間與元素具體位置設(shè)置是加在子元素身上的
<style>
body{
margin: 0;
}
#box{
height: 300px;
border: 1px solid #000;
新版彈性盒模型
/*display: flex;*/
老版彈性盒模型
display: -webkit-box;
}
#box div{
/*新版*/
/*flex-grow: 1;*/ 設(shè)置彈性空間，也可單獨給某個子元素設(shè)置彈性空間
/*老版*/
-webkit-box-flex:1;設(shè)置彈性空間，，也可單獨給某個子元素設(shè)置彈性空間
width: 50px;
height: 50px;
background-color: #f00;
font-size: 30px;
color: #fff;
}
#box div:nth-of-type(1){
/*新版*/? order數(shù)值越小越靠前 order可以為負值和0
? order:1;
? /*舊版*/??order數(shù)值越小越靠前，最小值為1，若是寫0與負數(shù)，則會處理成1
??-webkit-box-ordinal-group:5;
}
#box div:nth-of-type(2){
order:2;
?-webkit-box-ordinal-group:2;
}
#box div:nth-of-type(3){
order:3;
-webkit-box-ordinal-group:3;
}
#box div:nth-of-type(4){
order:4;
?-webkit-box-ordinal-group:4;
}
</style>
</head>
<body>
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
公式：子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值/所有子元素的box-flex屬性值的和
注意：
1、若是要所有的盒子一樣的寬度，可以這樣設(shè)置：flex-grow:1;width:0;?
2、在移動端精靈圖上面，圖片拼接的時候注意圖片與圖片之間要留一點空隙
3、background-size：寬度? 高度；這個樣式可以設(shè)置背景圖片的大小
4、引入精靈圖的時候，background-position是為負值
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的弹性盒模型--新版与旧版比较（2）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
