弹性盒模型--新版与旧版比较(2)

2018-10-03 17:56:13来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 

弹性空间与元素具体位置设置是加在子元素身上的

<style>
body{
  margin: 0;
}
#box{
  height: 300px;
  border: 1px solid #000;
  新版弹性盒模型
  /*display: flex;*/


  老版弹性盒模型
  display: -webkit-box;

}
#box div{
  /*新版*/
  /*flex-grow: 1;*/ 设置弹性空间,也可单独给某个子元素设置弹性空间

  /*老版*/
  -webkit-box-flex:1;设置弹性空间,,也可单独给某个子元素设置弹性空间


  width: 50px;
  height: 50px;
  background-color: #f00;
  font-size: 30px;
  color: #fff;
}

#box div:nth-of-type(1){
  /*新版*/  order数值越小越靠前 order可以为负值和0

   order:1;

   /*旧版*/  order数值越小越靠前,最小值为1,若是写0与负数,则会处理成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、若是要所有的盒子一样的宽度,可以这样设置:flex-grow:1;width:0; 

2、在移动端精灵图上面,图片拼接的时候注意图片与图片之间要留一点空隙

3、background-size:宽度  高度;这个样式可以设置背景图片的大小

4、引入精灵图的时候,background-position是为负值

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于iframe中使用fixed定位的一些问题

下一篇:移动端布局注意事项与less