1-4. 熟悉CSS各式相關的定位樣式
(1) CSS的儲存位置
(A) HTML文件內
（a）文件樣式
如下圖所示, 將規則定在HTML文件內, CSS樣式規則的語法寫在本文件的<head></head>區之內
（b）行內樣式
將CSS樣式語法寫在HTML標籤內的 style 屬性位置, 行內樣式的優先權比文件樣式高
(B) HTML文件外，成為獨立的CSS樣式表檔
將CSS樣式規則的語法寫在獨立存檔的CSS樣式表檔案, 將CSS檔案加入HTML網頁檔案的方式有以下二種
（a）連結方式
（２）匯入方式
(2) 區塊元素基本概念
(3) 區塊元素的position定位
區塊元素的position定位方式有4種：static靜態、relative相對、absolute絕對、fixed固定。
預設區塊元素的position定位為static靜態, 沒有移位的設定, 只有padding與margin的設定, 內容會相對影響而推動。
舉例：
結果：
(4) 區塊元素的relative相對定位
relative相對定位, 可以設定移位距離, 然而內容仍然會佔據應有的範圍相對影響而推動其他元素。
舉例：
結果：
(5) 區塊元素的absolute絕對定位
absolute絕對定位可以設定移位距離, 而內容範圍不會相對影響推動其他元素, 而座標位置是相對於上一層元素物件。
舉例：
結果：
(6) 區塊元素的fixed絕對定位
fixed固定定位, 可以設定移位距離, 而內容範圍不會相對影響而推動其他元素, 而座標位置是相對於body物件。
舉例：
- #container如果是預設的static靜態定位, margin算在元素物件範圍內, 那麼原點會是跟body的原點位置一樣,
那麼#con1的absolute絕對定位看起來會是相對到body的位置。 - #container如果將定位改成relative相對定位, margin則不算在元素物件範圍內,
那麼#con1的absolute絕對定位會是相對到#container區塊範圍內的位置。
結果：就算捲動視窗捲軸, 固定定位的#con2也會固定在視窗的右下角位置。
