#06-2你认真学了css？布局套路

一、两种布局使用分析

• float布局（定宽布局）

• flex布局（弹性布局）

  
  
  image

二、原则

• 不到万不得已，不要写死 width 和 height
• 尽量用高级语法，如 calc、flex
• 如果是 IE，就全部写死

三、布局套路口诀（上） PC端布局

1、导航条布局——float布局（适用于ie5）

a.儿子全加 float: left （right） b.老子加 .clearfix
代码如下：Float布局

   
儿子1
   
儿子2
    

如图：该页面展示上其实是弹性布局

image

定死宽度，水平居中则在老子这边动手，添加以下代码：

 .parent{
  border:1px solid green;
  width:1000px
  margin-left:auto
  margin-right:auto
}

.child:nth-child(1){
  width:30%;
  background-color:red;
}
.child:nth-child(2){
  width:69%;
  background-color:yellow;
}

如图：定宽之后，页面宽度仍有剩余

image

优化之后的导航条，代码如下：

    

  

      
logo
      

        

          
导航1
          
导航2
          
导航3
          
导航4
          
导航5
        
      
    
    

2、图片位布局——flex布局

a.给老子加 display: flex
b.给老子加** justify-content: space-between;**

先看看第1种场景：
实现方式：先不用flex布局，用浮动元素+margin+clearfix清除浮动

不过如果不是等份的图片板块，就会出现下方bug：

image

如何解决，代码如下：flex布局至bug修复

如图：

image

3、广告位布局——浮动+margin+clearfix清除浮动

代码如下：

  

    

      
广告1
    
    

      
广告2
    
  

如图：

image

广告位之间的间距如何处理：
方法1：采用内嵌一个div，定宽，float+margin-right进行间隙（这种方法似乎要兼容啊，做了很久弄不出，不弄了）
方法2：calc计算法+margin

 

    

      
广告1
    
    

      
广告2
    
  
``

如图：
![image](http://upload-images.jianshu.io/upload_images/10836479-c71ea2780df177dc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**方法3：**flex布局（IE不支持）
> a.父元素：**display:flex+justify-content:space-between**
> b.父元素+子元素：**display:flex+margin-right:auto**

如图也是：
![image](http://upload-images.jianshu.io/upload_images/10836479-8dd64f8d595d41a5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#三、布局套路口诀（下） 移动端布局
*   添加：meta:vp (tab键):

*   收起pc端导航：
删除定宽+*{margin:0; padding:0;}

*   导航 PC和手机适配的问题

/* 导航PC和手机适配的问题 */
.parent .nav2{
display:none;
}
@media (max-width:420px){
.parent .nav2{
display:block;
}
.parent .nav{
display:none;
}
}

*   banner适配移动端

/banner适配移动端/
.banner{
width:800px; /万恶的定宽 PC端必备/
height:300px;
background: #888;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
@media (max-width:420px){
.banner{width:auto;}
}

*   图片板块适配移动端

/图片板块适配移动端/
.pictures{
width: 800px; /* 万恶的定宽PC端必备;定宽布局不够弹性 /
margin: 0 auto; /不能删1：居中/
overflow:hidden; / 避免溢出 */
}
@media (max-width:420px){
.pictures{width:auto;}
}

.pictures > .xxx{
display: flex; /* 弹性布局 /
flex-wrap: wrap; / 换行*/
margin: 0 -4px;
}

/图片板块适配移动端2/
.picture{
width: calc(25% - 8px);
height: 194px;
background: #ddd;
margin: 4px;
}
@media (max-width:420px){
.picture{
width: calc(50% - 8px);
}
}

*   广告位适配移动端

/广告位适配移动端/
.art{
background: #ddd;
width:800px; /万恶的定宽 PC端必备/
margin:0 auto;
display: flex; /* flex直接左右布局 /
justify-content: space-between;/ 第2种方法：将空隙放中间 */
}
@media (max-width:420px){
.art{
width: auto;
flex-direction:column;
}
}

.art > .sider{
width:calc( 33.333333% - 20px); /* calc计算法，此时右侧多出20px /
border: 1px solid black;
height: 300px;
/ margin-right:auto; 第1种方法 */
}
@media (max-width:420px){
.art > .sider{
width: auto;
height: auto;
}
}

.art > .main{
border: 1px solid black;
width:66.666666%;
height:300px
}
@media (max-width:420px){
.art > .main{
width: auto;
height: auto;
}
}

*   关于图片添加：（注：变形问题减少使用img）

background:transparent url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=292576901,2272109431&fm=27&gp=0.jpg) no-repeat center;
background-size: cover; /尽量全地显示图片/

**注：**
> 代码总链接：[布局套路](http://js.jirengu.com/jufoz/4/edit?html,css) 固定比例div：图片1：1显示或者2：1显示 CSS渐变方法：解决背景样式渐变问题