###### tags: `前端技能樹`

# 玩轉CSS樣式，進入美麗新世界

在上一篇學到了 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``` ，其實並不是完全代表看到的寬高度，因為 ```padding``` 和 ```boder``` 一樣會讓盒子看起來變大**，只是設定盒子Content的大小，而這個計算方式就是 **Content-box**。

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

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

>Border-box 的情況下，設定 ```width: 200px;```、```hegiht: 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](https://fonts.google.com/?selection.family=Acme)）
- **```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](https://cssreference.io/) 或是 [w3schools-css](https://www.w3schools.com/css/) 網站，上面有詳盡的樣式表還有畫面範例供你學習。明天的文章會進一步提到如何用 Flexbox 來實現多樣化的網頁佈局，那就下章再會囉！

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

### 參考資料
- [MDN Web Docs - CSS](https://developer.mozilla.org/zh-TW/docs/Learn/CSS)