3-3 版面布局設計

一、 版面布局

1. 一般要設計版面前，會先大致規劃一下版面布局，也就是把畫面劃分成幾個<div>區域來設計。
2. body通常是最底層，上面可加一個wrap層可用來做背景效果。
3. container層用來放置網頁內容，裡面還會劃分header（檔頭標題）、nav（導覽）、main（主內容區）、footer（頁尾區）、sidebar（側邊欄）
4. 其實這些沒有硬性規定，只是一種概念而已。

二、 用position來控制元件位置

1. position:static「靜態」這是網頁的預設值。
2. position:relative 「相對」指的是相對該元素原來所在的位置（下一個元素並不會隨之起舞），可用 top、bottom、left、right來調整該元素位置。
3. position:absolute 「絕對」指的是相對於整個網頁最左上角的位置（此元素會飄起來，下一個元素會當作它不存在一樣遞補其位置），一樣可用top、bottom、left、 right來調整該元素位置。position:absolute搭配z-index，可以將元素進行上下排列。一般而言，z-index預設值為0。
4. position:fixed 「固定」指的是相對於整個視窗最左上角的位置（此元素也會飄起來，下一個元素一樣當作它不存在而遞補其位置），可用top、bottom、left、 right來調整該元素位置，不管視窗如何捲動，永遠保持在固定位置（可用來做浮動視窗）。要注意的是該死的IE6要使用!DOCTYPE 聲明指定standards-compliant（標準）模式才能正常使用。

三、 position:relative + position:absolute

1. 當position:relative包著position:absolute的時候，後者就會改以前者的位置危基準，而非整個視窗。
2. 假設main包著sidebar-left（左欄）content（中欄）及sidebar（右欄）
3. 兩欄式content（中欄）及sidebar（右欄）：將main設為relative，寬為980px
   • (1)  content寬度假設為600，位置不設，或設為relative均可。
   • (2)  sidebar設為absolute，寬度設為300px，高度隨意，right及top為0px;。
4. 三欄式：將main設為relative，寬度設為980px
   • (1)  sidebar-left：位置absolute，寬設為200px，高度隨意，left及top為0px;。
   • (2)  content：位置relative（撐開），寬為520px，left為200px，top為0px;。
   • (3)  sidebar：位置absolute，寬設為200px，高度隨意，right及top為0px;。
5. 用位置來做三欄式並不好做（因為要顧慮設為relative的元素必須是內容最長的，才能撐開版面，以避免下方元素跑上來重疊在一起），因此建議改用float方式來做為佳。

四、 用float浮動做三欄式

1. 用float浮動位置，整體寬度建議仔細計算（包含框、padding...等），寧可小於整體寬度，盡量別超出整體寬度，避免位置跑掉。
2. main寬度設為980px，overflow為auto（讓區塊高度隨內容決定），overflow其值另有visible（預設）、hidden（超出部份癮隱藏）、scroll（秀出捲軸）
   • (1)  sidebar_left，寬度設為200px，float為left
   • (2)  content，寬度設為520px，float為left
   • (3)  sidebar，寬度設為200px，float為left或right都無所謂
3. 下一個元素（如footer）配合 clear:both; 可以將浮動效果清除掉。

五、 改成隨寬度變化

1. 寬度均改為百分比，padding或margin也是要改成百分比，總和勿超過100%
2. 亦可設定min-width或max-width來設定寬度的上下限，避免過小或過大。