--- 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)