Day4-CSS Layout — Block/inline/inline-block
今天想以CSS排版作為筆記對象。
CSS語法是每個學寫網頁前端的人都要會的工具，當使用者造訪一個網頁時，眼前的網頁版面配置就是靠CSS做出來的，熟悉不同排版方式的使用時機才能創造出想要的版面，這篇會先討論比較基礎的排版。
在正討論排版常用的定位方式之前，先了解一些HTML基本元素屬性，有助於網頁排版。主要分為塊級元素、行內元素、行內塊元素。
塊狀元素(block):
一個元素可以獨佔一行，可設置元素寬度、高度。 e.g. <h1>~<h6>, <tr>,<td>,<div>,<p>
行內元素/內聯元素(inline):
多個行內元素可排在同一行，不可設置元素寬度、高度。 e.g. <a>,<span>, <i>
行內塊元素(inline-block):
在同一行內逐個顯示且可設置寬度、高度，綜合上面2個特性。 e.g.< img >,<input>
拿以下程式碼做範例:
CSS的顏色部分先省略沒放上來，從上述代碼可以理解到3個元素屬性的差異。
今天，如果假設我們要將<img>標籤的內容要獨占一行要怎麼辦呢?
這時候我們可以進行元素類型轉換，把<img>內的屬性用CSS語法 — display,把原本為inline-block的屬性改為block。作法如下:
接下來要進入正題: 定位
定位(Position):
定位屬性:
static: 默認值,無特殊定位
absolute: 絕對定位
relative: 相對定位
fixed: 固定定位
這些定位屬性的差異在哪兒呢??
static:為默認的屬性，無其他的定位效果
fixed: 將屬性定位在某一處，不管滑鼠滾輪如何滾動，被設定固定定位的元素就會被固定在視窗的某一處。
再來介紹兩個最重要也是常用的定位屬性。
absolute絕對定位:
脫離文檔(document)流
相對於文檔,需要一個有定位屬性(relative)的父級元素作為參考點，如果都沒有,即<body>作為參考點
relative相對定位:
相對於元素自己
沒有脫離文檔流
脫離文檔流是啥?為什麼要有定位屬性的父級元素???
先談論脫離文檔流的部分，當一個元素A的定位屬性被設為絕對定位時,表示元素A可以在瀏覽器上的任何位置做定位，不會受其他元素佔位的影響。 如果假設他的父級元素(元素A的上層)無特別設置定位屬性(relative)，對應的參考點就是<body>。
上面我們可以看出紅色的絕對定位因為參考點是<body>可定位範圍變成整個瀏覽器，而相對定位是相對於自己，藍色初始位置(瀏覽器預設位置)是在畫面左上角，透過relative往下且往右30px。
好，我們對紅色方形外面包一個黃色父級元素<div>並給予它一個relative的定位屬性，藍色方形的位置調整成 bottom: 30px; right: 30px;看看會發生什麼事?
上圖我們可以發現紅色方形可定位的範圍變成黃色方形了~
好，我們再來看看藍色框框的結果。
可以發現其中差異，藍色方形跑回原本的位置，第二次定的位置是相對於藍色方形現在的位置。
再舉個例子:
絕對定位可以想像是在一所大學內教室的位置，當一位學生離開時，則不保留位置。而相對定位代表人走了,但位置依然保留。
其他的定位方式留待下一篇來寫。以上是今天筆記內容，如果有觀念不正確的地方，歡迎提出指正:)
