區塊元素(block)

• 預設為區塊元素的標籤有：h1~h6,p,div,section,header,nav等等…
• 會造成「換行的標籤(元素)」
• 可以設定「width」與「height」。

行內文字元素(inline)

• 預設為行內元素的標籤有：a, span, label :before, :after
• 不會造成「換行」
• 不可設定「width」與「height」
• 中間會有「空格」

行內區塊元素(inline-block)

• 預設為行內區塊元素的標籤有：img, input, button, textarea
• 不會造成「換行」
• 可以設定「width」與「height」
• 中間會有「空格」
• 適合做排在一起的小元件，不適合做精確的區塊分割

橫向對齊方式的語法

flex-start 靠左
flex-end 靠右
center 置中
space-between 靠左且靠右
space-around 分割空間後置中

垂直對齊方式的語法

flex-start 靠上
flex-end 靠下
center 中

定位模式(position)

• 定位相關屬性有：top, bottom, left, right, z-index

定位模式(一): static

• 所有元素定位模式預設都是static，static模式無法使用任何定位相關屬性。
• top, bottom, left, right, z-index 在此模式下無效

定位模式(二): relative(相對定位)

• 以元素原本所在位置定位
• relative元素仍會在畫面佔據空間
• 由上而下推 top: 0px;
• 由左往右推 left: 0px;
• 由下往上推 bottom: 0px;
• 由右往左推 right: 0px;
• bottom預設值不是 0，所以要做漸變就要加上 bottom:0px;

定位模式(三): absolute

• 以最近的上一層元素作為參考來定位
• 做為參考的元素不得為position: static
• 所以上一層元素要寫position: relative;不會跟其他元素重疊在一起
• 設定為absolute模式的元素將不會在畫面上佔據空間
• 右下角：

right: 0px;
bottom: 0px;

• 右上角：

right: 0px;
top: 0px

• 取消按鈕圖的底色
  background: transparent;