我爱编程

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

2018-08-09  本文已影响0人  饥人谷_远方

一、两种布局使用分析

二、原则

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

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

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

<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

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

 .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

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

<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清除浮动

<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布局

<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修复

<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清除浮动

代码如下：

<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

<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](https://img.haomeiwen.com/i10836479/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**

<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](https://img.haomeiwen.com/i10836479/8dd64f8d595d41a5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

<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和手机适配的问题

/* 导航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渐变方法：解决背景样式渐变问题
上一篇下一篇

猜你喜欢

热点阅读