css 各類常見佈局整理

　　在學習各類佈局以前咱們先來認識各個關鍵詞，理解這些關鍵詞，而後由點到面，這樣就簡單多了。

display屬性

　　頁面中每一個元素都有一個默認的display屬性，它的值與該元素的類型有關，默認值一般是 block （元素顯示爲塊元素）或 inline（元素顯示爲行內元素）。此外值爲none時，表示隱藏該元素，可是它和 visibility 屬性不同。把 display 設置成 none 元素不會佔據它原本應該顯示的空間，可是設置成 visibility: hidden; 還會佔據空間。除了上面三個值外，display屬性還有以下這些值，共整理以下：

值　　　　描述
none 　　此元素不會被顯示。
block 　　此元素將顯示爲塊級元素，此元素先後會帶有換行符。
inline 　　默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
inline-block　　 行內塊元素。（CSS2.1 新增的值）
list-item 　　此元素會做爲列表顯示。
run-in 　　此元素會根據上下文做爲塊級元素或內聯元素顯示。
table　　 此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。
inline-table 　　此元素會做爲內聯表格來顯示（相似 <table>），表格先後沒有換行符。
table-row-group　　 此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。
table-header-group 　　此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。
table-footer-group 　　此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。
table-row　　 此元素會做爲一個表格行顯示（相似 <tr>）。
table-column-group　　 此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。
table-column 　　此元素會做爲一個單元格列顯示（相似 <col>）
table-cell 　　此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）
table-caption 　　此元素會做爲一個表格標題顯示（相似 <caption>）
inherit　　 規定應該從父元素繼承 display 屬性的值。

 

塊級元素和行內元素

　　咱們須要知道：

　　塊級元素會獨佔一行，其寬度自動填滿其父元素寬度。默認的值爲auto。

　　行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裏，直到一行排滿，纔會換行，其寬度隨元素的內容自行變化。

　　塊級元素能夠設置 width, height屬性，行內元素設置width,  height無效。

　　塊級元素能夠設置內外邊距（margin 和 padding）。而行內元素的只能設置水平方向的內外邊距。（padding-left,padding-right,margin-left,margin-right），可是豎直方向的內外邊距不起效果。（padding-top,padding-bottom,margin-top,margin-bottom）。即水平方向有效，豎直方向無效。最後能夠經過修改元素的display屬性來切換行內元素和塊級元素。此外最重要的一點是，當display屬性值取值爲inline-block時，該元素同時擁有塊級元素和行內元素的特色：既能夠設置長寬和內外邊距，還能夠像行內元素同樣並排顯示。

 

　　常見的塊元素有：div、p、ul、ol、li、h1~h六、header、footer、aside、form等；

　　常見的行內元素有：a、span、strong、input、img、em等。

 

margin屬性

　　當對設置了寬度的塊級元素使用左右外邊距爲 auto時能夠使其水平居中。由於元素會佔據所指定的寬度後，會將剩餘的寬度一分爲二成爲左右外邊距。

box-sizing屬性

　　新增的box-sizing屬性有三個取值：

　　content-box：表示padding和border不被包含在定義的width和height以內，即在寬度和高度以外繪製元素的內邊距和邊框。默認值。

　　border-box：表示padding和border被包含在定義的width和height以內。此元素的內邊距和邊框再也不會增長它的寬度。(border-box實際上就是IE quirk mode(怪異模式)下的box model。)

　　inherit：表示從父元素繼承 box-sizing 屬性的值。

calc()

calc()在mdn中是這麼解釋的：

　　CSS函數calc()能夠用在任何一個須要<length>、<frequency>,<angle>、<time>、<number>、或<integer>的地方。有了calc()，你就能夠經過計算來決定一個CSS屬性的值了。你還能夠在一個 calc() 內部嵌套另外一個 calc() ，裏面的 calc() 會被簡單地視爲加了括號。 

　　calc是英文單詞calculate(計算)的縮寫，它是css3新增的功能。用來給元素的border、margin、pading、font-size和width等屬性設置動態值。咱們能夠運用加減乘除來計算不一樣的單元。例如咱們能夠用百分比減去em值：

  .demo{width:calc(100% - 1.5em);}// 減號先後必須都有空格 

 

 position屬性

　　經過元素的position屬性咱們能夠採起如下四種定位：

　　static：默認值。元素以默認的文檔流形式排列。

　　relative：相對定位，相對於其本身正常的位置進行定位，經過top，right，bottom，left來進行上下左右偏移。它本來所佔的空間仍保留，其餘元素不會進行填補。

　　absolute：絕對定位，對象將偏離文檔流，原先存在的空間將刪除。它參照的則是離自身最近的定位過的（ position 值不是 static 的元素。）祖先元素，沒有則以body元素進行定位。

　　fixed：固定定位，也會脫離文檔流，它相對於視窗來定位。

　　當你定義的CSS中有position屬性值爲absolute、relative或fixed，可用z-index來更改元素的堆疊順序。

 

float屬性

　　float屬性一開始是用來文字環繞圖片的，在css中任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。若是浮動非替換元素，則要指定一個明確的寬度；不然，它們會盡量地窄。取值有left、right、none。浮動的元素將脫離文檔流。

　　clear屬性用來清除浮動，clear 屬性的值能夠是 left、right、both 或 none。此外記住浮動的元素老是包含非浮動的元素。對父元素應用overflow: hidden也能夠清除浮動，還能夠在能夠在父元素上使用僞類  :after 方法 。

 

下面來看看常見的佈局：

　　一、有二個div,左右二個鋪滿頁面，左邊div定寬，右邊div根據瀏覽器大小自行伸縮。

　　原理是利用float屬性，第一欄向左浮動。設置第二欄的左外邊距margin-left屬性值等於第一欄的寬度。代碼以下：

 <div id="wrapper">
 <div class="left">left</div>
 <div class="right">right</div>
 </div>
 
 <style> 
 .left{width:100px;border:1px solid red;height:80px;float:left}  
 .right{border:1px solid blue;height:80px;margin-left:100px;}

 

二、簡單的三欄佈局，利用浮動，設置寬度便可：

 .left{width:150px;border:1px solid red;height:80px;float:left} 
 .middle{width:100px;border:1px solid blue;height:80px;float:left} 
 .right{width:125px;border:1px solid;height:80px;float:left;}

 

 三、九宮格

 html:
<div id="container">
 <div class="row1">
 <div>1</div>
  <div>1</div>
  <div>1</div>
 </div>
 
 <div class="row2">
  <div>2</div>
  <div>2</div>
   <div>2</div>
 </div>
 
 <div class="row3">
  <div>3</div>
  <div>3</div>
  <div>3</div>
 </div>
 </div>

 css:
#container{width:960px;height:600px;margin:100px auto;}
#container .row1{height:200px;width:100%;border:1px solid red;box-sizing:border-box} 
#container .row1 div{float:left;width:33.33%;height:100%;border:1px solid;box-sizing:border-box}
#container .row2{height:200px;width:100%;border:1px solid green;box-sizing:border-box} 
#container .row2 div{float:left;width:33.33%;height:100%;border:1px solid;box-sizing:border-box}
#container .row3{height:200px;width:100%;border:1px solid blue;box-sizing:border-box}  
#container .row3 div{float:left;width:33.33%;height:100%;border:1px solid;box-sizing:border-box}

 

 

 

四、兩側定寬，中欄自適應

利用table佈局：

 <div id="container">
 <div class="left">左側定寬</div>
 <div class="middle">中欄自適應</div>
 <div class="right">右側定寬</div>
 </div>

 <style>
 　#container{width:500px;height:200px; border:1px solid red;display:table;table-layout:fixed}
　 .left, .middle,.right{display:table-cell;height:200px;}
　　#container .left {width:100px;border:1px solid;}
　　#container .middle{border:1px solid;width:100%}
　　#container .right{ width:100px;border:1px solid}
 </style>

 

五、彈性佈局：

　　詳細見另外一篇。

 六、待續