# 🏅 Day 7 - box-sizing

box-sizing 是 CSS 中，用來設定如何計算元素總寬度與高度的屬性。

### content-box

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

### 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 | Jenna | [Codepen](https://codepen.io/abiscc14/pen/ByNvyYK)|
|2|Saika|[Codepen](https://codepen.io/saika4501/pen/XJboJzq)|
| 3 | nora_zizi |[Codepen](https://codepen.io/Nora-Ch/pen/QwbzwZg) |
| 4 | pastor |[Codepen](https://codepen.io/peter_hung/pen/zxGyxMm) |
| 5 | Jerome |[Codepen](https://codepen.io/qsc002163/pen/vEOvEoN) |
| 6 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/pvJqvGp)|
| 7 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/OPVrVJp)|
| 8 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/WbvLbqZ?editors=1100)|
| 9 | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/dPowoWG)|
| 10 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/raVoVGg) |
| 11 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/myJaJXm) |
| 12 | 冠翔 |[Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/gbpZpKG)
| 13 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/ZYGVGdz) |
| 14 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/WbvLQvP) |
| 15 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/JodwYVp?editors=1100) |
| 16 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/Kwpbdrd) |
| 17 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/VYLqeYV) |
| 18 | satar |[Codepen](https://codepen.io/SatarKuo/pen/QwbzyEE?editors=1100) |
| 19 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/XJboXNV) |
| 20 | Yanchen16 |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/YPXdwpg) |
| 21 | Sid |[Codepen](https://codepen.io/monkeybear721/pen/NPqexwR) |
| 22 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/xbGmVZo?editors=1100) |
| 23 | zhe |[Codepen](https://codepen.io/dotheright/pen/JodwKXE) |
| 24 | Huang Eagle |[Codepen](https://codepen.io/YuCi/pen/xbGmOWr) |
| 25 | Katie |[Codepen](https://codepen.io/Katiekatiehsu/pen/azOPZWp) |
| 26 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/GgJPNmW?editors=1100) |
| 27 | suemma |[Codepen]([連結](https://codepen.io/suemma/pen/GgJPrbe)) |
| 28 | Fan |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/raVoyWY) |
| 29 | Kiku |[Codepen](https://codepen.io/Li-Kusa/pen/zxGyqdV?editors=1100) |
| 30 | Mumu |[Codepen](https://codepen.io/ztz_mu/pen/raVowjx) |
| 31 | 7Lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/EajGXem) |
| 32 | CBK |[Codepen](https://codepen.io/BK-C-the-styleful/pen/gbpZxRY) |
| 33 | Peggy |[Codepen](https://codepen.io/Peggy_C/pen/KwpbWaa) |
| 34 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/raVoGzR) |
| 35 | ahga |[Codepen](https://codepen.io/zmapzfdv-the-vuer/pen/myJaqMK) |
| 36 | kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/dPowZGR) |
| 37 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/ZYGVarQ) |
| 38 | TY |[Codepen](https://codepen.io/Ted-Y/pen/azOPEJG) |
| 39 | Yan* |[Codepen](https://codepen.io/Yan-L/pen/dPowdpP) |
| 40 | Elvina |[Codepen](https://codepen.io/Elvina-the-selector/pen/RNPEMwL?editors=1100) |
| 41 | 立花 |[Codepen](https://codepen.io/kj25940858/pen/azOPKpr)
| 42 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/OPVrjgP) |
| 43 | Hao |[Codepen](https://codepen.io/Howell/pen/azOPjJm) |
| 44 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/emNbjKZ) |
| 45 | jinliu214 |[Codepen](https://codepen.io/jinliu214/pen/dPowjjd) |
| 46 | Gloria |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/dPowgbx) |
| 47 | kate_bearchou |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/yyNGGgg?editors=1100) |
| 48 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/azOPgBN) |
| 49 | YUCCC |[Codepen](https://codepen.io/taroooo/pen/ogXJrao) |
| 50 | Geno Chen |[Codepen](https://codepen.io/kai-chen-the-sans/pen/RNPEXMz) |
| 51 | Evelyn |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/myJvdPq?editors=1100) |
| 52 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/bNdzgZJ) |
| 53 | 孟 |[Codepen](https://codepen.io/Mengru0503/pen/dPPeWWz) |
| 54 | Doreen翠翠翠 |[Codepen](https://codepen.io/cuei-sian-Wang/pen/dPoavga) |
| 55 | 社子畢卡索 |[Codepen](https://codepen.io/pen?template=MYwLoXY) |
| 56 | 西娜 |[Codepen](https://codepen.io/Sheena-the-encoder/pen/azOXyow) |
| 57 | NellyGuo |[Codepen](https://codepen.io/NNN-the-selector/pen/qEdgPoW) |
| 58 | Hugh |[Codepen](https://codepen.io/Hugh-Chen/pen/QwbYQWp) |
| 59 | Michelle |[Codepen](https://codepen.io/bastar_dize/pen/ByNMPjY?editors=1100) |
| 60 | Sylvie |[Codepen](https://codepen.io/shuping-xiao/pen/qEdgJRw) |
| 61 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/YPXgVJX) |
| 62 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/XJbGaKj) |
| 63 | 牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/KwpEvvp) |
| 64 | 随縁 |[Codepen](https://codepen.io/anki0072011/pen/VYLREoL) |
| 65 | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/azOMXER) |
| 66 | Space key |[Codepen](https://codepen.io/uuajlwse-the-selector/pen/JodzVjE) |
| 67 | teresa |[Codepen](https://codepen.io/teresa150029/pen/WbvmVXV) |
| 68 | Scrooge |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/azOxwye) |
| 69 | Alyssa |[Codepen](https://codepen.io/AlyssaYen/pen/EajJXRY) |
| 70 | ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/emNoQXw) |
| 71 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/ogXRzeW) |
| 72 | Zong |[Codepen](https://codepen.io/BAY71/pen/raVgdKo) |
| 73 | tanuki_狸貓 |[Codepen](https://codepen.io/tanuki320/pen/pvJmmPy) |
| 74 | NGNLzenos |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/jEPjXwv) |
| 75 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/WbvVQeQ) |
| 76 | Atian |[Codepen](https://codepen.io/A-Tian-Chen/pen/WbvVRyp) |
| 77 | Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/vENBYLQ) |
| 78 | Ching | [Codepen](https://codepen.io/huangching/pen/gbaYVOb) |
| 79 | B | [Codepen](https://codepen.io/Babel777/pen/wBKvbdp?editors=1100) |
| 80 | 李大維 |[Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/RNWPPLR) |
| 81 | 雅潔 |[Codepen](https://codepen.io/MOMOYA/pen/ByoNoxv) |
| 82 | 加菲 |[Codepen](https://codepen.io/DOU-CF/pen/KwdpzgZ) |
| 83 | World |[Codepen](https://codepen.io/HexschoolVuePujols/pen/RNWPaJo) |
| 84 | Bee |[Codepen](https://codepen.io/Bee-Lu/pen/raOVdqx) |
| 85 | Lika |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/pvjJmwp) |
| 86 | Fancy |[Codepen](https://codepen.io/Fancy-the-lessful/pen/dPYoMwM) |
| 87 | 伊迪 |[Codepen](https://codepen.io/eku10rei/pen/bNVdXJE?editors=1100) |
| 88 | water | [Codepen](https://codepen.io/wateruby/pen/WbQQRGy)|
| 89 | Lucy | [Codepen](https://codepen.io/Lucytrycode/pen/zxvroqp)|
| 90 | 主委加碼啦幹 |[Codepen](https://codepen.io/popbob-the-bashful/pen/wBKMJrO) |
|91|小趴|[Codepen](https://codepen.io/papa2415/pen/vENGmKQ)|
| 92 | 阿鍋 |[Codepen](https://codepen.io/YING-TING-KUO/pen/raOLOyK) |
| 93 | cindy |[Codepen](https://codepen.io/a50134/pen/pvjEVdO?editors=1100)|
| 94 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/wBKzZge?editors=1100)|
| 95 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/xbwRVzq)|
| 96 | mini | [Codepen](https://codepen.io/miiinii32-Cheng/pen/wBKgMjd?editors=1100)|
| 97 | maerc |[Codepen](https://codepen.io/Lu-Liangyu/pen/PwPWdwo)|
| 98 | Tou | [Codepen](https://codepen.io/Datou-Huang/pen/xbwgNOK?editors=1100)|
| 99 | Va |[Codepen](https://codepen.io/lichenValin/pen/qEOrRxP) |
| 100 | Midy Wu |[Codepen](https://codepen.io/work-wu/pen/myeBPmg) |
| 101 | 4ping | [Codepen](https://codepen.io/928Libra/pen/emprVaO)|
| 102 | PAgaNiNi | [Codepen](https://codepen.io/PA-OTTER/pen/PwPgLWB?editors=1100)|
| 103 | 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/MYKgKNe)|
<!-- | 排序 | 姓名 |[Codepen](連結) | -->