# 全職鬥士1組-🏅第一週小組任務筆記
# 第一週小組作業討論

## 第一題

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

### HTML

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

:memo:討論：<img>的 heigh 屬性可以設定圖片高度，以px為單位。加上<img>下方的預設2~3px留白，答案為2
[<img>屬性可參考 w3school](https://www.w3schools.com/tags/tag_img.asp)
<br>

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

:memo:討論：在 `display:block` 的狀況下，元素設定的 line-height 高度可視為元素高度。如果 `line-height : 1`，則會是該元素 font-size 的一倍，`line-height : 1.5` 則為 1.5 倍，以此類推。因此：
&lt;h1&gt; 高度為 36px
&lt;p&gt; 高度為 16（font-size） * 1.5（倍） + 24（margin-bottom） = 48px
&lt;img&gt; 高度為 90 px
合計：222px

~~display:block會影響line-hight???
我想說在區塊元素的狀況下，行內還不確定（等等試試）~~
[行內元素的 line-height 測試](https://codepen.io/YCH06/pen/pojjLmQ)
line-height 在區塊元素中才有作用的樣子:thumbsup:


<br>

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

:memo:討論：border 會從元素向外長，padding 會從元素內部撐開。所以 .card 的寬高如下：
50（width）+ 3（border-right）+ 20（padding-left）+ 20（padding-right）= 93px
50（height）+ 3（border-bottom） + 20（padding-top）+ 20（padding-bottom） = 93px

備註：如果下 `box-sizing: border-box;`，padding、border 會自適應原本設定的寬高。

<br>

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

:memo:討論：[優化後 Codepen](https://codepen.io/dannyliume/pen/zYvvrqG?editors=1100)
.header , .main , .footer 均為 .wrap 的子層，預設父層有什麼屬性就會繼承什麼。
因此只要在 .wrap（父層）下 `width: 500px; margin: 0 auto; font-size: 20px;`即可影響到 .header , .main , .footer，達到優化目的。

<br>

## 第五題

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

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

:memo:討論：[Codepen 連結](https://codepen.io/Jimmy_Wu/pen/YzyyXMm?editors=1100)
HTML 中，把需要置中的部分在外層加上 .container 做控制，接著在 CSS 裡將共用（可工具化）的部分獨立出來，像是 `padding-top: 20px; padding-bottom: 20px;`可寫成 .py-20　並加入到欲作用的 class 中。
.logo 原本是用 margin 去推位置，改為以父層 .container 的 padding 去推。

<br>

# 其他討論
* 如果想看頁面中所有元素的大小和位置，可以在 CSS 設定 outline 屬性，依序為框線大小、框線樣式、框線顏色。

*{
    outline: 1px solid #ccc
}

* 頁面滾動到特定高度時會出現內容的 Plugin：[AOS](https://michalsnik.github.io/aos/)
*經 Joe 測試可以用在 Vue*
* [Hex-liveStream-course．第一週筆記](https://www.notion.so/Hex-liveStream-course-4da69f24b65a4d0dbcab9a62a4b02202)
* [那些 CSS 偽元素可以幫你做的 10 個效果](http://gela-notepad.blogspot.com/2016/03/fw-css-10.html)
* [marker 偽元素](https://developer.mozilla.org/en-US/docs/Web/CSS/::marker)
* [用 data-* 屬性做出純 CSS 的 tooltip](https://muki.tw/tech/pure-css-tooltip-data-tag/)

# 助教回應
https://courses.hexschool.com/courses/808825/lectures/15598247
哈囉，全職鬥士 1 組

我是六角助教，穎旻

恭喜大家過關了～答案都是正確的哩，表示各位觀念都很好唷

程式碼的部分，第五題給你們小建議

1) 建議在四大區塊都在 class 最前面寫上他代表的區塊，像是 header content（可以包白色和粉色區塊） footer 等等，在閱讀程式碼時也能立即知道這塊代表的位置

其他都很棒唷～～CSS 的部分寫得很好

已經幫你們在 exel 上標示完成了：D