#06-2你認真學了css挪钓？布局套路

一是越、兩種布局使用分析

float布局（定寬布局）
flex布局（彈性布局）

image

二、原則

不到萬不得已碌上，不要寫死 width 和 height
盡量用高級語法倚评，如 calc、flex
如果是 IE绍赛，就全部寫死

三蔓纠、布局套路口訣（上） ??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

優(yōu)化之后的導航條蚯妇，代碼如下：

<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種場景：
實現(xiàn)方式：先不用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);倒數(shù)第二層顏色 */
  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種場景：
實現(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>

不過如果不是等份的圖片板塊，就會出現(xiàn)下方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](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漸變方法：解決背景樣式漸變問題

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末老赤，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子制市，更是在濱河造成了極大的恐慌抬旺，老刑警劉巖，帶你破解...
沈念sama閱讀 221,888評論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件祥楣，死亡現(xiàn)場離奇詭異嚷狞，居然都是意外死亡，警方通過查閱死者的電腦和手機荣堰，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,677評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來竭翠，“玉大人振坚，你說我怎么就攤上這事≌牛” “怎么了渡八？”我有些...
開封第一講書人閱讀 168,386評論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長传货。經常有香客問我屎鳍，道長，這世上最難降的妖魔是什么问裕？我笑而不...
開封第一講書人閱讀 59,726評論 1贊 297
?港島之戀（遺憾婚禮）
正文為了忘掉前任逮壁，我火速辦了婚禮，結果婚禮上粮宛，老公的妹妹穿的比我還像新娘窥淆。我一直安慰自己，他們只是感情好巍杈，可當我...
茶點故事閱讀 68,729評論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布忧饭。她就那樣靜靜地躺著，像睡著了一般筷畦。火紅的嫁衣襯著肌膚如雪词裤。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 52,337評論 1贊 310
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼悄泥。笑死架馋，一個胖子當著我的面吹牛，可吹牛的內容都是我干的纸泡。我是一名探鬼主播，決...
沈念sama閱讀 40,902評論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼赖瞒，長吁一口氣：“原來是場噩夢啊……” “哼女揭！你這毒婦竟也來了？” 一聲冷哼從身側響起栏饮，我...
開封第一講書人閱讀 39,807評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤吧兔，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后袍嬉，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體境蔼，經...
沈念sama閱讀 46,349評論 1贊 318
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 38,439評論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年伺通，在試婚紗的時候發(fā)現(xiàn)自己被綠了箍土。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,567評論 1贊 352
活死人
序言：一個原本活蹦亂跳的男人離奇死亡罐监，死狀恐怖吴藻，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情弓柱，我是刑警寧澤沟堡，帶...
沈念sama閱讀 36,242評論 5贊 350
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站矢空，受9級特大地震影響航罗，放射性物質發(fā)生泄漏。R本人自食惡果不足惜屁药，卻給世界環(huán)境...
茶點故事閱讀 41,933評論 3贊 334
男人毒藥：我在死后第九天來索命
文/蒙蒙一粥血、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧者祖，春花似錦立莉、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,420評論 0贊 24
一樁弒父案蜓耻，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至械巡，卻和暖如春刹淌，著一層夾襖步出監(jiān)牢的瞬間饶氏，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,531評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工有勾，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留疹启，地道東北人。一個月前我還...
沈念sama閱讀 48,995評論 3贊 377
代替公主和親
正文我出身青樓蔼卡，卻偏偏與公主長得像喊崖，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子雇逞，可洞房花燭夜當晚...
茶點故事閱讀 45,585評論 2贊 359

#06-2你認真學了css？布局套路

#06-2你認真學了css挪钓？布局套路

一是越、兩種布局使用分析

二、原則

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

1、導航條布局——float布局（適用于ie5）

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

3饭豹、廣告位布局——浮動+margin+clearfix清除浮動

推薦閱讀更多精彩內容