---
tags: 軟體工程師體驗營 - 2024
---

# 🏅 切版任務 Day3 - 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 的寬高（請不要用開發人員工具觀看）

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

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

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------:|:---------------------------------------------------------------:|
| 1 | kate_bearchou | [Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/dyLLRrq) |
| 2 | Meng | [Codepen](https://codepen.io/menglin1203/pen/QWPPgVb) |
| 3 | Toung | [Codepen](https://codepen.io/Toung/pen/abxxwQV) |
| 4 | Larry | [Codepen](https://codepen.io/larrylinr5/pen/poBBwBE) |
| 5 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/MWRRoRp) |
| 6 | jerry | [Codepen](https://codepen.io/sony791210/pen/abxxwrq) |
| 7 | LGJason | [Codepen](https://codepen.io/j811108/pen/jORRwor) |
| 8 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/LYvvjYJ) |
| 9 | Dobe | [Codepen](https://codepen.io/lisebee/live/PogLQXd) |
| 10 | hongru-LyNn | [Codepen](https://codepen.io/LyNnYWu/pen/JjVVydB) |
| 11 | Elva Su | [Codepen](https://codepen.io/evensu_/pen/gOyyxPY?editors=1100) |
| 12 | khoo | [Codepen](https://codepen.io/yi8/pen/vYMMJEM) |
| 13 | yuling | [Codepen](https://codepen.io/igzdflpu/pen/QWPPMyK) |
| 14 | Daisy Li | [Codepen](https://codepen.io/lidairong-gmail-com/pen/WNWWOVr) |
| 15 | 真真瑋瑋 | [Codepen](https://codepen.io/Yujhen-Li/pen/wvZZqqW) |
| 16 | HsienLu | [CodePen](https://codepen.io/Hsienlu/pen/BaEEdwz) |
| 17 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/abxxyoY) |
| 18 | macihuang | [Codepen](https://codepen.io/macy1215/pen/mdggMqy) |
| 19 | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/mdggMXJ?editors=1100) |
| 20 | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/mdggMMd) |
| 21 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/ZEZZJVj) |
| 22 | Lauren | [Codepen](https://codepen.io/Lauren8/pen/zYXXdyy) |
| 23 | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/MWRRvNq) |
| 24 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/XWQQawo) |
| 25 | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/abxxLde) |
| 26 | zobody | [Codepen](https://codepen.io/Zoe-Shih/pen/JjVVrKj) |
| 27 | 阿宸 | [Codepen](https://codepen.io/xnocndjt-the-sans/pen/zYXXEKV?editors=1100) |
| 28 | JIAWUN |[Codepen](https://codepen.io/wkasixgv-the-sasster/pen/yLrrzVQ)|
| 29 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/oNOOGWx) |
|30|邵| [Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/eYooEoP) |
| 31 | han | [Codepen](https://codepen.io/iamHanCheng/pen/ZEZZJvx)
| 32 | Aust1n | [Codepen](https://codepen.io/AustinYEH/pen/ExJJwEa?editors=1100) |
| 33 | zuien1120 | [Codepen](https://codepen.io/anki0072011/pen/JjVVrEo) |
| 34 | 嵬 | [Codepen](https://codepen.io/Obivld/pen/zYXXPEZ) |
| 35 | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/KKYYyMP) |
| 36 | Emma | [Codepen](https://codepen.io/huang_L/pen/ExJJbEX) |
| 37 | LYC | [Codepen](https://codepen.io/LY-C/pen/YzMMENa) |
| 38 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/LYvvjZX) |
| 39 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/WNWWXab)|
|40|Michelle0417|[CodePen](https://codepen.io/michelle0417/pen/zYXXpOp)
|4１|sylviabuy|[CodePen](https://codepen.io/sylviabela/pen/PoggEZo)
| 42 | peggy | [Codepen](https://codepen.io/peggy0419/pen/LYvvOze)|
| 43 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/OJGGxMg)|
| 44 | damon0323 | [Codepen](https://codepen.io/swk9eny2/pen/gOyyXjE?editors=1100)|
| 45 | 紫珩 | [Codepen](https://codepen.io/tzhengliin/pen/ZEZZvJv)|
| 46 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/MWRRrZG)|
| 47 | Shawn | [Codepen](https://codepen.io/Zhang-shawn-the-typescripter/pen/ZEZZaEY)
| 48 | Shiny | [Codepen](https://codepen.io/Shih-Shiny/pen/oNOOExX)
| 49 | JESS | [Codepen](https://codepen.io/-8412/pen/ExJGJNz)
| 50 | Eden | [Codepen](https://codepen.io/iseden/pen/NWmmyMB)|
| 51 | 阿若 | [Codepen](https://codepen.io/skar5268/pen/oNOOEVZ)|
| 52 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/jORRZeX?editors=1100)
| 53 | Tanyaaaa | [Codepen](https://codepen.io/tanya77777/details/RwOOQoo) |
| 54 | Mika | [Codepen](https://codepen.io/shumtzhz-the-encoder/pen/abxxYwW) |
| 55 | willypower4315 | [Codepen](https://codepen.io/DragonWillys/pen/ExJpWdE) |
| 56 | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/VwNNXgG?editors=1100) |
| 57 | Ted | [Codepen](https://codepen.io/bomtovou-the-animator/pen/PoggeGw) |
| 58 | Mionne | [Codepen](https://codepen.io/neohyntw/pen/poBBdyz) |
| 59 | MANGO | [Codepen](https://codepen.io/Mangotsai/pen/WNWWJOo) |
| 60 | MY | [Codepen](https://codepen.io/ahmomoz/pen/RwOOMqE) |
| 61 | qet1717 | [Codepen](https://codepen.io/yizukwgs-the-flexboxer/pen/jORRxYw) |
| 62 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/RwOOyMw) |
| 63 | 宇 | [Codepen](https://codepen.io/jian-yu-chen/pen/PoggeZo) |
| 64 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/wvZZXaq) |
| 65 | KUN. | [Codepen](https://codepen.io/barry91205/pen/KKYYeaB) |
| 66 | una | [Codepen](https://codepen.io/gnamfxwh-the-builder/pen/XWQQqQy) |
| 67 | 快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/mdggKRR) |
| 68 | Stone | [Codepen](https://codepen.io/hexschool/pen/yLvWLZY) |
| 69 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/YzMMvYN) |
| 70 | boin | [Codepen](https://codepen.io/boinji/pen/LYvvrMb) |
| 71 | MDFK | [Codepen](https://codepen.io/aqcrrhwb/pen/XWQQZwb?editors=1100) |
| 72 | Maca | [CodePen](https://codepen.io/wcfngvyx-the-encoder/pen/MWRRBgg) |
| 73 | Camila | [Codepen](https://codepen.io/camilalo/pen/eYooVVw) |
| 74 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/ExJJpNN) |
| 75 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/bGJJjez?editors=1100) |
| 76 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/oNOOMWo)|
| 77 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/yLrrqXN) |
| 78 | Floy | [Codepen](https://codepen.io/F0108/pen/ZEZZjyQ) |
| 79 | spadegun | [Codepen](https://codepen.io/spadegun/pen/VwNNBBd) |
| 79 | 秀| [Codepen](https://codepen.io/Alyssa-CHEN-the-bashful/pen/KKYYBxd)|
| 81 | yicheng | [Codepen](https://codepen.io/YiChengCHANG/pen/gOyyjQE) |
| 82 | JY | [Codepen](https://codepen.io/jylee0805/pen/XWQQByR?editors=1100) |
| 82 | Kasie | [Codepen](https://codepen.io/KasieL/pen/dyLLjpZ) |
| 83 | Mars | [Codepen](https://codepen.io/Mars-the-flexboxer/pen/xxeeJMp) |
| 84 | Chewsday | [Codepen](https://codepen.io/Chewsday/pen/ZEZZjZe) |
| 85 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/QWPPBXy)|
| 86 | 小米 | [Codepen](https://codepen.io/hlgudwue-the-typescripter/pen/eYoojqR)|
| 87 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/oNOOdqR)|
| 88 | Andy_12 | [Codepen](https://codepen.io/lifann/pen/poBBOeP?editors=1100) |
| 89 | Linfe | [Codepen](https://codepen.io/Linfe/pen/rNbbZzd) |
| 90 | RJIA | [Codepen](https://codepen.io/RJIAr/pen/VwNNGBo) |
| 91 | hazelhsieh | [CodePen](https://codepen.io/Hazelhsieh/pen/VwNgEmW) |
| 92 | leo.chang | [Codepen](https://codepen.io/s16777216/pen/XWQQPVY) |
| 93 | 樂樂 | [Codepen](https://codepen.io/Wpypy/pen/GRLLXOg) |
| 94 | 閆安 | [Codepen](https://codepen.io/yanann7777/pen/KKYYeor) |
| 95 | sweewei | [Codepen](https://codepen.io/sweewei-Law/pen/OJGGBJp) |
|96 | 黛Dye | [Codepen](https://codepen.io/Dye_Note/pen/gOyyjeZ) |
| 97 | hsiehmo16 | [Codepen](https://codepen.io/mohsieh/pen/dyLLqQx) |
| 98 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/LYvvJNg) |
| 99 | 禮央 (れお) | [CodePen](https://codepen.io/J-Y-P/pen/dyLLjRJ) |
| 100 | Guan(yangguan.) | [CodePen](https://codepen.io/Yang-guan/pen/OJGGBmx) |
| 101 | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/PoggywW) |
| 102 | emmazhang. | [Codepen](https://codepen.io/zhangemma/pen/ZEZZqQm) |
| 103 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/mdggzJr?editors=1111) |
| 104 | 白白 | [Codepen](https://codepen.io/YuBai/pen/JjVVmbj?editors=1100) |
| 105 | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/eYooPrw) |
| 106 | Marklan | [Codepen](https://codepen.io/fantasybluz/pen/jORRQPo?editors=1111) |
|107|Ching|[CodePen](https://codepen.io/huangching/pen/KKYYraP)|
|108|Haley|[CodePen](https://codepen.io/wsx3690/pen/KKYYrVj)|
|109|kebukeyi|[Codepen](https://codepen.io/kebukeyi/pen/poBBQjM)|
| 110 | Ed Huang | [Codepen](https://codepen.io/yide1986/pen/OJGGaEG) |
| 111 | 納豆 | [Codepen](https://codepen.io/TESR/pen/RwOOqEq) |
| 112 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/rNbbojp?editors=1100) |
| 113 | Si | [Codepen](https://codepen.io/Si-/pen/YzMaQPL) |
| 114 | Frank Chiang | [Codepen](https://codepen.io/frankchiang/pen/RwOOmZK) |
| 115 | Chen | [Codepen](https://codepen.io/yingchangchen/pen/poBBmaQ) |
| 116 | 灣灣 | [Codepen](https://codepen.io/fygdvrkl-the-sasster/pen/XWQQxzL) |
| 117 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/eYoowvJ) |
| 118| CrystalLala | [Codepen](https://codepen.io/crystallala/pen/yLrrKeL) |
| 119| Kai | [Codepen](https://codepen.io/imkaikai9997874/pen/KKYYjxp?editors=1100) |
| 120 | Chingya | [Codepen](https://codepen.io/chingya1214/pen/wvZZLXb) |
| 121 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/XWQQLwg?editors=1100) |
| 121 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/jORRgKw) |
| 122 | Sana | [Codepen](https://codepen.io/-Chouno/pen/WNWBevX) |
| 123 | liugod3824🔥 | [Codepen](https://codepen.io/kjssvtkr-the-animator/pen/BaEeaKq)✔ |
| 124 | oldan | [Codepen](https://codepen.io/Enix-Chien-/pen/qBwGBLp) |
| 125 | jami_37521 | [Codepen](https://codepen.io/jamiHexo/pen/NWmVWQP) |
| 126 | Six | [Codepen](https://codepen.io/Max-kuo/pen/oNORgYQ?editors=1100) |
| 127 | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/jORRwXW) |
| 128 | Ellie | [Codepen](https://codepen.io/Ellie-Chiang/pen/JjVqGZe?editors=1100) |
| 129 | ㄚ華 | [Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/gOyJPyr) |
| 130 | cindyLo | [Codepen](https://codepen.io/cindy820218/pen/zYXQqjg) |
| 131 | willypower4315 | [Codepen](https://codepen.io/DragonWillys/pen/ExJpWdE) |
| 132 | mike00712 | [Codepen](https://codepen.io/yi8/pen/vYMMJEM)|
| 133 | 勾小勻 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/wvZbWPN)|
| 134 | FURUTO | [Codepen](https://codepen.io/oditudnw-the-flexboxer/pen/dyLEpJr)|
| 135 | 希希 | [Codepen](https://codepen.io/oditudnw-the-flexboxer/pen/MWRdjVE)|
| 136 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/mdgYrgJ)|
| 137 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/JjVqbdq) |
| 138 | weeixunzht | [Codepen](https://codepen.io/CalebZhang/pen/gOyJgLK) |
| 139 | 小翎 | [Codepen](https://codepen.io/debbielin/pen/vYMwmNN) |
| 140 | 婉玲Dacy | [Codepen](https://codepen.io/xxaynqoq-the-animator/pen/GRLaJZj) |
| 141 | Rayne | [Codepen](https://codepen.io/Kelsier/pen/PogvOmB) |
| 142 | erichsu0406 | [Codepen](https://codepen.io/esxwvufg-the-flexboxer/pen/RwOmjqB) |
| 143 | Schnauzer | [Codepen](https://codepen.io/Cocker-Spaniel/pen/JjVqpvj) |
| 144 | Jenny L | [Codepen](https://codepen.io/lesley0029/pen/bGJyvYz?editors=1100) |
| 145 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/QWPRrxG) |
| 146 | Penny.H | [CodePen](https://codepen.io/Penny-Ho/pen/MWRdXEP) |
| 147 | alastor7069 | [Codepen](https://codepen.io/euibzoez-the-decoder/pen/LYvorQE) |
| 148 | Jennifer | [Codepen](https://codepen.io/yujhen/pen/NWmVBbE) |
|149|aoya9155|[Codepen](https://codepen.io/aoya2139/pen/wvZbEgv)|
| 150 | Langyc | [Codepen](https://codepen.io/Hsiflow-Lang/pen/eYoaoeE) |
| 151 | emmayo | [Codepen](https://codepen.io/emmayo/pen/zYXQQoy) |
| 152 | kevinwen2014 |[Codepen](https://codepen.io/wenwoo/pen/VwNOJZm) |
| 153 | limdos14 |[Codepen](https://codepen.io/limdos14/pen/mdgYZwX) |
| 154 | asabulu_von_f |[Codepen](https://codepen.io/asabulu/pen/ZEwwepg) |
| 155 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/LYvoQgG) |
| 156 | kawa | [Codepen](https://codepen.io/z83xji6/pen/jORjOmJ) |
|157|erwinchiang| [Codepen](https://codepen.io/vsujlkjy-the-scripter/pen/qBwzZNw)|
|158|Yini Chen| [Codepen](https://codepen.io/CYini/pen/BaEgZNY)|
|159|Ran|[Codepen](https://codepen.io/Ran-Ran-the-typescripter/pen/vYMqZLx)|
|160|Mandy Li|[Codepen](https://codepen.io/krwmykmt-the-typescripter/pen/gOyNXRv)
| 161 | discat3119 | [Codepen](https://codepen.io/dizzysoup/pen/WNWqdPx) |
| 162 | LING | [Codepen](https://codepen.io/uycrjkhb-the-animator/pen/vYMqRMR) |
| 163 | jimmy.0706 | [Codepen](https://codepen.io/WeiJun-Mao/pen/bGJPZXZ) |
| 164 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/jORjRKq) |
| 165 | yo0x0oy |[Codepen](https://codepen.io/Dayton-Hsieh/pen/qBweBjZ)
| 166 | ich_bin_akkkira | [Codepen](https://codepen.io/Pei-Jou-You/pen/MWRNKZp) |
|167|maru3096|[Codepen](https://codepen.io/deamru/pen/wvZVGvK)
|168|咖|[Codepen](https://codepen.io/daru-Ga/pen/XWQvdbZ)
|169|PoWei#8484|[Codepen](https://codepen.io/Po-Wei-Lai/pen/WNWVGxq)
|170|james867.|[Codepen](https://codepen.io/JCT34/pen/KKYjqNJ)
|171|Aasta|[Codepen](https://codepen.io/Aasta-the-typescripter/pen/vYMoxQv)
|172|Mandy|[Codepen](https://codepen.io/Mandy-LI/pen/dyLxZeO?editors=1100)
|173|arielyao|[Codepen](https://codepen.io/ArielYao822/pen/RwOXjJZ)
|174|靜靜|[Codepen](https://codepen.io/iclai/pen/abxeEQV)
|175|Eileen|[Codepen](https://codepen.io/Eileen-io/pen/eYowOqa)
|176|Sonia|[Codepen](https://codepen.io/YUJOU/pen/dyLxqLq)
|177|hao jing|[Codepen](https://codepen.io/hjxu/pen/xxevmmP)
|178|艾洛|[Codepen](https://codepen.io/Ironance/pen/mdgNxKM)
|17９| martin | [Codepen](https://codepen.io/wyipzpnh-the-decoder/pen/eYaOvQd) |
|180| 欣霓 | [Codepen](https://codepen.io/tvxq5206/pen/jOoNGXw) |
| 181 | Areta | [Codepen](https://codepen.io/Areta-Gu/pen/OJYLzQa) |
| 182 | 知夜 | [Codepen](https://codepen.io/XiaoXiaTian2/pen/pomzayE) |
| 183 | l.shua_228 | [Codepen](https://codepen.io/Shan-Hua-Lin-LIN-HUA/pen/oNRvPZW) |
| 184 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/oNRvyQV) |
| 185 | 雪維 | [Codepen](https://codepen.io/Shawey/pen/qBGWQre) |
| 186 | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/pomoyGP) |
| 187 | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/abrbaWv) |
| 188| Eudora | [Codepen](https://codepen.io/Eudoralin/pen/XWwWLpY?editors=1100) |
| 189 | ZZ | [Codepen](https://codepen.io/Yong-Shao/pen/GRagqvJ) |
| 190| Hazel | [Codepen](https://codepen.io/gvqlvstt-the-looper/pen/zYQxEbE) |
| 191| 搗蛋鬼別搗蛋 | [Codepen](https://codepen.io/yaling0616/pen/PovqVxx) |
| 192| leor_yu | [Codepen](https://codepen.io/Leor-the-builder/pen/xxNwRZw) |
| 193| Hannahou | [Codepen](https://codepen.io/Hannah-Hou/pen/GRaoNGy) |
| 194| xiang | [Codepen](https://codepen.io/Huchi-the-encoder/pen/pomgRmN) |
| 195| sunknight_002 | [Codepen](https://codepen.io/aqortatm-the-solid/pen/ExzPJyE) |
| 196| JIN |[Codepen](https://codepen.io/JING-0418/pen/QWRNNja?editors=1000)