3. CSS3與版面布局

一、 CSS框線設定

1. border: 寬度 線條類型 顏色
2. 線條類型：none（無邊框）、hidden（隱藏邊框。IE7及以下尚不支持）、dotted（ 點狀）、dashed（虛線）、solid（實線）、double（雙線）、groove（3D凹槽）、ridge（3D凸槽）、inset（3D凹邊）、outset（3D凸邊）
3. 亦可用border-top、border-left、border-bottom、border-right分開設定

二、 CSS盒狀模型

三、 用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來設定寬度的上下限，避免過小或過大。

七、 CSS3圓角框設定

1. 整體：border-radius: 5px;
2. 上左：border-top-left-radius: 5px;
3. 上右：border-top-right-radius: 5px;
4. 下左：border-bottom-left-radius: 5px;
5. 下右：border-bottom-right-radius: 5px;
6. 基本上可以分開設定寬和高，亦可用%或各種css單位來顯示

八、 一個效果各自表述：前綴詞

1. IE前綴詞：-ms-
2. FireFox前綴詞：-moz-
3. Opera前綴詞：-o-
4. chrome或safari：-webkit-

九、 box-shadow盒子陰影

1. box-shadow:none; 無陰影
2. box-shadow: 水平偏移 垂直偏移 模糊值 延伸值 顏色 inset; （除了模糊值外，其餘皆可負值）

十、 border-image花邊設定 （花邊圖1 ，花邊圖2）

1. 搭配border:20px solid transparent;使用
2. border-image: 圖片來源 圖片切割範圍 背景圖片寬度 超界幅度 背景圖顯示方式
   • (1)  圖片來源：用 url(圖片位置)來載入圖片，如url(images/border.png)
   • (2)  圖片切割範圍：將圖片以九宮格方式切開，其切割的寬高，如：27 即上右下左切用27x27去切割。若 27 13 則是上下用27切割，左右用13切割
   • (3)  背景圖片寬度：預設為1，若是2表示用一張底圖放大成兩倍位置，由於同為數字，可能會和前面的切割範圍混淆，故加個 / 以區隔之。
   • (4)  超界幅度：圖片在外框上的位置，若0則是從外框內部開始套用，越大就越往外。
   • (5)  背景圖顯示方式：repeat（重複填滿）、stretch（拉長）、round（重複填滿並自動調整圖片，預設）

十一、 CSS進階的選擇器

1. div *{color:red;}，意指<div>下任何標籤裡的所有元素文字均為紅色。
2. div[class]{color:red;}，意指<div>標籤中，若有用到屬性class 者其文字為紅色。
3. div[class="good"]{color:red;}，意指<div>標籤中屬性 class 值等於good者，其文字為紅色。
4. div[class~="good"]，意指<div>標籤中屬性 class 值中有包含good 者（如class="cool good nice"），其文字為紅色。
5. div[class|="good"]，意指<div>標籤中屬性 class 的值中有連字號「-」，且為good開頭者（如class="good-bye"），其文字為紅色。
6. div[class^="good"]，意指<div>標籤中屬性 class 的值中以good開頭者（如class="goodbye"），其文字為紅色。
7. div[class$="good"]，意指<div>標籤中屬性 class 的值中以good結尾者（如class="very_good"），其文字為紅色。
8. div[class*="good"]，意指<div>標籤中屬性 class 的值中有含有good者（如class="mygoodness"），其文字為紅色。

十二、 CSS幾種專屬的選擇器

1. 連結有四種狀態：a:link（未參觀過的連結）、a:active（正要參觀過的連結）a:visited（參觀過的連結）a:hover（滑鼠正移到的連結）
2. 表單：input:focus（正在該輸入框中）、input:lang(zh-tw)（表單中有設定語言的輸入框）、input:enabled（表單中可用的輸入框）、input:disabled（表單中不可用的輸入框）、input:checked（表單中被選取的輸入框）
3. 其他div:target（被連結的目的地）、td:empty（空的內容時）