最後兩天主要是整理一些常用或我個人覺得好用的特性，先來延伸一下之前提過的幾項。

單邊、單角設定

[Day25]有提過border-radius、padding、margin這三個屬性的值分別為一、二、三、四個時會有什麼不同，但其實border-radius還有單獨的左上、右上、右下、左下，padding和margin有單獨的上、下、左、右，也就是可以只指定單邊的圓角角度/間距。

• 舉例來說，以下的正方形，我只想要右上角為20px的圓角，可以這樣寫。
  border-top-right-radius: 20px;

  -->

小整理

• border-radius

  屬性|用途|範例|備註
  --|--
  border-top-left-radius|設定左上圓角角度|border-top-left-radius: 20px|常用單位：px、em、% 等
  border-top-right-radius|設定右上圓角角度|border-top-right-radius: 20px|常用單位：px、em、% 等
  border-bottom-right-radius|設定右下圓角角度|border-bottom-right-radius: 20px|常用單位：px、em、% 等
  border-bottom-left-radius|設定左下圓角角度|border-bottom-left-radius: 20px|常用單位：px、em、% 等

• padding

  屬性|用途|範例|備註
  --|--
  padding-top|設定上內間距|padding-top: 20px|常用單位：px、em、% 等
  padding-right|設定右內間距|padding-right: 20px|常用單位：px、em、% 等
  padding-bottom|設定下內間距|padding-bottom: 20px|常用單位：px、em、% 等
  padding-left|設定左內間距|padding-left: 20px|常用單位：px、em、% 等

• margin

  屬性|用途|範例|備註
  --|--
  margin-top|設定上外間距|margin-top: 20px|常用單位：px、em、% 等
  margin-right|設定右外間距|margin-right: 20px|常用單位：px、em、% 等
  margin-bottom|設定下外間距|margin-bottom: 20px|常用單位：px、em、% 等
  margin-left|設定左外間距|margin-left: 20px|常用單位：px、em、% 等

水平置中

[Day26]我是使用計算寬度的方式達到水平置中的效果，個人覺得是好理解的，但其實可以直接使用margin: auto;就好！

像是解數學題，有些人土法煉鋼推算出來，有些人則使用背公式的方法。

• 舉個例，要將預設置左的正方形左右置中在頁面上，除了計算寬度外，可以這樣寫。
  margin: auto;

  
  ↓ ↓ ↓ ↓ ↓ ↓ ↓
  

移除浮動

再來也是[Day26]有提過的浮動屬性，因為這次沒有用到移除的部分所以只介紹了如何使用浮動。

• 這裡也舉個例，原先圖片為靠左浮動，後面的段落內容（A-G）都會顯示在圖片的右側。假如我們要F和G脫離圖片右側，回到預設（排在圖片下方並靠左）的樣式，可以設定F段落clear: both;。
  
  ↓ ↓ ↓ ↓ ↓ ↓ ↓
  

稍微整理了一些漏網之魚，希望是有幫助的。我是YQ，完賽倒數2天，明天見。