---
# System prepended metadata

title: 尺寸
tags: [NKFW 網頁設計入門]

---

# 尺寸
###### tags: `NKFW 網頁設計入門`

## 尺寸簡介

先帶大家來看容器尺寸

1. 先打開隨便一個網頁 (以中央大學校網為例)

    ![](https://i.imgur.com/bAzbFgp.png)

2. 按F12，選擇彈出畫面左上角的Elements
        
    ![](https://i.imgur.com/Y2lrRrD.jpg)

3. 隨便點選一個標籤後，在下方區塊滑到底
    
    ![](https://i.imgur.com/rpgTcjz.png)

4. 可以看到右下角有層層堆疊的長方形和一些陌生的英文單字，這些都跟一個該容器(標籤)的尺寸有關，以下就讓我們來看看他們分別代表甚麼吧!

## 語法介紹

以下圖為範例

![](https://i.imgur.com/f91JLBf.png)

### content(內容物)

:::info
最小的藍色長方形是內容物，可以是文字或圖片等等。如下方塗色處
:::

語法：
```css!
width: 數字+單位;

height: 數字+單位;
```

![](https://i.imgur.com/BHFEgXx.png)

### padding (內距)

:::info
padding為下圖塗色處，也就是內容物到邊框的距離
:::

基本語法：
```css!
padding: 數字+單位;
```

:::spoiler 點我看更多padding語法
:::info
* padding : 上值 右值 下值 左值;
    * 依順時針設定四個方向padding的值
* padding : 上下值 左右值;
    * 依序設定上下和左右padding的值
* padding : 值;
    * 同時設定上下左右的padding的值
* padding-top : 值;
    * 設定上方的padding值
* padding-right : 值;
    * 設定右方的padding值
* padding-bottom : 值;
    * 設定下方的padding值
* padding-left : 值;
    * 設定左方的padding值
* 例：
```css!
padding : 10px 15px 20px 25px;
padding-top : 10px;
```
:::


![](https://i.imgur.com/zlXVcwJ.png)

### border (邊框)

:::info
border為下圖的黃色外框
:::

![](https://i.imgur.com/MyHwQmQ.png)

語法：
* 線條樣式：dashed 虛線、solid 實線......
* 寬度：px
```css!
border : 寬度 線條樣式 顏色; (順序可換)
```
    
例子如下：
```css!
border : 5px dashed red;
```
![](https://i.imgur.com/7UTweao.png)


### margin (外距)

:::info
margin為下圖塗色處，是容器的外部大小，用於與附近標籤保持距離
:::

基本語法：
```css!
margin: 數字+單位;
```

:::spoiler 點我看更多margin語法
:::info
* margin : 上值 右值 下值 左值;
    * 依順時針設定四個方向margin的值
* margin : 上下值 左右值;
    * 依序設定上下和左右margin的值
* margin : 值;
    * 同時設定上下左右的margin的值
* margin-top : 值;
    * 設定上方的margin值
* margin-right : 值;
    * 設定右方的margin值
* margin-bottom : 值;
    * 設定下方的margin值
* margin-left : 值;
    * 設定左方的margin值
* 例：
```css=
margin : 10px 25px 15px 20px;
margin-right : 20px;
```
:::
![](https://i.imgur.com/gUYnxCh.png)

### margin auto

:::info
auto會自動分配剩餘空間，在此只介紹如何用margin搭配auto進行置中，不做更深入討論。
:::

語法：
```css!
margin: auto;
```

### 盒模型
![](https://i.imgur.com/AT9nnSg.png)

:::warning
### padding 和 margin 的差異
* padding 在容器範圍內；margin 在容器範圍外
* margin值可以是負的；padding值不能是負的
:::

## Project1：自己來試試查看容器尺寸

:::info
來試著自己查看網頁容器尺寸吧！

範例網頁：
[中央大學資工系](https://www.csie.ncu.edu.tw/)
[剛剛的盒模型模擬頁面](https://nkfw.dstw.dev/demo/CSS/css_size/project_1/)

進入上面這兩個網頁後，打開F12檢查，找到並點選裡面名為container的class，將下方區塊滑到最下方。
:::

## Project2：盒模型的挑戰

:::info
前面我們學到了基本的盒模型觀念，以及基本的語法，透過實際操作可以讓我們更加理解。試著實際運用以下及上週所學的內容，做出下圖的網頁。
:::

![](https://i.imgur.com/GDF5EH1.png)

:::spoiler 提示在這
:::info
1. 上下兩個部分其實相同，所以可以選擇在做完一個部分後複製。
2. 運用通用選擇器(*)，對網頁CSS的padding及margin屬性進行reset。
3. 放置一組div標籤，最好是可以給他一個class名稱。
4. div標籤中適當放入h3, p及img標籤，並設定img標籤的src屬性(圖片位置)。
5. 設定div的寬度(width)、padding、border以及margin。
6. 設定圖片的寬度，使其不超出邊框(width, %)。
7. 將整個div置中(與margin屬性有關)。
8. 設定背景顏色(background-color)。
9. 複製body中div的內容。
:::

:::spoiler 參考解答
```css!
* {
    margin: 0px;
    padding: 0px;
}
.container {
    background-color: lightblue;
    width: 220px;
    border: 10px solid orange;
    padding: 20px;
    margin: 10px auto;
}
.container img {
    width: 100%;
}
```

```xml!
<div class="container">
    <img src="https://picsum.photos/seed/picsum/900/600" alt="圖片跑不出來">
    <h3>圖片說明</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, quidem a perspiciatis vero laudantium magni totam non culpa natus similique!</p>
</div>
```
:::

## 尺寸的單位

### 絕對單位
* px
    * pixel 像素的縮寫，表示螢幕中的每一個點
    * 大小受解析度影響
    * 最常使用
### 相對單位
* vw
    * viewport width 視窗==寬度==
    * 大小受視窗寬影響
    * 值1~100，表示大小為視窗寬度的多少百分比
* vh
    * viewport height 視窗==高度==
    * 大小受視窗高影響
    * 值1~100，表示大小為視窗高度的多少百分比
* %
    * ==父==標籤(上一層標籤)大小幾%
    * 例： width:50% 表示寬度為上一層的一半
### 以font-size為基準的相對單位
* em
    * ==父==標籤(上一層標籤)==字體==大小的幾倍
    * 例：2em 表示大小為父標籤的兩倍
* rem
    * ==根==標籤(html標籤)==字體==大小的幾倍
    * 例：2em 表示大小為html標籤大小的兩倍
    
## width / height

* 調整寬度 / 長度
* 值可套用上方尺寸單位
    * 例：width : 50vw;

## max-width / max-height

* 設定最大寬度 / 高度
* 容器寬(高)在max-width(max-height)以下會自由伸縮

## Project3：max-width的用法-圖片控制

:::info
設置圖片時，我們有時會想要讓圖片大小隨著容器大小變化，但又同時不想要他顯示得太大。

請設計類似下圖模樣的網頁。裡面的內容都由一個div作為容器包住，且要能夠隨著視窗大小變化寬度(使用%或vh)；在容器中放入圖片，並透過控制圖片的width及max-width，使其寬度永不超過600px，但同時也不超出容器的邊框(使用%)。

你的容器必須可以隨著視窗大小改變（百分比vh)
放圖片在裡面
圖片寬度不能夠超過多少px（max-width)
容器縮小的時候圖片不能夠超出去(width:100%或是小一點)
:::

![](https://i.imgur.com/2ISdKa6.png)

:::spoiler 參考解答
```xml!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            padding: 10px;
            border: 5px solid black;
            width: 90%;
        }
        .container img {
            width: 100%;
            max-width: 600px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Heading</h1>
        <img src="https://picsum.photos/seed/picsum/900/600" alt="">
        <h3>Description</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad adipisci non officia laudantium. Fugiat minus incidunt itaque repellat amet aperiam facilis repellendus? Tempora vero illum odit voluptatem facilis sed consequuntur.</p>
    </div>
</body>
</html>
```
:::

## Issue1：為什麼我的容器沒有高度

:::info
使用%設定標籤寬度與高度時，需特別注意其上層元素是否具有寬度與高度。
:::

## Issue2：為什麼網頁會超出螢幕

:::info
原因：
瀏覽器對於大部分元素都有設定padding及margin預設值。

解決方式：
可以透過通用選擇器進行CSS reset得到解決。
:::
