HackMD
第13組 第一週｜版型
tags: 小組任務 第一週 2021夏季切版班 team13
第一題 心理測驗
心理測驗截圖（點擊展開）
這次組員人格特質很多元，沒人重複！
Sz 分享
第二題
以下題目皆有使用 Meyerweb CSS Reset。
以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)
- 90px
- 92-93px
- 120px
HTML
<div class="text">
<img alt="" src="logo.png" height="90" />
</div>
直播：height 的 px 可省略，沒有改成 block 屬性的 img 會有神祕的 2~3px 陰魂不散，看完直播後大家都答對啦～
height 寫與不寫的差別，是差在 loading 的時候
如果有寫，html 會預留 img 的欄位
圖片還沒 loading 完之前，以下的內容才不會擠上來
Sz 分享Use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts.
MDN
回答區
我猜 1 Xing 分享
原本選1看完直播發現是2
Summer.H 分享我也覺得是1，結果看完直播是2（燈愣
Sz 分享我猜2,ohno~跟大家都不一樣嗚嗚Shani 分享
我猜2哩
Jiang V 分享我猜 2Min Chun Tsai 分享
我覺得是2
家齊 分享我猜二 大約92.3f
巫樾
第三題
請問 .box 的高度是多少？(請不要用瀏覽器觀察)
HTML
<div class="box">
<h1>標題</h1>
<p>段落</p>
<p>段落</p>
<img alt="" src="logo.png" height="90" />
</div>
CSS
.box h1{
font-size: 24px;
line-height: 36px;
}
.box p{
font-size: 16px;
line-height: 1.5;
margin-bottom: 24px;
}
.box img{
display: block;
}
----
直播：img 改成 block 後，沒有了 2-3px 的問題囉！
然後我們集體忘了 margin 囉！這就是 live server 為何存在的最佳體現
回答區
我猜 174px Xing 分享
36 + 16*1.5 * 2 + 90 = 174Sz 分享
174~~ 聽直播補充一小點貌似在瀏覽器上算198(把margin加進去)Shani 分享
36+24+24+90 = 174px 哩
Jiang V 分享我算是 174px Min Chun Tsai 分享
- 我算是222，36+48*2(兩個p)+90=222px
家齊 分享我算是 174px→然後發現忘了算margin
Summer.H 分享img90 / H1 36 / P 161.5=16+8=24 / 242=48 兩段p/
＝１７４巫樾
第四題
請問 .card 的寬高與高度各是多少？(請不要用瀏覽器觀察)
HTML
<div class="card"></div>
CSS
.card{
width: 50px;
height: 50px;
border-bottom: 3px solid orange;
border-right: 3px solid #000;
background: #000;
padding: 20px;
}
沒有設定 box-sizing: border-box 就是要算數學，然後哭
回答區
我猜 53px 53pxXing 分享
width: 50 + 20 = 70
height: 50 + 20 = 70Sz 分享
- w: 50+20+20+3 =93
h: 50+20+20+3 =93Shani 分享
- 寬 50+20+20+3 = 93
高 50+20+20+3 = 93
Jiang V 分享
- W: 93
H: 93
Min Chun Tsai 分享
- 寬：50+3+40 =93
高：50+3+40 =93
家齊 分享
- W:93
H:93
Summer.H 分享
- 93巫樾
第五題
請優化此程式碼，優化重點為：
- 在不影響外觀情況下，試著將不必要的 CSS 移除或整合
- 請不用更動 HTML 程式碼，僅需優化 CSS 程式碼
風格1：全部丟到 wrap 裡
風格2：wrap 跟 text 分開
回答區
Xing 答案
Xing 分享by ShaniShani 分享
Jiang V 優化
Jiang V 分享Min Chun Tsai 作答
Min Chun Tsai家齊答案
家齊 分享Summer.H
Summer.H 分享SzSz 分享
巫樾codepen andser
wuyueh巫樾
第六題
請優化此程式碼，並將程式碼連結放到 Codepen 上。優化重點為：
- 在不影響外觀情況下，將重複的 CSS 樣式，獨立成一個共用的 class
- 可依照您設定的共用 class，適當調整 HTML 結構
答案感覺都很讚，html 有些沒用到的 class 可拿掉
回答區
Xing 答案
Xing 分享by ShaniShani 分享
Jiang V 優化
Jiang V 分享Min Chun Tsai 作答
Min Chun Tsai 分享Sz 回答Sz 分享
家齊答案
家齊 分享Summer.H
Summer.H 分享巫樾codepen andserwuyueh巫樾
第七題
彼此討論 pixel perfect kata，你會如何透過 flexbox 來排版？
關於 margin bottom 的下法，大部分是直接設在 li ，也有設在 img 的
Jiang V 分享
白板
問：有沒有需要在 ul 上加一個負的 margin，上層改div.mb-6>main+div
討論結果：我想太多了
問：main 不太清楚該放哪好，我是放在只有 news 的地方
討論結果：這個寫 main+footer，但主要還是要看文意
Sz 分享
巫樾畫
左紅 ul li
切版的呼吸 壱のkata
Xing 分享
Shani 分享
Sz 分享
家齊 分享
Jiang V 分享
[name=yellamoon 巫樾]
Learn More →
快捷鍵
Terminal(vs內)
- 開 Terminal
Win：F1／Mac:ctrl + ~ - 新增檔案
touch <檔名.副檔名>
VS 快捷鍵
- 開啟檔案：
ctrl + P
選檔案後按enter, (想開在不同 group 就ctrl + enter) - 切換正在使用的 group ：
ctl + 1, 2 - live server：
ctrl + L + O
家齊 分享快捷鍵，不同系統而有些預設不同
如live server： mac:ctrl + L + O,windows:Alt + Shift + B,
linux:ctrl + L ctrl + O
附上網路找的快捷鍵資源：https://ithelp.ithome.com.tw/articles/10237385
- 左側 bar 開關：
ctrl + B
討論截圖
救命八人全到齊阿！剩下兩位還找不到 slack ID 阿！
更新：隔天找到人啦！
