第一週小組任務

• 第一週小組任務
  • 參與人員
  • 第一題 心理測驗
  • 問題二
    • Ans
  • 問題三
    • Ans
  • 問題四
    • Ans
  • 第五題
  • 第六題
  • 第七題
  • 討論截圖

參與人員

第一題 心理測驗

組員已用口頭報告完成 =)

問題二

以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)

1. 90px
2. 92~93px
3. 120px

<div class="text">
  <img alt="" src="logo.png" height="90" /> 
</div>

Ans

92~93px / img有預設的高度(如果下display:block的話則答案為90)葉岱頴
92~93 黃小瑄
依照 CSS 撰寫而判定，所以一跟二都有可能 蔡明達
92~93 這有解釋baseline跟line-height的關係https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image 黃士桓
92~93px (老實說沒遇到這題目，我還真不知道有這狀況說)
我試著做了一個 Codepen 來解說這狀況，但沒有樓上的資訊仔細 wwwww
Nate Lu
92~93px Paisley Chien
92~93px YEN
92~93px 曹馨云
92~93px 艾瑞克

問題三

請問 .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;
}

Ans

36+(16x1.5)+24+(16x1.5)+24+24+90=222葉岱頴
36+(16x1.52)+(24x2)+90=222黃小瑄
36+24x4+90=222蔡明達
lh36+lh24+mb24+lh24+mb24+h90=222黃士桓
lh36 + (fz16 * lh1.5 + mb24)2 + h90 = 222
Nate Lu
36+(161.52)+(24*2)+90=222 Paisley Chien
36+24+24+24+24+90=222 YEN
36+(16x1.5+24)x2+90=222 曹馨云
36+(16x1.5+24)x2+90=222 艾瑞克

問題四

請問 .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;
}

Ans

寬高:50+3+20+20=93葉岱頴
寬93高93黃小瑄
都是 93 唷蔡明達
寬=高:50+(br3bb3)+(pt20+pb20pl20+pr20)=93黃士桓
正方形: p20+w/h50+p20+b3 = 93Nate Lu
寬:50+3+20+20=93 高:50+3+20+20=93Paisley Chien
寬高皆為 50+3+20+20=93YEN
width:93,height:93 曹馨云
寬高 93px 艾瑞克

第五題

請優化此程式碼
優化後codepen:

codepen:https://codepen.io/bhliyoup/pen/RwVbqgQ 葉岱頴
codepen：https://codepen.io/5quvgp2z/pen/zYwvMyX黃小瑄
codepen: https://codepen.io/shr-huan-huang/pen/abWvXaq黃士桓
codepen: https://codepen.io/nate12/pen/NWjGjaqNate Lu
codepen: https://codepen.io/canaerkk/pen/vYmNqXB?editors=1100Paisley Chien
codepen: https://codepen.io/Hoyi/pen/vYmNLoaYEN

優化重點:

1. 重複的font-size:20px放置在wrap
2. width:500px & margin:0 auto 因為所有階層都有因此統一放置在最外層的wrap。

第六題

請優化此程式碼

優化後codepen:

codepen: https://codepen.io/bhliyoup/pen/GRmpPNM?editors=1100 葉岱頴
codepen：https://codepen.io/5quvgp2z/pen/MWmazMz黃小瑄
codenpen: https://codepen.io/shr-huan-huang/pen/XWRmOBe黃士桓
依照 Utilities、Container 分離原則來優化
codepen: https://codepen.io/nate12/pen/eYWpWyR Nate Lu
codepen: https://codepen.io/canaerkk/pen/WNjQqGp?editors=1100 Paisley Chien
codepen: https://codepen.io/Hoyi/pen/dyWYMWq YEN
codpen 艾瑞克
優化重點:

1. 同樣的寬(width:500px)&margin:0 auto,將之用一個container寫好後把class加到需要的html標籤上。
2. logo已有下寬高跟margin，所以父層(header-outbox)就不用在寫高度。

第七題

彼此討論 pixel perfect kata，你會如何透過 flexbox 來排版？

codepen:https://codepen.io/bhliyoup/pen/JjNYXXM![]
葉岱頴
codepen：https://codepen.io/5quvgp2z/pen/VwbLVQe 黃小瑄
codepen：https://codepen.io/bmzpfyxe/pen/JjNYYyQ蔡明達
codepen: https://codepen.io/shr-huan-huang/pen/qBmObVR黃士桓
依照 Utilities、Container 分離原則來制作，而外加上 Pug 來邊做邊學習。
透過 flexbox 將 block 元素排層一行。
kata 結構中，需使用兩個 flexbox（分別為：列表中圖左文右 及 左列表群右大圖）。
codepen: https://codepen.io/nate12/pen/LYWbyjg
Nate Lu
codepen: https://codepen.io/canaerkk/pen/RwVWMvG Paisley Chien
codepen 艾瑞克

討論截圖