---
# System prepended metadata

title: "\U0001F3C5 Day 7"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 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 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）
（也可以將答案直接貼至「回報區」）

![](https://i.imgur.com/vftL5i0.png)

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

回報區
---


|      Discord      |                                          CodePen / 答案                                          | 
|:-----------------:|:------------------------------------------------------------------------------------------------:| 
|     薏慈#3795     |                        [Codepen](https://codepen.io/its_wang/pen/Barxjpm)                        |
|     Anna Liu#3794     |                        [Codepen](https://codepen.io/anna618/pen/WNzoWRa)                        |
|     小鐵#2814     |                        [Codepen](https://codepen.io/xiron/pen/NWYrMZx)                        | 
|     𝓛𝓊𝒸𝓎#8635     |                        [Codepen](https://codepen.io/lucygirl/pen/ZExYwoQ)                        | 
|    Benson#6763    |                        [Codepen](https://codepen.io/kumashow/pen/RwMNqRd)                        |
|    SASIMI#5099    |                      [Codepen](https://codepen.io/sashimi1327/pen/ExEjPaO)                       |
|     Vera#5592     |                         [Codepen](https://codepen.io/skvera/pen/OJvypjX)                         |
|    黃士桓#7654    |                     [codePen](https://codepen.io/shr-huan-huang/pen/PoRPOWV)                     | 
|  Iris Huang#6727  |                        [CodePen](https://codepen.io/ythuang/pen/rNdOYjW)                         |
|    布魯諾#7239    |                        [CodePen](https://codepen.io/bruno-yu/pen/VwXvrKX)                        |
|     群嘉#3943     |           [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/oNqjoWE?editors=1100)            | 
|    Clara#1275     |                        [CodePen](https://codepen.io/bsupixqu/pen/JjLYOyO)                        |
| bonnieli1414#4906 |               [CodePen](https://codepen.io/bonnieli1414/pen/QWmjOqw?editors=1100)                |
|    JackC#0411     |                        [CodePen](https://codepen.io/key0329/pen/WNzQXZN)                         | 
|    連小艾#0791    |                       [CodePen](https://codepen.io/bolaslien/pen/wvmKPyV)                        | 
|     洋蔥#5295     |                         [CodePen](https://codepen.io/HSUNA/pen/yLKYPPO)                          |
|  Karol-Kuo#5287   |                      [CodePen](https://codepen.io/ting-yu-kuo/pen/LYdpOrm)                       | 
|      YI#0863      |                  [CodePen](https://codepen.io/YI0305/pen/abYvVVL?editors=1100)                   |
|     yuyu#6310     |                        [CodePen](https://codepen.io/yuyu0905/pen/gOeaXjJ)                        |
|     Sin#0040      |                  [CodePen](https://codepen.io/sophmfyt-the-sasster/pen/VwXvrNq)                  | 
|     pete36060     |                       [CodePen](https://codepen.io/JIAN-RONG/pen/RwMWjXm)                        | 
|       zera        |                       [CodePen](https://codepen.io/zera-tseng/pen/eYMpyNe)                       |
|     威爾#1694     |                        [CodePen](https://codepen.io/WILL_Wu/pen/KKodyOa)                         |
|  Leo Song #8278   |                 [Codepen](https://codepen.io/sunnylaba/pen/mdxepPb?editors=1100)                 | 
|     小諾#1866     |                        [Codepen](https://codepen.io/noichan/pen/WNzQdGR)                         |
|    楓之聲#6945    |                       [CodePen](https://codepen.io/sshane258/pen/yLKYpMP)                        |
|     int#7518      |                 [Codepen](https://codepen.io/intHuang/pen/abYvEwQ?editors=1010)                  | 
|  PeggyLiao#1552   |                [CodePen](https://codepen.io/PeiJu-Liao/pen/rNdOpwK?editors=0100)                 | 
|  Emily Hsi #9066  |                        [CodePen](https://codepen.io/EmilyHsi/pen/KKodZXX)                        | 
|    Chaoci#2460    |                       [Codepen](https://codepen.io/gmailchao/pen/zYWvpXb)                        | 
|    Fang #4680     |                        [Codepen](https://codepen.io/std95174/pen/ZExbvZq)                        | 
|    Henry#7386     |                         [Codepen](https://codepen.io/h1nr9/pen/ZExbvdm)                          | 
|    Aritan#1931    |                         [Codepen](https://codepen.io/Aritan/pen/PoRPQom)                         |
|     鴨鴨#9822     |           [Codepen](https://codepen.io/qrvrqvxv-the-selector/pen/vYRNdPW?editors=1100)           |
|    Melon#9822     | [Codepen](https://codepen.io/BalaFang/pen/rNdOJgO) / .box1 寬338px 高110px .box2 寬300px 高110px | 
|  Grass立花#8094   |                       [CodePan](https://codepen.io/kj25940858/pen/LYdpQKy)                       | 
|     威0#6919      |                      [CodePan](https://codepen.io/n0918679182/pen/WNzQzbB)                       |
|   WEI_RIO#9342    |                  [CodePan](https://codepen.io/wei_wu/pen/zYWvWqo?editors=0110)                   | 
|  suihsilan#9485   |                 [CodePan](https://codepen.io/suihsilan/pen/MWVaVpy?editors=1000)                 |
|    ssozr#4680     |                         [CodePen](https://codepen.io/ssozr/pen/GRxpxYL)                          | 
|     雷雷#7844     |                       [Codepen](https://codepen.io/lei-yi-jie/pen/rNdOdKm)                       | 
|     得源#8355     |                        [CodePen](https://codepen.io/aglgvsie/pen/QWmjmJy)                        |
|   Fanglin#4054    |                      [CodePen](https://codepen.io/flynn841028/pen/wvmKmRv)                       |
|   Daisy_Li#4231   |                  [CodePen](https://codepen.io/lidairong-gmail-com/pen/wvmKjGG)                   |
|  我是泇吟 #5189   |                        [CodePen](https://codepen.io/kljuqbxs/pen/ZExboKr)                        |
|     LINK#1933     |                        [CodePen](https://codepen.io/miyayoe/pen/NWYGzNY)                         |
|   Jamie Wu#9345   |                        [CodePen](https://codepen.io/Wu220103/pen/BaroVpJ)                        |
|   ajhappy#6488   |                        [CodePen](https://codepen.io/ajhappy5438/pen/BaroPKM?editors=1100)         |
|   Vian #7338   |                        [CodePen](https://codepen.io/vianwu31/pen/NWYGBjQ)                        |
|   Hsiu #8767   |                        [CodePen](https://codepen.io/amy-hsiao-the-scripter/pen/qBoOyqP)        | 
|   阿蘇 #8531   |                        [CodePen](https://codepen.io/susu8327/pen/rNdOrqw)                        | 
|     kai#1098      |                         [Codepen](https://codepen.io/ahkai/pen/qBoOyvK)                          |
|     咻蹦#1526      |                         [Codepen](https://codepen.io/emmasyu/pen/gOeadKr)                          |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/ExEVeZp) |
| choubree#4350 | [Codepen](https://codepen.io/BreeChou/pen/oNqjavg?editors=1100) |
| Yunei#6323 | [Codepen](https://codepen.io/Yunei/pen/PoRPyPj) |
| 鉦勝 #8333 | [Codepen](https://codepen.io/atckmax823/pen/KKodGgx) |
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/BaroGBq)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/ExEVOKN) |
| Randy #0393 | [CodePen](https://codepen.io/randy820113/pen/gOeaQVV) |
| LinaChen #1796 | [CodePen](https://codepen.io/LinaChen/pen/PoRPxBv) |
| Yuan962#5897 | [CodePen](https://codepen.io/Jasmine-Liao/pen/bGvVOJr) |
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/xxWwMGv?editors=1100)|
逸川#6319 |[CodePen](https://codepen.io/bryanlin8911/pen/bGvVzea)|
IreneY#0086 |[CodePen](https://codepen.io/HalfPlannedJourney/pen/MWVaLjZ)|
  yu魚#1330   |   [CodePen](https://codepen.io/Yu_yu/pen/ZExbmVe) 
Winnie Wu#5468   |   [CodePen](https://codepen.io/Pooh-Wu/pen/eYMpxVw) 
|熊二#3824|[Codepen](https://codepen.io/BeckLai/pen/zYWveax) / .box1 寬338px 高110px .box2 寬300px 高110px| 
|鑫鑫#4346|[Codepen](https://codepen.io/Neil1024/pen/KKodJxE?editors=1100)|
|Jeff Lin #4717|[Codepen](https://codepen.io/toqzvyeq-the-scripter/pen/ZExbwwz)|
|Jason1#2538| [CodePan](https://codepen.io/jotwxezb-the-encoder/pen/ZExbwdE) |
| 肉魚#2149 | [CodePan](https://codepen.io/zoechen13/pen/GRxpejX) |
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/WNzQPPL) |
| smallmi80#3735 | [CodePen](https://codepen.io/smallmimi80/pen/KKodEQd) |
|    YU #0618    |  [Codepen](https://codepen.io/yoken_/pen/gOeayaY)| 
|hunset35#3186|[Codepen](https://codepen.io/hunset35/pen/bGvVJWw)|
|KJ T.#8381|.box1: width=338px, height=110px</br>.box2: width=300px, height=110px| 
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/wvmKZYJ)/.box1:寬338px 高110px .box2:寬300px 高110px|
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/oNqjOMr)|
|ROKA#4051|[Codepen](https://codepen.io/chengchiaoyi/pen/WNzQBed)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/JjLYqYP)|
|NeilLin#3009|[Codepen](https://codepen.io/a0071421/pen/wvmMBoM)|
|Amberhh#2465|[Codepen](https://codepen.io/Amberhh/pen/vYRLEgq?editors=0100)|
|Andy Hung#3335|[Codepen](https://codepen.io/andyhung0723/pen/ExEPaEd)|
|MinChunTsai #8285|[Codepen](https://codepen.io/Tsai0926/pen/gOePpgW)|
|Jenny真#7532|[Codepen](https://codepen.io/wei-chen-wu/pen/YzawXYN)|
|QOO#8446|[Codepen]/.box1:W 338px,H 110px；.box2: W 300px,H 110px|
|44#6963|[Codepen](https://codepen.io/lin-b/pen/VwXevoV)|
|skypassion5000#4151|[Codepen](https://codepen.io/skypassion5000/pen/dymGXpV?editors=1100)|
|Pony#6778|[Codepen]box1:338,110 box2:300,110|
|Susie(軒)#6181|[Codepen](https://codepen.io/Codeleaf/pen/LYdGRZg)|
|Ron Liang #7277|[Codepen](https://codepen.io/ron-go/pen/ZExQBBV)|
|    GARBO#6659     | .box1 寬338px 高110px .box2 寬300px 高110px | 
|hua#9099|[Codepen](https://codepen.io/LHua/pen/OJvMpWP)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/PoRZpQP)|
|Sentiments#4883|[Codepen](https://codepen.io/Sentiments/pen/KKoVWBv)
|心幻羽#0056| box1 寬338px 高110px ; box2 寬300px 高110px | 
|Carrie#2750| [Codepen](https://codepen.io/carrie-wang/pen/poLgwom) | 
|艾芮絲#6060| box1-width:338px height:110px;box2-width:300px height:110px | 
|christina#6185| [Codepen ](https://codepen.io/chrisc0210/pen/NWYxNmO)| 
|zaii#7472| [Codepen ](https://codepen.io/ivy2846357/pen/NWYxBMZ)| 
|紙飛機#1335| [Codepen ](https://codepen.io/paperplanea/pen/MWVKqjp)| 
|jin.huang#4666|(box1:寬338px 高110px ,box2:寬300px 高110px)| 
|CJ07#0176|[CodePen](https://codepen.io/cjtseng07/pen/JjLGmdq)|
|Cola#1583|box1:300+ 16*2+ 3*2 = 338px(W) 24*3 + 16*2 + 3*2 = 110px(H),box2 300px(W) 110px(H)|
|Kevin8349#6131|[CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/vYRLQWR)|
|肉桂卷#0625|[CodePen](https://codepen.io/ginnlee/pen/xxWZvXz?editors=1100) .box1 = 338px x 110px ; .box2 = 300px x 110px|
|GL#2256|[CodePen](https://codepen.io/4genie/pen/WNzrBgy)|
|jeter#8014|.box1: width=338px, height=110px.box2: width=300px, height=110px|
|大衛#4869|[CodePen](https://codepen.io/exnsrpjc/pen/poLywPm)|
|Tuhacrt#0008|[CodePen](https://codepen.io/Tuhacrt/pen/bGvpoKY)|
|mei#8421| box1-w:300+32+6=338px h:72+32+6=110px ; box2-w:300px h:72+32+6=110px |
|Yuna Huang #2692| box1 寬338px 高110px ; box2 寬300px 高110px |
|wlc #4877| box1 寬338px 高110px ; box2 寬300px 高110px |
|Cream #3449| box1:寬度：300+16*2+3*2=338(px)高度：24*3+16*2+3*2=110(px);box2:寬度：300(px) 高度：24*3+16*2+3*2=110(px) |
|鎔瑄 #8578| box1 寬338 高110；box2 寬300 高110 | 
|   Chi_Chen#3755   |  box1寬338px高110px/box2寬300px高110px        |     |
|RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/PoRNoGe)|
|mickey#8745|[CodePen](https://codepen.io/weizhetseng/pen/vYRKxwM)|
|Van.CS #2067 | [codePen](https://codepen.io/fbacojji-the-selector/pen/JjLKyYJ)|
|YaWen #2752 | [codePen](https://codepen.io/yuwendy/pen/PoRzJmZ)|
|Scottie #5850 | [codePen](https://codepen.io/wow767t/pen/dymXVBY)|
|Halla #0431 | [codePen](https://codepen.io/wawykddh-the-typescripter/pen/jOzrpdR)|
|肯肯#1576 | [CodePen](https://codepen.io/kkwcan/pen/abYZQKv)|
| Kiwi#9804 | .box1 高110 寬338 / .box2 高110 寬300 |
| bakiii | [codepen](https://codepen.io/aki168/pen/RwMRzyg) |
| Nini Chen #5790| [codepen](https://codepen.io/ninistyle/pen/JjLRXzV?editors=1000) |
| JarDar #6980 | box1 width= 3x2+16x2+300=338,height=3x2+16x2+24x3=110,box2 width= 300 (due to border-box), height= 110 (as box1) |
| Manson許 #2295 | [codepen](https://codepen.io/oupbzfxq-the-scripter/pen/WNzGaPj) |
| yuchenye #6119 | [codepen](https://codepen.io/yuchen/pen/MWVjxXZ) |
| kancheng#3915 | [codepen](https://codepen.io/kancheng/pen/RwMowdV) |
|阿翰 #1984|[CodePen](https://codepen.io/JohnHan05/pen/BarQNGK)|
|Clara Cai#7097|[CodePen](https://codepen.io/Clara-Snowy/pen/GRxNoyG)|
|Tori#1248|[CodePen](https://codepen.io/FlyTori/pen/QWmGNVd)|
|iamYanYan#9422|[CodePen](https://codepen.io/yayayanns/pen/zYWoqaW)|
|Nathan James#8120|[CodePen](https://codepen.io/ufo060204/pen/yLKVbEb)|
|sophiee#7015| box1 寬300＋16+16+3＋3＝338px,高16+16+3+3+24+24+24＋30= 110px ; box2 寛300px , 高16＋16＋30＋3＋3＋24＋24+24＝ 110px|
|瑞瑞#4605|[CodePen](https://codepen.io/tsai-li-ting/pen/YzaNEWo) |
|Deborah#0033|[CodePen](https://codepen.io/deborah-tsai/pen/BarprBN)
|EmilyLin#0526|[CodePen](https://codepen.io/c199615/pen/NWYdmOO?editors=1100)
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/vYRxEgy)
|WEI#0797|[CodePen](https://codepen.io/wei-z/pen/ExEmRja)
|yuling#1634|[Codepen](https://codepen.io/igzdflpu/pen/WNzjmxN)
|洧杰|[Codepen](https://codepen.io/igzdflpu/pen/WNzjmxN)
|Charles_Sin|[Codepen](https://codepen.io/charlessin/pen/yLKXvRd)|
|Barret#1119| [CodePen](https://codepen.io/barret0720/pen/poLrwdv)|
|KarenChan#4625|[CodePen](https://codepen.io/ruruchan7/pen/GRxvydg)/.box1: H=110px W=338px;box2:H-=110px W=300px
|rueee#7997| [CodePen](https://codepen.io/Jull-C/pen/bGvorXB)|
|鄭小蛙#3528|[CodePen](https://codepen.io/libclf/pen/QWmOgqJ)
|Rena#6249| .box1 寬 : 300px + (padding 16*2) + (border 3*2) = 338px <br/>高 :  (line height 24*3) + (padding 16*2) + (border 3*2) =110px <br/>  .box2 寬 : 300px , 高 : (line height 24*3) + (padding 16*2) + (border 3*2) =110px
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/poLVJZy)
|郭芙蘭#6374| [CodePen](https://codepen.io/flora_Kuo/pen/rNdPORX)|
|DoraHunag#8223|box1: width:338px,height:110 </br>box2: width:300px,height:110 </br>[CodePen](https://codepen.io/mwebwvuq-the-flexboxer/pen/WNzPBwN)