# 🏅 Day 7 - box-sizing

### content-box

此為 box-sizing 屬性的預設值，width(寬)、height(高) 只包括內容本身的寬高，不包括 border、padding。
舉例：
當有一個 box 設定 `width: 30px; height: 20px; border: 10px solid black;`，
則此 box 總寬高：寬度: 50px, 高度: 40px

### border-box

width(寬)、height(高) 除了內容本身的寬高，還包括 border、padding
舉例：
當有一個 box 設定 `width: 30px; height: 20px; border: 10px solid black; box-sizing: border-box;`，
則此 box 總寬高：寬度: 30px, 高度: 20px

### 題目

請觀看此 [CodePen](https://codepen.io/hexschool/pen/yLvWLZY) 計算 .box1 與 .box2 的寬高（請不要用開發人員工具觀看）

## 回報流程

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


<!-- 解答：
.box1: 寬：338px 高：110px
.box2: 寬：300px 高：110px
-->

### 回報區

| # | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
| 1 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/WNBBNNr)|
| 2 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/JjqgPGd)|
| 3 | hao jing | [Codepen](https://codepen.io/hjxu/pen/WNBVrWM?editors=1100)|
| 4 | han | [Codepen](https://codepen.io/iamHanCheng/pen/yLWjwYM) |
| 5 | Theodore | [Codepen](https://codepen.io/GustavoFringgg/pen/WNBVwZa) |
| 6 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/JjqgXLK) |
| 7 | Mike | [Codepen](https://codepen.io/mike2049/pen/XWwvdPm?editors=1100) |
| 8 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/ExzqKLP?editors=1100) |
| 9 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/PovMNxa)|
|10|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/ZENgWPY)|
|11|tim|[Codepen](https://codepen.io/jskrtivy-the-animator/pen/yLWmOWL)|
| 12 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/vYwoGqd)|
| 13 | Chloe_墨 | [Codepen](https://codepen.io/ChloeTseng1026/pen/ZENgOGQ) |
| 14 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/RwmXRVe)|
| 15 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/xxNvOpp) |
| 16 | 陳亭廷 | [Codepen](https://codepen.io/ting1124/pen/xxNvOzY) |
| 17 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/gOJVMVY?editors=1100) |
| 18 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/XWwvjpY) |
| 19 | chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/eYaqdLP) |
| 20 | kawa | [Codepen](https://codepen.io/z83xji6/pen/RwmXobo) |
| 21 | yoishere | [Codepen](https://codepen.io/yoishere/pen/dyExOGM) |
| 22 | AuraTao| [Codepen](https://codepen.io/AURATAO/pen/bGyXBqM) |
| 23 | Angela_la| [Codepen](https://codepen.io/Angela-the-builder/pen/rNgXWwX?editors=1100) |
| 24 | Yolanda| [Codepen](https://codepen.io/vcscqrtz-the-animator/pen/KKLONWr) |
| 25 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/NWVQdzP?editors=1100) |
| 26 | david1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/qBGeRPx?editors=1100) |
| 27 | N7 | [Codepen](https://codepen.io/neohyntw/pen/KKLOWPa) |
| 28 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/wvbVJWW) |
| 29 | 皮皮 | [Codepen](https://codepen.io/rainbow-the-reactor/pen/oNRKZGr) |
| 30 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/gOJVmXr) |
| 31 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/rNgXmaR) |
| 32 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/zYQgwPx) |
| 33| jasonlin | [Codepen](https://codepen.io/hexschool/pen/yLvWLZY) |
| 34 | KUN. | [Codepen](https://codepen.io/barry91205/pen/PovMjNx) |
| 35 | Kim | [Codepen](https://codepen.io/kim0101__/pen/oNRKZxV) |
| 36 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/XWwvabZ)|
| 37 | Sonia |[Codepen](https://codepen.io/YUJOU/pen/XWwvadE?editors=1100)|
| 38 | Arvin |[Codepen](https://codepen.io/arvinyang1925/pen/XWwvazP)|
| 39 | anderson666 |[Codepen](https://codepen.io/goodmanbuild/pen/MWdNvvQ)|
| 40 | MY |[Codepen](https://codepen.io/ahmomoz/pen/WNBVEyE)|
| 41 | 地瓜 |[Codepen](https://codepen.io/huangtzuchin/pen/NWVQvzg?editors=1100)|
| 42 | 小咪 |[Codepen](https://codepen.io/iloveu3000x/pen/mdYNBqM)|
| 43 | ninii傳教士 |[Codepen](https://codepen.io/niiniiii/pen/ZENgXRg)|
| 44 | fan_fan |[Codepen](https://codepen.io/fan1102/pen/vYwogXr?editors=1100)|
| 45 |OSN|[Codepen](https://codepen.io/osncodepen/pen/eYaqemJ)|
| 46 | Jim |[Codepen](https://codepen.io/JimChou/pen/pomMdRJ)|
| 47 | skyderry |[Codepen](https://codepen.io/hvvjvkva-the-sasster/pen/abreVPq)|
| 48 | .tsz_ying |[Codepen](https://codepen.io/bekgnohe-the-selector/pen/rNgXpKZ)|
| 49 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/VwOoyaN)|
| 50 | Sammy |[Codepen](https://codepen.io/fsczdlla-the-bold/pen/LYowdoJ?editors=1100)|
| 51 | glen_69515 |[Codepen](https://codepen.io/glenyaochih/pen/KKLORmq?editors=1100)|
| 52 | hsiu8767 |[Codepen](https://codepen.io/hsiu8767/pen/OJYKENj)|
| 53 | Kiwi |[Codepen](https://codepen.io/kiwi1113/pen/WNBVyMg)|
| 54 | fendy1223 |[Codepen](https://codepen.io/fendy1223/pen/NWVQzeE)|
| 55 | n913239 |[Codepen](https://codepen.io/n913239/pen/JjqgZzb)|
| 56 | hoyiiiii |[Codepen](https://codepen.io/hoyii/pen/LYowBqr)|
| 57 | wind |[Codepen](https://codepen.io/wind7y/pen/ZENgVEy)|
| 58 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/dyExwEP)|
| 59 | CrystalLala |[Codepen](https://codepen.io/crystallala/pen/mdYKeNP)|
| 60 | PoWei |[Codepen](https://codepen.io/Po-Wei-Lai/pen/OJYKYOz)|
| 61 | KevinHuang |[Codepen](https://codepen.io/qw-huang/pen/ZENgdPe?editors=1100)|
| 62 | ray |[Codepen](https://codepen.io/rayychenn/pen/ExBYjMV)|
| 62 | Enzo |[Codepen](https://codepen.io/JasonHo_HYC/pen/dyBbGGQ)|
| 63 | 俊 |[Codepen](https://codepen.io/jun12079/pen/RwzbreN)|
| 64 | TONY名彤 |[Codepen](https://codepen.io/Ming-Tung-Chien/pen/ExBYPzr)|
| 65 | 嚼勁 |[Codepen](https://codepen.io/James520284/pen/LYKPZxj)|
| 66 | smallr1229 |[Codepen](https://codepen.io/Smallr/pen/oNrvzvM)|
| 67 | jeffjoe486 |[Codepen](https://codepen.io/Jeff-K-the-selector/pen/jOjNVYv)|
| 68 | 星雨 |[Codepen](https://codepen.io/ybxyuhcv-the-solid/pen/bGPbgKP)|
| 69 | emmayo |[Codepen](https://codepen.io/emmayo/pen/OJeLpKb)|
| 70 | neoyo |[Codepen](https://codepen.io/Neo-oo/pen/LYKPyyV)|
| 71 | ㄚ華 |[Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/RwzbxvN?editors=1100)|
| 72 | Steven1220 |[Codepen](https://codepen.io/Steven1220/pen/xxNvyqb)|
| 73 | icesea25 |[Codepen](https://codepen.io/icesea25/pen/YzoKMpd)|
| 74 | lianne._. |[Codepen](https://codepen.io/Elaina-L/pen/JjqgQyy)|
| 78 | 雪莉 |[Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/ZEdEEqQ)|
| 79 | shine_lalala |[Codepen](https://codepen.io/cdjpjets-the-solid/pen/bGPGdzv)|
| 80 | EdHuang |[Codepen](https://codepen.io/yide1986/pen/QWXWNPB)|
| 81 | Enn |[Codepen](https://codepen.io/enntang/pen/KKjKzjr)|
| 82 | xcx100 |[Codepen](https://codepen.io/c13026/pen/qBzBNEZ)|
| 83 | Noelle |[Codepen](https://codepen.io/NoelleKH/pen/xxoxgzg?editors=0100)|
| 84 | .sytiny |[Codepen](https://codepen.io/emma6542/pen/Yzozxvg)|
| 85 | Show21 |[Codepen](https://codepen.io/t10026706/pen/xxoKedj?editors=1100)|
| 86 | Joannehu |[Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/qBzBpvQ)|
| 87 | DoryH |[Codepen](https://codepen.io/dorihung/pen/gONOeLo?editors=1100)|
| 88 | jamesct34 |[codepen](https://codepen.io/JCT34/pen/KKjKrZY)|
| 89 | iamcan |[codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/eYwYoZd?editors=1100)|
| 90 | Matt BB |[Codepen](https://codepen.io/mm3248965/pen/eYwmgMO)|
| 91 | 深海 |[Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/JjQoBNd)|
| 92 | Ana |[Codepen](https://codepen.io/Ana-Wu/pen/MWMYBvx)|
| 93 | macihuang|[Codepen](https://codepen.io/macy1215/pen/mdggMqy)|
| 94 | 610 |[Codepen](https://codepen.io/YI-LING-LIU/pen/QWXwoym)|
| 95 | xiang5141 |[Codepen](https://codepen.io/XIANG-XIANG/pen/YzoXNep)|
| 96 | Ollie |[Codepen](https://codepen.io/daiyy97/pen/yLdNvOg?editors=1100)|
|97 | qet1717 |[Codepen](https://codepen.io/gwteqexi-the-bold/pen/RwzPyax)|
|98 | zen |[Codepen](https://codepen.io/zen742937/pen/ExBjppY)|
| 99 | chris |[Codepen](https://codepen.io/chrischen666/pen/eYwNQaq)|
| 100 | 黛西 |[Codepen](https://codepen.io/ChiashengLin/pen/WNqvLvY)|
| 101 | Lobinda |[Codepen](https://codepen.io/Lobinda/pen/NWZqmgo)|
| 102 | 小翎 |[CodePen](https://codepen.io/debbielin/pen/ExBjqaj?editors=1000)|
| 103 | Yunya |[Codepen](https://codepen.io/cookie1515/pen/VwJvYyr)|
| 104 | 白夜 |[Codepen](https://codepen.io/Wei903/pen/poXjKdE)|
| 105 | yaoling.liang |[Codepen](https://codepen.io/Yao-Ling-L-/pen/KKjdbqE)|
| 106 | LKP |[Codepen](https://codepen.io/qtghjujs-the-sasster/pen/rNEeqyO?editors=1100)|
| 107 | atien0816 |[Codepen](https://codepen.io/Ben-Atien/pen/QWXNZow)|
| 108 | Chieh |[Codepen](https://codepen.io/Chieh_/pen/oNrzrEq?editors=1000)|
| 109 | eddiesun0526 |[Codepen](https://codepen.io/Eddie0526/pen/VwJmVGX)|
| 110 | Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/dyBNzYK)|
| 111 | 野鴿 |[Codepen](https://codepen.io/HoshinoSyouta/pen/BagWZKJ)|
| 112 | OZ |[Codepen](https://codepen.io/OZ_design/pen/WNqjoRG)|
| 113 | Toung |[Codepen](https://codepen.io/Toung/pen/KKjmqoG)|
| 114 | Emma |[Codepen](https://codepen.io/Emma0919/pen/abgwNWq)|
| 115 | lynee1211 |[Codepen](https://codepen.io/ntibaiss-the-solid/pen/MWMvZjZ?editors=1000)|
| 116 | Judy |[Codepen](https://codepen.io/yangchi/pen/mdZBvML)|
| 117 | Haru |[Codepen](https://codepen.io/pen/?editors=1100)|
| 118 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/QWXoQLv)|
| 119 | Lotte |[Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/zYVbmWb?editors=1100)|
<!-- 快速複製
| | |[Codepen]()|
-->