首页 > Web开发 > 详细

CSS3 盒模型

时间:2017-05-12 17:19:19      阅读:470      评论:0      收藏:0      [点我收藏+]
1,弹性核模型
     新版父级display:flex;
     // 水平 方向 
     flex-direction:row;  
技术分享
     // 竖直 方向
     flex-direction:colunm;
     技术分享
flex-direction: row-reverse;
技术分享
flex-direction: column-reverse;
技术分享
 
 
display: flex;
justify-content: flex-start/flex-end/center/space-between/space-around
 
justify-content: space-between;
技术分享
 
justify-content: space-around;
技术分享
 
垂直 :display: flex;  align-items: flex-start/flex-end/center/baseline;
 
子级弹性空间:flex-grow: num;
子级排列顺序   order:num;
 
 
老版display:-webkit-box;
-webkit-box-orient:horizontal:
技术分享
-webkit-box-orient:vertical:
技术分享
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
技术分享
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
技术分享
 
display: -webkit-box;
-webkit-box-pack:start/end/justify/center;
 
 
-webkit-box-pack:justify;
技术分享
 
垂直 :display: -webkit-box; -webkit-box-align: start/end/center;
 
 
子级弹性空间:-webkit-box:num;
 
子级排列顺序   -webkit-box-ordinal-group:num;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

CSS3 盒模型

原文:http://www.cnblogs.com/vsmart/p/6846083.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!