---
# System prepended metadata

title: "\U0001F3C5 Day 13 - container 容器應用"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 13 - container 容器應用

container 容器指的是網頁最外層的標籤，是用來管理網頁結構的一個角色
通常網頁的主要內容都會放在 container 裡，為了讓視覺瀏覽可以專注在網頁中心。
> 設計稿外層 1920px 為瀏覽器邊界示意，並非整體 body、容器的寬度
![image](https://hackmd.io/_uploads/SJ8Kixh7gg.png)





### 觀看 container 的範圍
1. 點選設計稿右側的 Main menu > View > Layout grids 可開關布局網格。
   ![](https://imgur.com/qFFXDm1.png)

2. 可以觀看到被灰色區塊覆蓋的部分就是 container 的範圍
![image](https://hackmd.io/_uploads/BJCojlnXlx.png)





### 計算 container 的寬度
以鞋子電商設計稿的品牌簡介區塊為例

**計算方式一：**
![image](https://hackmd.io/_uploads/SJ01hx2Qxe.png)



總共有 12 列（灰色區塊）x 一列 86px + 11 個間隔 x 一個間隔寬為 24px = **1296px**
圖中內容佔了 8 列灰色區塊，因此計算方式為 8 列 x 86px + 7 個間隔 x 24px = 856px

>此設計稿的 Guildeline 也有提供此圖片供各位參考。

>要開啟這個視窗較為複雜，
>1.需要將設計稿新增至自己的草稿(如下圖)後
>![image](https://hackmd.io/_uploads/ByM46l2meg.png)

>
>2.點擊左方的 品牌介紹頁 的部分選取全區塊
![image](https://hackmd.io/_uploads/ryPt6xhmlx.png)

>
>3.點擊右方的 Layout guide 區塊，即可找到該資訊
>![](https://hackmd.io/_uploads/S1D3_UgGxg.png)



**計算方式二：**
用設計稿邊界 1920px 減去兩側邊距 532px

![image](https://hackmd.io/_uploads/H14yAl3Qgl.png)


1920px - 532px*2 = **856px**

### 容器實際運用
設定 .container 寬度並搭配 `margin: 0 auto;` 讓整體內容可以放在畫面中間，水平置中

### max-width 介紹
在 .container 中的寬度，通常會使用 max-width 語法來設定，該語法與 width 在呈現上僅有部分差異。
max-width 會將區塊設定一個「最大寬度限制」，限制區塊最大寬度的同時，當螢幕視窗縮小到小於區塊大小時，該區塊就會跟著同步縮小，因此能避免頁面 X 軸的產生。
width 則是直接寫死一個寬度，所以當螢幕視窗縮小到小於區塊大小時，頁面上就會出現 X 軸。

畫面演示：
<iframe width="500" height="400" src="https://www.youtube.com/embed/IOboFIUnVRk" title="max-width vs width" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


### 題目
嘗試實作完成鞋子電商設計稿品牌簡介區塊，請複製此 [Codepen](https://codepen.io/fhljksmg-the-styleful/pen/vEOYePN?editors=1100)，補上 `...` 的部分
> 容器寬度為該設計稿的容器寬度



## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/Eajxbjz?editors=1100
-->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
|  1  | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/QwbREQQ?editors=1100) |
|  2  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/NPqVrQz)|
|  3  |  Jerpme  |[Codepen](https://codepen.io/qsc002163/pen/WbvBGbg?editors=1100) |
|  4  |  Shawn  |[Codepen](https://codepen.io/LiShang/pen/PwqvzMO?editors=1100) |
|  5  |  那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/RNPmGRL) |
|  6  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/NPqVRRO) |
|  7  |  Hao  |[Codepen](https://codepen.io/Howell/pen/ogXRzEw) |
|  8  |  kate_bearchou |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/gbpJwej) |
|  9  | 西娜 |[Codepen](https://codepen.io/Sheena-the-encoder/pen/bNdywKz?editors=1100) |
|  10  | NAOJUN |[Codepen](https://codepen.io/NAOJUN/pen/ByNeLvM) |
|  11  |  Joseph_Kyuu  |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/dPoEpEd) |
|  12  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/WbvBGWV) |
|  13  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/NPqVbKQ) |
|  14  |  Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/MYwdbgy) |
|  15  |  Klaus Chen  |[Codepen](https://codepen.io/Klaus-Chen/pen/VYLOKox) |
|  16  |  孟  |[Codepen](https://codepen.io/Mengru0503/pen/yyNWaOr) |
|  17  |  Jenna  |[Codepen](https://codepen.io/abiscc14/pen/xbGNRVP) |
|  18  |  NellyGuo  |[Codepen](https://codepen.io/NNN-the-selector/pen/vEOwyKQ?editors=1100) |
|  19  |  Satar  |[Codepen](https://codepen.io/SatarKuo/pen/wBaboJv?editors=1100) |
|  20  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/RNPmoZd)
|  21  |  柔術小子  |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/ByNeQda)
|  22  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/emNagNr)
|23|Saika|[CodePen](https://codepen.io/saika4501/pen/wBabgzJ?editors=1100)|
|  24  |  Katie  |[Codepen](https://codepen.io/Katiekatiehsu/pen/vEOwggO)
|  25  |  pastor  |[Codepen](https://codepen.io/peter_hung/pen/NPqVdXw) |
|  26  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/GgJaraE) |
|  27  |  Sid  |[Codepen](https://codepen.io/monkeybear721/pen/xbGNqqO?editors=1100) |
|  28  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/OPVYpgE) |
|  29  |  suemma  |[Codepen](https://codepen.io/suemma/pen/zxGQwwE) |
|  30  |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/raVgmPJ?editors=1100) |
|  31  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/GgJaEEq?editors=1100) |
|  32  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/bNdyRYr) |
|  33  |  JiaMori  |[Codepen](https://codepen.io/jiamori/pen/NPqVgVM) | 
|  34  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/NPqVvoV?editors=1100) | 
|  35  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/pvJmWLR) | 
|  36  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/vEOweLz) |
|  37  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ogXRGaJ?editors=1100) |
| 38 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/raVgYNv?editors=1100)
|  39  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/QwbROzr?editors=1100) |
|  40  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/MYwdrbM) |
|  41  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=MYwdrQg) | 
|  42  |  CBK  |[Codepen](https://codepen.io/BK-C-the-styleful/pen/QwbRarP) | 
|  43  |  Peggy  |[Codepen](https://codepen.io/Peggy_C/pen/emNaVwV) |
|  44  |  Geno Chen  |[Codepen](https://codepen.io/kai-chen-the-sans/pen/ByNerwW?editors=1100V) |
|  45  |  TY  |[Codepen](https://codepen.io/Ted-Y/pen/ogXRPWB?editors=1100) |
|  46  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/raVgQMK?editors=1100) |
|  47  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/MYwddwK?editors=1100) |
|  48  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/bNdPGpw) |
|  49  |  ChrisWang  |[Codepen](https://codepen.io/Wang-Chris/pen/RNPzNxL) |
|  50  |  Huang Eagle  |[Codepen](https://codepen.io/YuCi/pen/RNPzPby) |
|  51  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/QwbXbZN) |
|  52  |  Yan*  |[Codepen](https://codepen.io/Yan-L/pen/MYwMOKv?editors=1100) |
|  53  |  Evelyn  |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/azOgBqV) |
|  54  | 随縁  |[Codepen](https://codepen.io/anki0072011/pen/ZYGdaYX) |
|  55  | NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/zxGVeOq) |
|  56  | 平平  |[Codepen](https://codepen.io/ypinpin/pen/EajqmvN) |
|  57  | Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/wBaVmoa?editors=1100) |
|  58  | Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/ByNXvjW?editors=1100) |
|  59  | Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/zxvOwRq?editors=1100) |
|  60  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/raOBExW) |
|  61 |  Gloria  |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/myedreb?editors=1100) | 
|  62 |  力文  |[Codepen](https://codepen.io/liwenchiou/pen/OPyJmvZ?editors=1100) | 
|  63 |  Atian  |[Codepen](https://codepen.io/A-Tian-Chen/pen/YPyPXgQ) |
|  64 |  雅潔  |[Codepen](https://codepen.io/MOMOYA/pen/vENOLaw) | 
|  65  |  YUCCC  |[Codepen](https://codepen.io/taroooo/pen/wBKadyq?editors=1100) |
|  66  |  Tanuki_狸貓  |[Codepen](https://codepen.io/tanuki320/pen/jEbPRJV?editors=1100) |
|  67  |  B  |[Codepen](https://codepen.io/Babel777/pen/empNWeQ) |
|  68  |  Lika  |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/KwddXZy) |
|  69  |  主委加碼啦幹  |[Codepen](https://codepen.io/popbob-the-bashful/pen/empJWmR?editors=1100) |
| 70 | water | [Codepen](https://codepen.io/wateruby/pen/VYvebbR)|
|71| 小趴| [Codepen](https://codepen.io/papa2415/pen/gbarWXV)|
|  72  |  Lucy  |[Codepen](https://codepen.io/Lucytrycode/pen/ogjxMGv) |
|  73  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/YPyWYjQ) |
|  74  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/myeORxZ?editors=1100) |
| 75 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/VYvmMpW) |
|  76  |  cindy |[Codepen](https://codepen.io/a50134/pen/dPYNEmO) | -->
|  77|  Midy Wu  |[Codepen](https://codepen.io/work-wu/pen/EaVweZV) |
|  78|  Mini  |[Codepen](https://codepen.io/miiinii32-Cheng/pen/QwjrWZb?editors=1100) |
| 79 | 4ping | [Codepen](https://codepen.io/928Libra/pen/GgpGJqq)
|  80  |  maerc  |[Codepen](https://codepen.io/Lu-Liangyu/pen/ByoqXqG?editors=1100) |
|  81  |  Wafa  |[Codepen](https://codepen.io/dqricwgo-the-reactor/pen/bNVZKjm) |
|  82  |  PAgaNiNi  |[Codepen](https://codepen.io/PA-OTTER/pen/VYvOMJm?editors=1100)|
|  83  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/VYeaWzM?editors=1100)|



<!-- |  排序  |  姓名  |[Codepen](連結) | -->