---

title: 2021直播切版班-22組 | 第一週小組任務
tags: 2021直播切版班, 六角
date: 20210702
image:

---
# ✏第一週小組任務
<!-- [TOC] -->
### 參與人員
| 參與成員暱稱 | Slack ID |
| -------------- | ----------- |
| Frank Waffle | U01KLBXJPSM |
| Kent | U021X7R4AQM |
| Kin Hei Shing | U01J0TNJ6GY |
| sans-ge | U021AC7VDFU |
| Sheng Kai | U02199SSZCM |
| 童筱涵 Hsiao-Han Tung | U021F83B07N |
| 粘勝凱 | U026RCXQ456 |
| 阿瓜 | U021KN259UP |
| 點子數位 | U025S7QNWCS |

---
### 第一題 心理測驗
請做此[心理測驗](https://www.16personalities.com/ch)，分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。

| slack名稱 | 類別 | 職業 | 分析 |
| ----------- | ----- | ------ | ------ |
| sans -ge | 競選者 | 外交官 | 熱情，有創造力愛社交的自由自在的人，總能找到理由微笑。|
| 童筱涵 | 表演者 | 探險家 | 自發的，精力充沛而熱情的表演者－生活在他們周圍永不無聊。|
| 阿瓜 | 調停者 | 外交官 | 詩意，善良的利他主義者，總是熱情地為正當理由提供幫助。|
| 點子數位 | 守衛者 | 哨兵 |非常專注而溫暖的守護者，時刻准備著保護愛著的人們。|
| Kent | 主人翁 | 外交官 | 富有魅力鼓舞人心的領導者，有使聽眾著迷的能力。|
| 粘勝凱 | 競選者 | 外交官 | 熱情，有創造力愛社交的自由自在的人，總能找到理由微笑。|

---
### 第二題 選擇題
以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)
1. 90px
2. 92~93px
3. 120px

#### HTML

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

#### 答案討論簡述
> 2
>[name= 童筱涵 ][color=green]

> 2 ； 網頁運行追加的空白~
>[name= sans -ge][color=gold]

> 2 因 img 預設是 inline- block 元素...[傳送門](https://)
>[name= 阿瓜][color=orange]

> 2.92-93px
>[name= 點子數位 ][color=hotpink]

> 2：img 預設是 inline 元素，inline 元素的 vertical-align 預設是和父元素的 baseline 對齊...
[src：HTML img 下方有不明空隙？！（葉子學姊）](https://)
>[name= Kent ][color=orangered]

> 2(img下方會多2px~3px的空隙)
>[name= 粘勝凱 ][color=blue]

---

### 第三題
請問 .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;
}

#### 答案討論
> 222px
[name= 童筱涵 ][color=green]

> 我也算222
[name= Frank Waffle ][color=gold]

> 222 (好險跟你們算的一樣,直播時一直算錯XD...)
> [name=阿瓜][color=orange]

> 222 = 36+90+48+48
> [name=Kent ][color=hotpink]

> 36+16*1.5*2+48+90
36+48+48+90=222
> [name=粘勝凱 ][color=orangered]

> 222，直播一直沒把標題的 line-height考量到
> [name=sans -ge][color=blue]

---

### 第四題
請問 .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;
}

#### 答案討論簡述
>width : 93px
height : 93px
[name= Frank Waffle][color=green]

>寬度：93px
高度：93px
[name= Kin Hei Shing ][color=gold]

>width: 50 + 20 + 20 + 3 = 93px
height: 50 + 20 + 20 + 3 = 93px
> [name= 阿瓜][color=orange]

>寬高都93
[name= 童筱涵 ][color=hotpink]

>都是 93
50（width、height） + 20（padding-top） + 20 （padding-bottom）+ 3（border-right、border-bottom）
> [name=Kent][color=orangered]

> 寬高各93px
> [name=點子數位][color=blue]

> 寬 50+3+40=93
高 50+3+40=93
> [name=粘勝凱][color=purple]

> 寬: 50+20+20+3=93
高亦同
> [name=sans -ge ][color=black]
---

### 第五題
請優化此[程式碼](https://codepen.io/liao/pen/OJyLOzr)，優化重點為：
* 在不影響外觀情況下，試著將不必要的 CSS 移除或整合
* 請不用更動 HTML 程式碼，僅需優化 CSS 程式碼

#### 答案討論
> [codepen](https://codepen.io/kinhei-shing/pen/VwbvBqe)
> 已作簡單嘗試
[name= Kin Hei Shing ][color=green]

>[codepen](https://codepen.io/hsiaohan/pen/gOWaZBK )
>我是用後代選擇器寫
[name= 童筱涵][color=gold]

>[codepen](https://codepen.io/kent-clark/pen/abWdopw)
>我想法是內層元件樣式都相同，因此把全部樣式都寫在 wrap。
[name= Kent ][color=orange]

>[codepen](https://codepen.io/xbsapbas-the-vuer/pen/oNWbzXj)
>應該殼以吧
> [name=點子數位][color=hotpink]

>[codepen](https://codepen.io/szykttdy/pen/rNmxRVG?editors=1100)
>因為字都是20px
所以我直接在body設font-size:20px，不知道對不對哈哈
> [name=粘勝凱][color=orangered]

>[codepen](https://codepen.io/hoick/pen/YzVqLWX)
>主要把.header h2,.main p,.footer p 寫在一起
> [name=阿瓜][color=blue]

---

### 第六題

請優化此[程式碼](https://codepen.io/liao/pen/qBOWPea)，並將程式碼連結放到 Codepen 上。優化重點為：

* 在不影響外觀情況下，將重複的 CSS 樣式，獨立成一個共用的 class
* 可依照您設定的共用 class，適當調整 HTML 結構

#### 答案討論簡述
> [codepen](https://codepen.io/kinhei-shing/pen/JjNYBQj)
> 將
margin: auto 0;
width:500px;
合併成一個class
[name= Kin Hei Shing ][color=green]

>[codepen](https://codepen.io/kent-clark/pen/vYmLBmz)
>將 wrap 結構當作置中使用，外層 header、banner、footer，用來設置顏色、padding、margin。
[name= Kent][color=gold]

>[codepen](https://codepen.io/hsiaohan/pen/xxdZKJY)
>我是把樣式獨立成一個class，不過把width:500px跟margin:0 auto放在同一個樣式我覺得也行～
[name= 童筱涵 ][color=orange]

>[codepen](https://codepen.io/xbsapbas-the-vuer/pen/xxdZEZx)
> [name=點子數位 ][color=hotpink]

>[codepen](https://codepen.io/szykttdy/pen/LYyGvxV)
>將margin:0 auto:跟width:500px個獨立成一個class，各位覺得class=wrap跟class=header-outbox，修改後沒有CSS樣式，要繼續留在html裡面嗎？還是要除移掉？
> [name=粘勝凱][color=orangered]

>
>[codepen](https://codepen.io/hoick/pen/qBmZJrR?editors=1100)
這題好難...
我做法只是整理在一起的方法...
> [name=阿瓜][color=blue]
---

### 第七題

彼此討論 [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF?reload_rt=1620962199126_0&)，你會如何透過 flexbox 來排版？

#### 答案討論
> [codepen](https://codepen.io/hsiaohan/pen/KKmzmzL)
> 這是我的kata～我在上方的content用display:flex跟justify-content: space-between，在li上也用了display:flex，想看看其他人怎麼排版
[name= 童筱涵 ][color=green]

>[codepen](https://codepen.io/szykttdy/pen/VwbvvQv)
>這是我的kata，我在ul跟img外層的.wrap加上display:flex，還有在li上加display:flex
[name= 粘勝凱 ][color=gold]

>[codepen](https://codepen.io/hoick/pen/vYmLQbO)
>這是我的kata~
把新聞圖文包成一塊,廣告圖包成一塊,
利用display: flex; 的屬性並排內容
用margin推容器外的空間
用padding、line-height 推容器內的空間
[name= 阿瓜 ][color=orange]

---

## 小組討論截圖
:::spoiler **slack 討論截圖 > 收合**
---
---
---
---
---
---
---

:::