一、什麼是佈局

1、現有的佈局滿足不了人們的需求

文件流、浮動、定位

2、使用者中所需要的：

• 導航欄+內容

• 導航欄+內容+廣告欄

• 從上到下、從左到右、定寬、自適應...

二、幾種佈局介紹

1、單列布局

• 一欄佈局

• 一欄佈局（通欄）

  
  

  

  image

  
  

  實現方式： 定寬 + 水平居中

width: 1000px; //或 max-width: 1000px;margin-left: auto;
margin-right: auto;

範例：

關鍵程式碼：

<style>
  .layout{
  /* width: 960px; */
    max-width: 960px;
    margin: 0 auto;
  }
  //給 body 設定min-width 去掉滾動背景色 bug  
  body{
    min-width: 960px;
  }
  #header{
    height: 60px;
    background: red;
  }
  #content{
    height: 400px;
    background: blue;
  }
  #footer{
    height: 50px;
    background: yellow;
  }</style>/* 如圖1：此時的定寬是width:560px */<div class="layout">
  <div id="header">頭部</div>
  <div id="content">內容</div>
  <div id="footer">尾部</div></div>/* 或通欄的單列布局,此時```.layout{border:1px solid}``` */   <div id="header">
      <div class="layout">頭部</div>
   </div>
   <div id="context" class="layout">內容</div>
   <div id="footer">
      <div class="layout">尾部</div>
   </div>//或省標籤，便於控制區域性 如圖2：<div id="header"  class="layout">頭部</div><div id="content" class="layout">內容</div><div id="footer" class="layout">尾部</div>

如圖：

image

image

2、雙列布局

一列固定寬度，另一列自適應寬度

image

實現方式：浮動元素 + 普通元素margin+老子清除浮動

注： 佈局時，考慮到渲染順序，浮動元素程式碼優先寫在其他元素前面，優先渲染

第1種場景：兩列布局

範例：

<style>
    #content:after{     //第3步：新增一個偽元素清除浮動
      content: '';
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: left;         //第1步：浮動元素
    }
    .main{
      margin-left: 210px;  //第2步：margin-left（right）
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }  </style>
    <div id="content">  
      <div class="aside">aside</div>
      <div class="main">content</div>
    </div>
  <div id="footer">footer</div>

如圖：

image

第2種場景：兩列布局側邊欄aside在右側：

範例：

<style>
    #content:after{    //第3步：清除浮動
      content: '';
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;  //第1步：浮動
    }
    .main{
      margin-right: 210px;  //第2步：margin
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }  </style>

  <div id="content">
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>

如圖：

image

3、三列布局

兩側兩列固定寬度，中間列自適應寬度

image

實現方式：浮動元素+margin+偽類元素清除浮動

#content:after{   ////第3步：偽類元素
      content: '';
      display: block;
      clear: both;
    }
    .menu{
      width: 100px;
      height: 500px;
      background: pink;
      float: left;   //第1步：浮動
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;  //第1步：浮動
    }
    .main{
      margin-left: 110px; /*為什麼要加margin-left*/  //第2步：margin
      margin-right: 210px;                         //第2步：margin
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }  <div id="content">
    <!-- 為什麼不是main在前面： 渲染順序-->
    <div class="menu">menu左</div>
    <div class="aside">aside右</div>
    <div class="main">content中</div>
  </div>
  <div id="footer">footer</div>

如圖：

image

4、水平等距佈局

實現方式：處理老子（居中、防溢位）+浮動+ margin

<style>ul,li{
  margin: 0;
  padding: 0;
  list-style: none; //取消列表的實心小黑點
}
.ct{
    overflow:hidden; //溢位隱藏
    width: 640px;
    border:dashed 1px orange;
    margin: 0 auto;  //相對於頁面的居中
}

.ct .item{
    float:left;  //第1步：浮動
    margin-left: 20px; //第0步：提前設定
    margin-top: 20px;  //第0步：提前設定
    width:200px;
    height:200px;
    background: red;
}
.ct>ul{
  margin-left: -20px;  //第2步：補充不夠的20px
}</style><div class="ct">
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
  </ul></div>

如圖：

image

作者：飢人谷_遠方
連結：