# 🏅 Day 13 - container 容器應用

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

### 觀看 container 的範圍
1. 點選設計稿右側的 Main menu > View > Layout grids 可開關布局網格。

2. 可以觀看到被灰色區塊覆蓋的部分就是 container 的範圍

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

**計算方式一：**

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

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

>要開啟這個視窗較為複雜，
>1.需要將設計稿新增至自己的草稿(如下圖)後
>

>
>2.點擊左方的 品牌介紹頁 的部分選取全區塊

>
>3.點擊右方的 Layout guide 區塊，即可找到該資訊
>

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


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://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](連結) | -->