APICloud学习笔记之div样式设置套路 

 1 header{
 2 position:absolute/relative;
 3 bottom:20px;
 4 left:10px;
 5 width:100%;
 6 height:20px;
 7 background:url(../image/bk.png);
   background-size:80px 80px;
 8 background-position:center center;
 9 background-repeat:no-repeat;    
10 }

位置：绝对或相对

位置由bottom&left决定

宽度一般为100%除非内部的块会限制宽度；

背景图片居中，不重复

容器布局

display: -webkit-box;
display: -webkit-flex;
display: flex;

//垂直

-webkit-box-orient: vertical;

-webkit-flex-flow: column;
flex-flow: column;

//水平

-webkit-blox-orient: horizontal;

-webkit-flex-flow: row;
flex-flow: row;

//内容样式

-webkit-box-flex: 1;

-webkit-flex: 1;
flex: 1;

用于平分外部div

posted @ 2017-04-27 16:37  喜爱糖葫芦  阅读(333)  评论(0)  编辑  收藏  举报