目錄

一、傳統佈局

1.佈局模型

2.表格佈局

3.浮動佈局

 4.定位佈局

二、多列布局

三、彈性伸縮佈局

舊版本box

混合Flexbox 模型

新版本Flexbox 模型

---

一、傳統佈局

1.佈局模型

三行兩列模型（未完待續）

2.表格佈局

通過設定固定的單元格，去除表格邊框和填充實現的佈局。

table的缺點在於伺服器把程式碼載入到本地伺服器的過程中，本來是載入一行執行一行，但是table標籤是裡面的東西全都下載完之後才會顯示出來，那麼如果圖片很多的話就會導致網頁一直載入不出來，除非所有的圖片和內容都載入完。（

來源）

表格佈局的固定佈局： 

html裡面

<table border="0"> 
	<tr> 
		<td colspan="2" class="header">header</td> 
	</tr>
	<tr> 
		<td class="aside">aside</td> 
		<td class="section">section</td>
	</tr>
	 <tr>
	  <td colspan="2" class="footer">footer</td> 
	</tr> 
</table>
 

css裡面

body { margin:0; }
table { margin:0 auto; width: 960px; border-spacing: 0; } 
.header { height: 120px; background-color: olive; } 
.aside { width: 200px; height: 500px; background-color: purple; } 
.section { width: 760px; height: 500px; background-color: maroon; }
.footer { height: 120px; background-color: gray; }
 

改成流體佈局，直接把table的寬度改為百分之百。會隨視窗大小改變等比例縮放。

3.浮動佈局

浮動佈局主要採用 float 和 clear 兩個屬性來構建。應用於pc端。
固定佈局 html裡面

<header> header </header>
<aside> aside </aside>
<section> section </section>
<footer> footer </footer>

css程式碼

body { width: 960px; margin: 0 auto; color: white; } 
header { height: 120px; background-color: olive; } 
aside {width: 200px; height: 500px; background-color: purple; float: left;} 
section { width: 760px; height: 500px; background-color: maroon; float:right; } 
footer { height: 120px; background-color: gray; clear:both; }
/*如果footer採用浮動，與header不同，浮動之後必須強行設定寬度，不然會等同於內容寬度，header沒有浮動，所以長度會預設為父元素寬度*/

流體佈局

只要更改 body 元素的限定長度為 auto 或 100%。然後左右兩列分別設定 20% 和 80%即可。

 4.定位佈局

用position 屬性來 實現元素的絕對定位和相對定位。
絕對定位absolute，脫離文件流，以視窗文件左上角 0,0 為起點。

相對定位 relative，不脫離文件流，佔位偏移 

脫離文件流的意思，就是本身這個元素在文件流是佔位的。如果脫離了，就不佔有文件的位置，好像浮在了空中一般，有了層次感。 通過 z-index 屬性來判定它們的層次關係。
固定定位css裡面

body { width: 960px; margin: 0 auto; position: relative; }
/*在body父元素設定一個不需要top和left定位的相對定位，這個叫設定參考點
所以子元素可以根據這個點進行絕對定位，而不是根據瀏覽器視窗進行絕對定位
將需要設定參考點的父元素設定為相對，且不設定座標，如果父元素設定了參考點，子元素的絕對定位將以它為基準  */
header {width: 960px; height: 120px; background-color: olive;/* position: absolute; top: 0; left: 0;*/}
/*設定成絕對定位後，寬高必須指明，不然會根據內容大小變化*/
aside { width: 200px; height: 500px; background-color: purple; /*position: absolute; top: 120px; left: 0;*/ }
section { width: 760px; height: 500px; background-color: maroon; position: absolute; top: 120px; right: 0; }
footer { width: 960px; height: 120px; background-color: gray; /*position: absolute; top: 620px; }

流體佈局只需要設定百分比就可以。

box-sizing

這個屬性可以定義元素盒子的解析方式，從而可以選擇避免掉佈局元素盒子增加內邊距和邊框的長度增減問題。
元素盒子如果加入了內邊距 padding 和邊框 border 後，元素的總長度會增加。

那麼如果這個元素用於非常精確的佈局時，我們就需要進行計算增 減。

這其實是比較煩人的操作，尤其是動態設定頁面佈局的時候。

兩個屬性值：

content-box   預設值，border 和 padding 設定後用於元素的總長度。

border-box   border 和 padding 設定後不用於元素的總長度，不在額外增加元素大小 。

  resize

更改元素尺寸大小，可滑鼠拖動，普通元素需要設定 overflow:auto，配合 resize 才會出現可拖拽圖形。

二、多列布局

 columns

多列布局屬性，實現列動態變換的功能。主要文字比較多的排版。

完整形式

-webkit-columns: 150px 4;

-moz-columns: 150px 4;

columns: border-box;
 

①  分成四列，每列寬度自適應

-moz-columns: auto 4;
②  設定列寬
-moz-column-width: 200px; 這裡設定了 200px，有點最小寬度的意思。

當瀏覽器縮放到小於 200 大小時，將變成 1 列顯示。而如果是 auto，則一直保持四列。
其它屬性使用較少。

三、彈性伸縮佈局

(Flexible Box)用來實現未來響應式彈性伸縮佈局方案。

非常重要 （阮一峰  flex 語法篇 例項篇）

div { 
	display: -moz-box; 
	display: -webkit-box; 
	display: box; 
    /*IE10 的伸縮佈局*/
    display:-ms-flexbox;
}

彈性伸縮盒子裡面的子元素就會自適應，預設從左到右排列。

舊版本box

①  box-orient

主要實現盒子內部元素的流動方向。 

-webkit-box-orient: vertical;設定垂直流動 
②  box-direction

主要是設定伸縮容器中的流動順序。 

-moz-box-direction: reverse;

normal 預設值，正常順序  reverse 逆序
③  box-pack

用於伸縮專案的分佈方式，塊從哪開始排列。 

④  box-align 屬性用來處理伸縮容器的額外空間。 

-moz-box-align: center;
居中對齊，清理上下額外空間，內容佔多少，塊就多大，類似瀑布流。

⑤  box-flex 屬性可以使用浮點數分配伸縮專案的比例，會按百分比自動換算。

流體的，拖動會等比例縮放。

p:nth-child(1) { -moz-box-flex: 1;} 
p:nth-child(2) { -moz-box-flex: 2.5; } 
p:nth-child(3) { -moz-box-flex: 1; }

⑥   box-ordinal-group 屬性可以設定伸縮專案的顯示位置。

p:nth-child(1) { -moz-box-ordinal-group: 3; }

將第一個位置的元素，跳轉到第三個位置 。

混合Flexbox 模型

display 的屬性值：

①   flex-direction 屬性和舊版本 box-orient 屬性一樣，都是設定伸縮專案的排列方式。

②   flex-wrap 屬性類似與舊版本中的 box-lines，決定內容是否換行。

③  flex-flow 屬性是集合了排列方向和控制換行的簡寫形式。 

-ms-flex-flow: row wrap;
④   flex-pack 屬性和舊版本中的 box-pack 一樣，設定伸縮專案的對齊方式。

⑤    flex-align 屬性和舊版本中的 box-align 一樣，處理伸縮專案容器的額外空間。 

⑥    flex 屬性和舊版本中的 box-flex 類似，用來控制伸縮容器的比例分配。 

p:nth-child(1) { -ms-flex: 1; } 

p:nth-child(2) { -ms-flex: 3; }

p:nth-child(3) { -ms-flex: 1; }

⑦   flex-order flex-order 屬性和 box-ordinal-group 屬性一樣控制伸縮專案出現的順序。 

新版本Flexbox 模型

現代瀏覽器大部分不需要字首 div { display: flex; }  Webkit 核心的瀏覽器，必須加上-webkit-字首。

設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。

以下6個屬性設定在容器上

①   flex-direction 屬性和舊版本 box-orient 屬性一樣，都是設定伸縮專案的排列方式。不需要字首。

②   flex-wrap 屬性類似與舊版本中的 box-lines，決定內容是否換行。需要字首。

③  flex-flow 屬性是集合了排列方向和控制換行的簡寫形式。 不需要字首。

④   justify-content 屬性和舊版本中的 box-pack 一樣，設定伸縮專案的對其方式。 

justify-content: space-around;

⑤   align-items 屬性和舊版本中的 box-align 一樣，處理伸縮專案容器的額外空間。

 

⑥   align-self 和 align-items 一樣，都是清理額外空間，但它是單獨設定某一個伸縮 專案的。所有的值和 align-itmes 一致。

以下6個屬性設定在專案上

⑦   flex 屬性和舊版本中的 box-flex 類似，用來控制伸縮容器的比例分配。 

⑧    order 屬性和 box-ordinal-group 屬性一樣控制伸縮專案出現的順序。