# 常用 Props（下）

### width & height

寬度與高度絕對是你一定會使用到的屬性，能使用的屬性值單位，較常見的有：px、％、em、rem、vw、vh，大部分可分為「相對單位」與「絕對單位」。

#### 100%與100vw的差別？

寬100%的範圍：我們設定一個物件 `width: 100%;` 的時候，該物件寬度將會是**父層內容**的可運用空間。\
而vw代表的是viewport width，100vw為整個可視螢幕的寬度。

{% embed url="<https://codepen.io/yuenwu1996/pen/BaOyVzK>" %}

### background

設定網頁中元素的背景，background的值有多種css屬性所組成，完整的寫完可以高達8個值。

```css
background: gray url("test.png") scroll no-repeat 50% 50% / 50% 50%;
```

值的順序如下，值的順序寫錯可能整段都會失效，需特別注意，如果記不起來順序，把每一個分開寫也是可以的。

1. background-color
2. background-image
3. background-attachment
4. background-repeat
5. background-poition
6. background-size

```css

範例
background: gray url("test.png") scroll no-repeat 50% 50% / 50% 50%;
你可以寫成👇🏻這樣
background-color: gray;
background-image: url("test.png");
background-attachment: scroll;
background-repeat: no-repeat;
background-poition: 50% 50%
background-size:5 0% 50%;
```

### border

透過border設定邊框的樣式，可以一次設定上下左右四個邊框，也能分別設定，border通常會同時包含邊框的粗細、邊框的顏色、邊框的樣式。

<pre class="language-css"><code class="lang-css"><strong>border-width: 1px;
</strong>border-color: white;
border-style: none;
</code></pre>

{% embed url="<https://codepen.io/yuenwu1996/pen/zYJBqQw?editors=0100>" %}

### border-radius

添加圓角的效果，跟border一樣，border-radius其實是一個縮寫，集合了左上、右上、右下、左下，可以為四個邊圓角設定不同數值，設定方向順序為 border-radius: 左上 右上 右下 左下

```css
/* 設定一個值 */
border-radius: 四角;

/* 設定兩個值  */
border-radius: [左上 右下] [右上 左下];

/* 設定三個值 */
border-radius: 左上 [右上 左下] 右下;

/* 設定四個值 */
border-radius: 左上 右上 右下 左下;
```

{% embed url="<https://codepen.io/yuenwu1996/pen/poObEeK>" %}

### margin & padding

padding: 內距，調整border內到內文之間的距離。

margin: 外距，調整border外的與其他元素的距離。

<figure><img src="https://3433349642-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfNa3cQXA0JgS2aeBbzYg%2Fuploads%2FnTJjMEesDIV9jNaKJPMV%2FScreenshot%202023-02-23%20%E4%B8%8B%E5%8D%885.41.43.png?alt=media&#x26;token=f334b7b5-4d6d-4a6a-bf74-00a615993677" alt=""><figcaption><p>圖片來源：<a href="http://www.w3schools.com/css/css_boxmodel.asp">W3Schools</a></p></figcaption></figure>

```css
/* 設定一個值 */
margin: 四邊外距;
padding: 四邊內距;

/* 設定兩個值  */
margin: 上下外距 左右外距;
padding: 上下內距 左右內距;

/* 設定三個值 */
margin: 上 左右 下;
padding: 上 左右 下;

/* 設定四個值 */
margin: 上 右 下 左;
padding: 上 右 下 左;
```

{% hint style="info" %}
margin能設置負值，padding不能設置負值
{% endhint %}

### 💻 效率提升小技巧 codepan快捷鍵

|           | Windows           | Mac                  |
| --------- | ----------------- | -------------------- |
| 新增<標籤>    | 標籤名 ＋ tab鍵        | 標籤名 ＋ tab鍵           |
| 存檔        | Ctrl + S          | Command + S          |
| 往後 縮排     | Ctrl + }  或 `tab` | Command + }  或 `tab` |
| 往前 縮排     | Ctrl + }  或 `tab` | Command + }  或 `tab` |
| 新增＆解除註解   | Ctrl + /          | Command + /          |
| 重複選取相同的單字 | Ctrl + D          | Command + D          |
| 刪除 行      | Ctrl + X          | Command + X          |

### 小結

### 作業

使用 上述所學的常用屬性在codepen上試著做出一張自己的名片

### 參考來源

* <https://www.w3schools.com/css/>
