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

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 2,175 | 阅读时长 ≈ 11

一、两种布局使用分析

  • float布局（定宽布局）
  • flex布局（弹性布局）
    image

二、原则

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

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

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

a.儿子全加 float: left （right）;
b.老子加 .clearfix

代码如下：Float布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
  .parent{
  border:1px solid green;
}

 .child{
 /* border:1px solid red; */
}
.child:nth-child(1){
  width:30%;
  background-color:red;
}
.child:nth-child(2){
  width:69%;
  background-color:yellow;
}
.clearfix::after{
  content:'';
  display:block;
  clear:both;    
}
.content{
  border:1px solid black;
  margin-right:10px;
}
</style>

<div class="parent clearfix" >
   <div class="child" style="float:left;">儿子1</div>
   <div class="child" style="float:left;">儿子2</div>    
</div>

如图：该页面展示上其实是弹性布局
image
定死宽度，水平居中则在老子这边动手，添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 .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
优化之后的导航条，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<style>
   .parent{

    margin-left:auto;
    margin-right:auto;
    background: #ddd;
   /*定死宽度则不会影响页面 */
    min-width:600px; 
 }

   .child{

 }
   .child:nth-child(1){
    width:100px;
    background-color:#333;
    color: white;
    text-align:center;
    line-height:36px;
    height:36px;
 }
   .child:nth-child(2){

 }
   /* 清除浮动 */
   .clearfix::after{ 
     content:'';
     display:block;
     clear:both;    
 }
  .clearfix{
    zoom: 1;
 }/*IE6*/
   .content{
    border:1px solid black;
    margin-right:10px;
   }
   .nav{
    line-height:24px;
    padding:6px 0;
   }
   .navItem{
   margin-left:20px;
   }

  </style>    

  <div class="parent clearfix" >
      <div class="child" style="float:left;">logo</div>
      <div class="child" style="float:right;">
        <div class="nav clearfix">
          <div style="float:left" class="navItem">导航1</div>
          <div style="float:left" class="navItem">导航2</div>
          <div style="float:left" class="navItem">导航3</div>
          <div style="float:left" class="navItem">导航4</div>
          <div style="float:left" class="navItem">导航5</div>
        </div>
      </div>    
    </div>

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<style>
/* 图片主要部分 */
.banner{
  width:800px;
  height:300px;
  background:#888;
  margin-left:auto;
  margin-right:auto;
  margin-top:10px;    
}

.pictures{
  width:800px;
  margin:0 auto;/*不能删1：居中*/
/* background: black;最底层的颜色 */
}

.picture{
  width:194px;
  height:194px;
  background:#ddd;  
  margin:4px;
  float:left;
}

.pictures >.xxx{  /*为什么不能只用两层div*/
/*   background: rgba(255,0,0,0.8);倒数第二层颜色 */
  margin-left:-4px;  
  margin-right:-4px;/*不能删2：扩大范围*/
}

/* .picture:nth-child(1){
  margin-left: 0;
}

.picture:nth-child(4){
  margin-right: 0;
} */

<style>

 <div class="banner"></div>

   <div class="pictures">
    <div class="xxx clearfix">
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
    </div>    
  </div>

如图：image
这种方式可以兼容IE6，且即使减少一个板块也不会影响其它板块，
如图：image

再看第2种场景：
实现方式：flex布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style>
.banner{
  width:800px;
  height:300px;
  background:#888;
  margin-left:auto;
  margin-right:auto;
  margin-top:10px;

}

.pictures{
  width: 800px;                 /* 定宽不够弹性 */
  margin: 0 auto;
  display: flex;                 /* 弹性布局 */ 
  flex-wrap: wrap;                /* 换行*/
  justify-content: space-between;/* 多余空间放在空间或水平居中  */ 
  /* align-items: center;   垂直居中 */

}

.picture{
  width: 194px;
  height: 194px;
  background: #ddd;  
  margin-top: 4px;
  margin-bottom: 4px;

}
</style>

   <div class="banner"></div>

   <div class="pictures">
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>   
  </div>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style>
*{box-sizing: border-box;}
.banner{
  width:800px;
  height:300px;
  background:#888;
  margin-left:auto;
  margin-right:auto;
  margin-top:10px;

}

.pictures{
  width: 800px;   /* 定宽不够弹性 */
  margin: 0 auto;  

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

/* 或者 width: calc(25% - 8px); 
  height: 194px; */
  background: #ddd;  
/* 边框可去掉
border: 1px solid red; */ 
  margin: 4px;

}
</style>

 <div class="banner"></div>

   <div class="pictures">
    <div class="xxx">
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>

    </div>
  </div>

如图：image

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

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
.art{
  background: #ddd;
  width:800px;
  margin:0 auto;
}

.art > .sider{
  float:left;
  border: 1px solid black;
  width:33.333333%;
  height:300px
}
.art > .main{
  float:left;
  border: 1px solid black;
  width:66.333333%;
  height:300px
}
</style>

  <div class="art clearfix">
    <div class="sider">
      <div>广告1</div>
    </div>
    <div class="main">
      <div>广告2</div>
    </div>
  </div>

如图：image

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
.art{
  background: #ddd;
  width:800px;
  margin:0 auto;
}
.art > .sider{
  float:left;
  width:calc( 33.333333% - 20px);/* calc计算法，此时右侧多出20px */
  border: 1px solid black;
  height: 300px;
  margin-right: 20px;  /* 用多出的20px，弥补上那块间隙 */
}
.art > .main{
  float:left;
  border: 1px solid black;
  width:66.666666%;
  height:300px
}
</style>

 <div class="art clearfix">
    <div class="sider">
      <div>广告1</div>
    </div>
    <div class="main">
      <div>广告2</div>
    </div>
  </div>

如图：image

方法3： flex布局（IE不支持）

a.父元素：display:flex+justify-content:space-between
b.父元素+子元素：display:flex+margin-right:auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
.art{
  background: #ddd;
  width:800px;
  margin:0 auto;
  display: flex;  /* flex直接左右布局 */
  justify-content: space-between;/* 第2种方法：将空隙放中间 */
}
.art > .sider{
  width:calc( 33.333333% - 20px);
  /* calc计算法，此时右侧多出20px */
  border: 1px solid black;
  height: 300px;
  /* margin-right:auto;  第1种方法 */
}
.art > .main{
  border: 1px solid black;
  width:66.666666%;
  height:300px
}
</style>

如图也是：image

三、布局套路口诀（下） 👉移动端布局

  • 添加：meta:vp (tab键):

    1
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 导航PC和手机适配的问题 */
    .parent .nav2{
      display:none;
    }
    @media (max-width:420px){
      .parent .nav2{
         display:block; 
      }
      .parent .nav{
        display:none;
      }
    }

  • banner适配移动端

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /*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;}
    }

  • 图片板块适配移动端

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    /*图片板块适配移动端*/
    .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);
      }
    }

  • 广告位适配移动端

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    /*广告位适配移动端*/
    .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）

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

注：

代码总链接：布局套路
固定比例div：图片1：1显示或者2：1显示
CSS渐变方法：解决背景样式渐变问题

-------------本文结束感谢您的阅读-------------