CSS實作頁面各種列版面的範例

這篇文章主要介紹了CSS實現頁面一列佈局，兩列佈局與三列佈局的方法示例,包括寬度與高度的自適應的示例,需要的朋友可以參考下：

1.一列佈局（又叫單列佈局） 
一列佈局需要掌握3個知識點：標準文件流，其中又包含了區塊級元素和行級元素，還有margin屬性，可以說實現一列佈局的關鍵程式碼就是由margin屬性實現的，透過設定margin:0 auto;來實現水平居中，auto就是它會根據瀏覽器的寬度自動設定兩邊的外邊距。要設定margin，你首先得有一個盒子模型，例如這裡的div，然後設定它的長寬，有一個固定的大小，才可以實現居中。

<style type="text/css">
    body{margin:0;padding:0;}
    .head{heigth:200px;background:blue;}
    .main{height:500px;width:800p;margin:0 auto;}
    .footer{background:blue;height:200px;width:800px;margin:0 auto;}
</style>
<div class="head"> This is head !</div>
<div class="main"> This is main !</div>
<div class="footer"> This is footer !</div>

2.二列佈局（兩列自適應） 
浮動： 
塊級元素都是一行一行這樣排列的，需要把兩個塊級元素並排時，就需要用到CSS中的浮動佈局float，float有三個屬性值， 
left-左浮動，right-右浮動，none-不浮動，一旦設定了float屬性，元素就會對應的向左移，或向右移，直到碰到容器邊緣，
當元素沒有內容但是設定了浮動屬性時，元素的寬度會隨內容的變化而變化。
清除浮動的常用方法是：clear：both；（為需要清楚浮動的元素設定）如果你清楚的知道設定了那種浮動，也可以clear：right/left，一般都用both，保障浮動被清除；還有另一種清除浮動的方法，width:100%;overflow:hidden;

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:20%;height:500px;background:blue;float:left;}
    .right{width:80%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="right"> This is right !</div>
</div>

添加了父級div後，right和left塊就被限制在父級塊中，父級塊寬度是固定的，則左右兩塊的寬度也隨之固定，但是如果父級塊的寬度改變，則左右兩塊也會隨之改變，且比例還是2：8，這個是固定不變的。

3.三列佈局 
position可設定4個屬性值，分別為：static（靜態定位），relative（相對定位），absolute（絕對定位），fixed（固定定位） 
三列佈局自適應，將上述兩列佈局中的比例更改為33.33%即可，那麼以此類推，四列佈局自適應也可以用一樣的方法，調整比例分配，從而實現自己想要的佈局方式。

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:33.33%;height:500px;background:blue;float:left;}
    .middle{width:33.33%;height:500px;background:black;float:left;}
    .right{width:33.33%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

另外一種情況是，左右兩塊的寬度都是固定的分別為200px，300px，而中間是自適應的。這種情況就不能透過float來實現了，此時我們需要對左右兩塊進行絕對定位，然後設定中間塊的margin，則可以實現要求。如果你想讓中間和左右兩塊不要緊密貼合，則可以在設定margin（上，右，下，左）時，把像素適當的提高。實作方式如下： 
注意left:0;top:0；right:0;top:0; 這些設定是必須的，不加就會出問題，親測

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:200px;height:500px;background:blue;position:absolute;left:0;top:0;}
    .middle{height:500px;background:black;margin:0 300px 0 200px;}
    .right{width:300px;background:red;height:500px;position:absolute;right:0;top:0;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

在網頁設計中，我們更多的是將上述佈局方式進行混合，例如在一列佈局的main區塊中插入二列或三列佈局，程式碼和上基本上一致

使用BFC的原理實作
BFC的規則之一，就是BFC區域，不會與float box重疊，因此我們可以利用這一點來實現3列佈局。

css程式碼如下

.left {   
  float: left;   
  margin-right: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.rightright {   
  float: rightright;   
  margin-left: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  overflow: hidden;   
}

html程式碼如下

<div class="left"></div>  
<div class="right"></div>  
<div class="main"></div>

雙飛翼佈局
這種佈局方案最早由淘寶提出，主要為了主列能夠被最先載入。
實作原理：
（1）讓主列外面增加一個wrap，主列wrap，以及2子列都左浮動。
（2）設定主列wrap寬度為100%，將子列的margin-left設定為負值，讓子列能夠排列在左右兩側。
（3）這是主列的margin-left與margin-right比左右兩列的寬度大一點，則可以設定出來主列與子列之間的間隙。

css程式碼如下

.wrap {   
  width: 100%;   
}   
.wrap::after {   
  display: block;   
  content: '';   
  font-size: 0;   
  height: 0;   
  clear: both;   
  zoom: 1;   
}   
.main-content {   
  float: left;   
  width: 100%;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  margin-left: 110px;   
  margin-right: 110px;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100%;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
}

html程式碼如下

<div class="wrap">  
  <div class="main-content">  
    <div class="main"></div>  
  </div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>

聖杯佈局
聖杯佈局在結構上要簡單一點，也能夠讓主列優先載入。
實作原理：
（1）增加一個包裹框，設定padding-leftpadding-right值，比子列寬度大一個空隙的寬度。
（2）主列，子列都設定為float: left 左子列margin-left設定為-100%，並且設定為position:relative; left: -110px將左子列放置到左側。右子列同理。
（3）主列只需設定寬度為100%即可。包裹框的寬度不要設定為100%，自適應即可。

css程式碼如下

.wrapper {   
  padding-left: 110px;   
  padding-right: 110px;   
  overflow: hidden;   
}   
.main {   
  float: left;   
  width: 100%;   
  height: 100px;   
  background-color: #ccc;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  margin-left: -100%;   
  position: relative;   
  left: -110px;   
  _left: 0;   
  background-color: orange;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
  position: relative;   
  rightright: -110px;   
}

 html程式碼如下

<div class="wrapper">  
  <div class="main"></div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>