# 第一週小組任務
<!-- [TOC] -->
### 參與人員
| Scarlett(筠婷) | Sarah（青璇） |
| ------ | ------ |

<!-- [TOC] -->

### 第二題 選擇題
以下範例程式碼的 .text 高度是多少？
> 2. 92~93px

### 第三題
請問 .box 的高度是多少？

> (36+(16x1.5+24)*2+90=222)

### 第四題
請問 .card 的寬高與高度各是多少？

> width : 93px (50+3+20x2=93)

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

> h2,p {fz20}
只保留.wrap的margin0+w500

### 第六題

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

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

> 1.header/content*2/footer個別加入.wrap容器來置中
2.紅/白段落共用.content樣式
3.紅色段落再加個類別選擇器(.banner ➝ bgc:pink+mb0)來覆蓋content樣式
[試做Codepen](https://codepen.io/qoxttdjg-the-encoder/pen/zYwvjEG?editors=1100)

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

>Scarlett史嘉:[CodePen_1stTry](https://codepen.io/qoxttdjg-the-encoder/pen/rNmVreq?editors=1100)
結論：如果是新手真的要先練習畫出結構圖再開始做，邊切邊做很容易挫賽

### 討論截圖