#06-2你認(rèn)真學(xué)了css？布局套路

一、兩種布局使用分析

  • float布局（定寬布局）

  • flex布局（彈性布局）


    image

二、原則

  • 不到萬不得已，不要寫死 width 和 height
  • 盡量用高級(jí)語法，如 calc、flex
  • 如果是 IE，就全部寫死

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

1、導(dǎo)航條布局——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>

如圖：該頁面展示上其實(shí)是彈性布局


image

定死寬度，水平居中則在老子這邊動(dòng)手，添加以下代碼：

 .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

優(yōu)化之后的導(dǎo)航條，代碼如下：

<style>
   .parent{

    margin-left:auto;
    margin-right:auto;
    background: #ddd;
   /*定死寬度則不會(huì)影響頁面 */
    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){

 }
   /* 清除浮動(dòng) */
   .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">導(dǎo)航1</div>
          <div style="float:left" class="navItem">導(dǎo)航2</div>
          <div style="float:left" class="navItem">導(dǎo)航3</div>
          <div style="float:left" class="navItem">導(dǎo)航4</div>
          <div style="float:left" class="navItem">導(dǎo)航5</div>
        </div>
      </div>    
    </div>

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

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

先看看第1種場(chǎng)景：
實(shí)現(xiàn)方式：先不用flex布局，用浮動(dòng)元素+margin+clearfix清除浮動(dòng)

<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);倒數(shù)第二層顏色 */
  margin-left:-4px;  
  margin-right:-4px;/*不能刪2：擴(kuò)大范圍*/
}

/* .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，且即使減少一個(gè)板塊也不會(huì)影響其它板塊，

如圖：


image

再看第2種場(chǎng)景：
實(shí)現(xiàn)方式：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>

不過如果不是等份的圖片板塊，就會(huì)出現(xiàn)下方bug：


image

如何解決，代碼如下：flex布局至bug修復(fù)

<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、廣告位布局——浮動(dòng)+margin+clearfix清除浮動(dòng)

代碼如下：

<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：采用內(nèi)嵌一個(gè)div，定寬，float+margin-right進(jìn)行間隙（這種方法似乎要兼容啊，做了很久弄不出，不弄了）
方法2：calc計(jì)算法+margin

<style>
.art{
  background: #ddd;
  width:800px;
  margin:0 auto;
}
.art > .sider{
  float:left;
  width:calc( 33.333333% - 20px);/* calc計(jì)算法，此時(shí)右側(cè)多出20px */
  border: 1px solid black;
  height: 300px;
  margin-right: 20px;  /* 用多出的20px，彌補(bǔ)上那塊間隙 */
}
.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](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**

<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計(jì)算法，此時(shí)右側(cè)多出20px /
border: 1px solid black;
height: 300px;
/ margin-right:auto; 第1種方法 */
}
.art > .main{
border: 1px solid black;
width:66.666666%;
height:300px
}
</style>

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

#三、布局套路口訣（下） ??移動(dòng)端布局
*   添加：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端導(dǎo)航：
刪除定寬+*{margin:0; padding:0;}

*   導(dǎo)航 PC和手機(jī)適配的問題

/* 導(dǎo)航PC和手機(jī)適配的問題 */
.parent .nav2{
display:none;
}
@media (max-width:420px){
.parent .nav2{
display:block;
}
.parent .nav{
display:none;
}
}


*   banner適配移動(dòng)端

/banner適配移動(dòng)端/
.banner{
width:800px; /萬惡的定寬 PC端必備/
height:300px;
background: #888;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
@media (max-width:420px){
.banner{width:auto;}
}


*   圖片板塊適配移動(dòng)端

/圖片板塊適配移動(dòng)端/
.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;
}

/圖片板塊適配移動(dòng)端2/
.picture{
width: calc(25% - 8px);
height: 194px;
background: #ddd;
margin: 4px;
}
@media (max-width:420px){
.picture{
width: calc(50% - 8px);
}
}


*   廣告位適配移動(dòng)端

/廣告位適配移動(dòng)端/
.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計(jì)算法，此時(shí)右側(cè)多出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;
}
}


*   關(guān)于圖片添加：（注：變形問題減少使用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漸變方法：解決背景樣式漸變問題
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. 前言 前端圈有個(gè)“梗”：在面試時(shí)，問個(gè)css的position屬性能刷掉一半人，其中不乏工作四五年的同學(xué)。在...
    YjWorld閱讀 4,936評(píng)論 5贊 15
  • H5移動(dòng)端知識(shí)點(diǎn)總結(jié) 閱讀目錄 移動(dòng)開發(fā)基本知識(shí)點(diǎn) calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,834評(píng)論 0贊 26
  • 移動(dòng)開發(fā)基本知識(shí)點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,745評(píng)論 0贊 6
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,194評(píng)論 1贊 92
  • Steam平臺(tái)上在售的有上千款游戲產(chǎn)品，如果你是一個(gè)錢多的沒地花的富豪玩家，可以看看售價(jià)最為昂貴的各類產(chǎn)品。 全平...
    emotion者閱讀 488評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容