# 尺寸 ###### 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得到解決。 :::