在上一篇學到了 CSS 的基本語法、使用選擇器以及檔案的套用方法。接著就讓我們來學習如何運用樣式屬性！首先來簡單了解一下 CSS 是如何去進行網頁的排版和調整元素的樣式。

Box Model

在 CSS 裡面，所有 HTML 元素都會由一個盒子構成，這個盒子就稱為 Box Model，針對這個盒子去做調整，就能慢慢建構出網頁想要的排版。

可以用屬性 display 來設定元素的 Box Model 類型，通常會預設成兩種：

display: inline | block;

• 行內元素 (Inline類型)
  元素不會換行，並且盒子的大小由元素的內容撐開，因此不能設定盒子的寬度和高度。常見的元素有：<a>、<img>、<span>...。
• 區塊元素 (Block類型)
  元素會自動換行，在不設定盒子大小的情況下和包裹它的容器一樣寬，也可以另外設定盒子的寬度和高度。常見的元素有：<h1>、<p>、<div>...。

除了 inline / block，display 還有更多設定值可以改變元素的佈局

設定盒子的樣式

盒子分成四個區塊：Content（藍區） / Padding（綠區） / Border（黃區） / Margin（橘區）

試著為四個區塊新增樣式屬性：

• 設定內容Content 的寬 / 高 / 背景顏色 — width / height / background-color

  width: 150px;
  height: 80px;
  background-color: yellow;
  

• 設定內邊距Padding — padding

  padding: 10px;
  
  /* 等同於： 
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  */
  

• 設定邊框Border — border：

  /* border: 粗細 顏色 樣式 */
  border: 5px blue solid;
  

• 設定與其他元素的邊距Margin — margin

  margin: 20px;
  
  /* 等同於： 
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  */
  

網頁就是由這樣一個一個的盒子堆砌而成的喔！

盒子寬高的計算方式

盒子預設採用的元素寬高的計算方式還有不一樣？一般情況下，當設定 width 和 height ，其實並不是完全代表看到的寬高度，只是設定盒子 Content 的大小，padding 和 boder 的部分一樣會讓盒子看起來變大，，而這個計算方式就是 Content-box。

Content-box 的清況下，設定 width: 200px;、height: 100px;

但我們通常會想要直接通過 width / height 就可以直接設定外觀的大小，所以就有了 Border-box，它的寬高設定就會等於 Content + Padding + Border。

Border-box 的情況下，設定 width: 200px;、height: 100px;

可以透過 box-sizing 這個屬性來設定元素要採用的計算方式：

box-sizing: content-box | border-box;

常用樣式

知道網頁元素是如何進行排列了，但我們還沒了解 CSS 的真正的能耐，接下來就直接動手做，認識一些常用的樣式屬性。

首先在 HTML 裡新增一個元素：

<div id="test">HELLO<div>

移動位置

• position：設定元素的定位方式
• top / bottom / left / right：設定元素移動的距離

position: relative;    //相對定位：相對調整本身的位置
top: 100px;            //向下相對移動 100 pixel

改變顏色

• color：設定文字顏色
• background-color：設定背景顏色

color: #FAC9B8;
background-color: #C5DECD;

設定文字

• font-family：設定字型（找字體可以到 Google Fonts）
• font-size：設定字體大小
• font-weight：設定字體粗細
• text-align：設定文字對齊方式

font-family: "Noto Sans CJK TC";
font-size: 28px;
font-weight: bold;  //粗體字
text-align: center;  //文字置中對齊

怎麼樣，是不是跟原本不一樣了呢！這就是 CSS 的魔力，當你熟悉更多樣式屬性，你就能更靈活的美化你的網頁。

小結

今天講到 CSS 的本體 Box Model、還有一些常用的樣式。如果你還想學習更多的屬性，你可以參考 CSS Reference 或是 w3schools-css 網站，上面有詳盡的樣式表還有畫面範例供你學習，建議可以透過邊學邊做的方式，會更容易快速熟悉 CSS 的樣式屬性。明天的文章會進一步提到如何用 CSS 的排版方式之一的 Flexbox，來實現多樣化的網頁佈局，那就下章再會囉！

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

參考資料

• MDN Web Docs - CSS