---
tags: 30 天軟體工程師體驗營｜2025
---

# 🏅 切版任務 Day3 - box-sizing
> 建議觀看的影音章節：
> - CSS - VS Code 網頁編輯器、HTML 基礎教學
> - CSS - CSS常用語法
> - CSS - 使用 CSS 變更 HTML 標籤特性

### 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 | 蛋殼 | [Codepen](https://codepen.io/weybrian/pen/KwwXxZV) |
| 2 | 蛋黃 | [Codepen](https://codepen.io/yiyun12o9/pen/wBBPrzM) |
| 3 | 里歐 | [Codepen](https://codepen.io/akihico/pen/KwwyXNW?editors=1100) |
| 4 | cks40660 | [Codepen](https://codepen.io/CKS40660/pen/zxxPEZj) |
| 5 | dean | [Codepen](https://codepen.io/ch933114/pen/MYYOEbv) |
| 6 | Toung | [Codepen](https://codepen.io/Toung/pen/azzVLdG) |
| 7 | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/pvvdWrr) |
| 8 | Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/OPPOxxM) |
| 9 | 7Lun | [Day3-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/JooOrGB) |
| 10 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/RNNjLQw) |
| 11 | tina01170 | [Codepen](https://codepen.io/tina-huang-the-bashful/pen/azzVLQX) |
| 12 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/ZYzqzvg?editors=1101) |
| 13 | Saika | [Codepen](https://codepen.io/saika4501/pen/QwwOOym?editors=1101) |
| 14 | B | [Codepen](https://codepen.io/Babel777/pen/raaYGvK) |
| 15 | HLC | [Codepen](https://codepen.io/pppbbb262626/pen/pvvddex) |
| 16 | 随縁 | [Codepen](https://codepen.io/zuien/pen/bNNYozW?editors=1100) |
| 17 | pastor | [Codepen](https://codepen.io/peter_hung/pen/dPPZZyP) |
| 18 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/zxxPPpO?editors=1100) |
| 19 | jingle0900 | [Codepen](https://codepen.io/EvaLi0472/pen/myyqqqm) |
| 20 | Atayallin | [Codepen](https://codepen.io/zin-seven/pen/Eaabojy) |
| 21 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/oNOOMWo) |
| 22 | 蛋白 | [蛋白的Codepen Day3](https://codepen.io/sjlu-0/pen/ZYYaRvv) |
| 23 | dd | [Codepen](https://codepen.io/dorihung/pen/MYYOrLb?editors=1100) |
| 24 | Stan | [Codepen](https://codepen.io/Stan-Huang/pen/yyyPpra) |
| 25 | Zing | [Codepen](https://codepen.io/TZU-YIN-WANG/pen/bNNYoJR?editors=1100) |
| 26 | 馬德 | [Codepen](https://codepen.io/maywang/pen/azzVEQL?editors=1102) |
| 27 | 柔術小子 | [Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/qEEVxZM) |
| 28 | WAWATA | [Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/OPPOvPp) |
| 29 | Kath | [Codepen](https://codepen.io/JLin-the-lessful/pen/OPPOvRg) |
| 30 | 謝天 | [Codepen](https://codepen.io/sfdplwjq-the-bold/pen/XJJzEWo) |
| 31 | Joseph_Kyuu | [Codepen](https://codepen.io/zrzfastd-the-reactor/pen/raaYJZr) |
| 32 | Archang | [Codepen](https://codepen.io/pxfnrvgk-the-styleful/pen/azzVYaO) |
| 33 | 消波塊 | [Codepen](https://codepen.io/PaulHsiao/pen/XJJzBeL) |
| 34 | mambo | [Codepen](https://codepen.io/chiang_mb/pen/xbbPyve) |
| 34 | Min | [Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/myyqzWN) |
| 35 | Ali | [Codepen](https://codepen.io/Alicia1117/pen/dPPZVab) |
| 36 | Jinie | [Codepen](https://codepen.io/jiniecheung/pen/bNNYzgE) |
| 37 | leo_tzou | [Codepen](https://codepen.io/JH_Portfolio/pen/emmexjM) |
| 38 | allen3290 | [Codepen](https://codepen.io/udadkudw-the-looper/pen/WbbXmJy) |
| 39 | Yan | [Codepen](https://codepen.io/Yan-L/pen/raaYXqW) |
| 40 | BaLaLaYOU | [Codepen](https://codepen.io/bashawxd-the-bashful/pen/pvvpezY) |
| 41 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/ZYYveNp?editors=1100) |
| 42 | Owen He | [Codepen](https://codepen.io/owen1120/pen/GggyOPE) |
| 43 | Katie | [Codepen](https://codepen.io/Katiekatiehsu/pen/RNNxMOV) |
| 44 | Cami | [Codepen](https://codepen.io/irisLife/pen/OPPzZZa) |
| 45 | ann#6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/ByyJVXz) |
| 46 | CBK | [Codepen](https://codepen.io/BK-C-the-styleful/pen/jEEYLxg) |
| 47 | yuna | [Codepen](https://codepen.io/Yuna1002/pen/KwwZBeB) |
| 48 | 牛奶 | [Codepen](https://codepen.io/0omilko0/pen/VYYyRLo?editors=1100) |
| 49 | haohaoliao | [Codepen](https://codepen.io/tqdtaouh-the-styleful/pen/YPPYbBb?editors=1100) |
| 50 | ArvinSu | [Codepen](https://codepen.io/Arvin-Su/pen/VYYyojp) |
| 51 | YuTing | [Codepan](https://codepen.io/venus50533/pen/OPPzKvo) |
| 52 | Hugh | [Codepan](https://codepen.io/Hugh-Chen/pen/Wbbdqzd) |
| 53 | holysi | [Codepan](https://codepen.io/holysi/pen/QwwQboG) |
| 54 | Klaus Chen | [Codepan](https://codepen.io/Klaus-Chen/pen/LEEQVwq?editors=1100) |
| 55 | Aidd. | [Codepan](https://codepen.io/aiddchen/pen/KwwQVMb) |
| 56 | 野鴿 | [Codepan](https://codepen.io/HoshinoSyouta/pen/gbbvjEg) |
| 57 | jane.yg | [Codepan](https://codepen.io/Jane-Yang-the-reactor/pen/RNNQBqa) |
| 58 | WEIWEI | [Codepan](https://codepen.io/weiwei93/pen/QwwOrMe) |
| 59 | sylvia | [Codepan](https://codepen.io/Sylvia93458/pen/WbbMPPr) |
| 60 | RUDY | [Codepan](https://codepen.io/Rudy-crw/pen/zxxRXaG?editors=1100) |
| 61 | _ching._ | [Codepen](https://codepen.io/himewbms-the-bold/pen/oggERYp) |
| 62 | Aoi | [Codepen](https://codepen.io/zching07/pen/VYYQozP) |
| 63 | gracechiang225 | [Codepen](https://codepen.io/gracechiang225/pen/wBBmwLa) |
| 64 | Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/WbbzbKY) |
| 65 | Nora | [Codepen](https://codepen.io/Yun-Jhen-Dai/pen/QwwmGzj?editors=1010) |
| 66 | An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/XJJZPdL) |
| 67 | yang | [Codepen](https://codepen.io/Yang-J/pen/zxxWwyd?editors=1100) |
| 68 | Clare | [Codepen](https://codepen.io/cwwc57/pen/emmMRNG) |
| 69 | anson.www | [切版任務 Day3｜Codepen](https://codepen.io/zzkvrkzi-the-sans/pen/azzYwZK) |
| 70 | Jane | [Codepen](https://codepen.io/jkmx/pen/gbbewLR) |
| 71 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/YPPaxgx) |
| 72 | Jessie | [Jessie 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/ZYYxgxP) |
| 73 | 周周 | [Codepen](https://codepen.io/jhoujhou-the-decoder/pen/zxxjGPK) |
| 74 | tiffany871205 | [Codepen](https://codepen.io/Tiffany-Tai/pen/MYYGajp) |
| 75 | 糰子 | [每日任務D3](https://codepen.io/hiyuki-dango/pen/vEEjNEv) |
| 76 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/gbbzPbM?editors=1100) |
| 77 | 孟 | [切版任務day3](https://codepen.io/Mengru0503/pen/dPPeWWz) |
| 78 | andy | [每日任務 Day03](https://codepen.io/ewnblckz-the-styleful/pen/emmrRvE) |
| 79 | connieK8888 | [codepen](https://codepen.io/plkang3617/pen/qEEYXLO) |
| 80 | Rogan | [codepen](https://codepen.io/RoganHsu/pen/EaaLwBX) |
| 81 | meowmi623 | [codepen](https://codepen.io/MeowMiii/pen/KwwRyNM) |
| 82 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/myyLXKK) |
| 83 | Chia__ | [Codepen](https://codepen.io/Chia-the-encoder/pen/RNNyJbg) |
| 84 | Peggy | [codepen](https://codepen.io/cpt23462599/pen/ByyxrWa) |
| 84 | 登登登 | [codepen](https://codepen.io/Duncanin/pen/JoovZmJ) |
| 85 | tung | [codepen](https://codepen.io/oltsegon-the-looper/pen/raavrJY) |
| 86 | zhe | [codepen](https://codepen.io/dotheright/pen/MYYGqGP) |
| 87 | 艾琳 | [codepen](https://codepen.io/Irene-Chuang/pen/YPPvKyZ?editors=1100) |
| 88 | yue | [codepen](https://codepen.io/Ling-the-scripter/pen/QwwxNQo) |
| 89 | cheryl | [codepen](https://codepen.io/katrina-the-decoder/pen/GggGqbR) |
| 90 | 木乃伊 Kimi | [codepen](https://codepen.io/veqjtzdb-the-lessful/pen/NPPzvVy) |
| 91 | JHT | [CodePen](https://codepen.io/juanht/pen/raaKYBL) |
| 92 | oyll | [CodePen](https://codepen.io/dizzydog-rgb/pen/OPPEdLj) |
| 93 | Atrid | [2025/05/07 DAY3-3](https://codepen.io/astrid321654/pen/YPPjXvQ) |
| 94 | 姜承 | [CodePen](https://codepen.io/Troy0718/pen/abRLjor) |
| 95 | kelsonhouse | [CodePen](https://codepen.io/Kelson-House/pen/KwwxeKX) |
| 96 | Apple Pie | [CodePen](https://codepen.io/ymevqzjf-the-builder/pen/oggPQow?editors=1100) |
| 97 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/oggPVNz?editors=1100) |
| 98 | Tou | [CodePen](https://codepen.io/Datou-Huang/pen/KwwxJOr) |
| 99 | Debby | [CodePen](https://codepen.io/Debby-Yang/pen/azzaxBV) |
| 100 | vima | [CodePen](https://codepen.io/chin7004/pen/azzaxYG) |
| 101 | Acadia | [CodePen](https://codepen.io/Acadia/pen/RNNePXp) |
| 102 | fishcold9714 | [CodePen](https://codepen.io/yu-han-feng/pen/OPPBXKd) |
| 103 | dawnwang87 | [CodePen](https://codepen.io/yrpnrtsy-the-typescripter/pen/yyyQJoZ) |
| 104 | Atian | [CodePen](https://codepen.io/A-Tian-Chen/pen/QwwJKjX) |
| 105 | emma8470 | [2025/05/11](https://codepen.io/emachen/pen/MYYzegq) |
| 106 | HedyChen | [CodePen](https://codepen.io/hedychen/pen/RNNqLPm) |
| 107 | Maggie C. | [day3](https://codepen.io/Maggie-dev_xo/pen/NPPEydr) |
| 108 | 小豬佩奇 | [CodePen](https://codepen.io/HoPeiZhen/pen/pvvqyYd) |
| 109 | duchi | [CodePen](https://codepen.io/sqaz0502/pen/gbbZdPv) |
| 110 | MooseHD#7 | [CodePen](https://codepen.io/MooseHD/pen/myyajYw) |
| 111 | NAOJUN | [CodePen](https://codepen.io/pzzpvwwp-the-styleful/pen/LEEXXLp) |
| 112 | ja4071 | [CodePen](https://codepen.io/SHAO-L/pen/yyyGjpL) |
| 113 | 悠悠 | [CodePen](https://codepen.io/kofujztm-the-decoder/pen/LEEqNvM?editors=1100) |
| 114 | Mic | [CodePen](https://codepen.io/Mic-Pan/pen/Gggzjxx) |
| 115 | joker | [CodePen](https://codepen.io/jokersosmart/pen/pvvYwbP) |
| 116 | Mirage | [CodePen](https://codepen.io/sxxxswyt-the-flexboxer/pen/PwwLyyg) |
| 117 | Lynn | [CodePen](https://codepen.io/Yen-Ling-Peng/pen/qEEwaEz) |
| 118 |.Nonko | [CodePen](https://codepen.io/zqzvgjkd-the-builder/pen/yyyrggM) |
| 119 |禹成林 | [CodePen](https://codepen.io/useirin/pen/azzxVRa) |
| 120 |Winter | [CodePen](https://codepen.io/winternightsix/pen/azzxYNE)
| 121 |Michelle | [CodePen](https://codepen.io/bastar_dize/pen/jEEovox)
| 122 |加菲 | [CodePen](https://codepen.io/DOU-CF/pen/VYYOqQw)
| 123 |Eva | [CodePen](https://codepen.io/cnbhiapb-the-scripter/pen/LEEKLgm)
| 124 |taishan_90178 | [CodePen](https://codepen.io/candy99/pen/azzebyp)
| 125 |susu | [CodePen](https://codepen.io/rewrwscm-the-reactor/pen/KwwONNR)
| 126 |Nea | [CodePen](https://codepen.io/neacode/pen/oggKwwe)
| 127 | jean_ke| [CodePen](https://codepen.io/Jean-Ke/pen/MYYMpqG)
| 128 | 富| [CodePen](https://codepen.io/spring40747/pen/PwqYBKQ)
| 129 | melody08| [CodePen](https://codepen.io/hexschool/pen/yLvWLZY)
| 130 | 610 | [CodePen](https://codepen.io/YI-LING-LIU/pen/RNPWXoG)
| 131 | waynetrece| [CodePen](https://codepen.io/waynetrece/pen/NPqbJyO)
| 132 | nonolog| [CodePen](https://codepen.io/game01-cjcu/pen/YPXQEjz)
| 133 | AntarcticaBear| box1 width:338px; box2 width:300px
| 134 | yanchen16 | [CodePen](https://codepen.io/keyrtlij-the-reactor/pen/XJbeEWN)
| 135 | World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/RNPyzxG)
| 136 | Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/bNdOVMP?editors=1100)
| 137 | Ryckie | [CodePen](https://codepen.io/14172/pen/EaVKQBp)