---
tags: 大學生體驗營 - 2021 夏季班
---

# 7/15 線上 Slack 助教

## 今日助教輪班時間

Luna： 7/15 (四)
回覆時間：下午 1:00 - 下午 5:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「JS 第 8 行會出現數字 8」，**但卻出現**「預期外的結果是 0」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. 以下問題區塊只能由助教自行增加
5. 助教會將回覆寫在下方問題區塊

## 問題

1. Cloudia：
助教你好：
以下是codepen連結：https://codepen.io/hkps87/pen/Vwbpaoe
這個是主線任務的header
我自己找了icon來用
但不知道為什麼只有第一個有成功並排
其他都和文字不同行
不知道是不是icon問題
再麻煩助教了 感謝～

> 助教回覆：
> 1. 你這邊在 li 寫死了寬度，因此字跟圖片就會為了符合寬度而換行。
> 除非是圖片，否則請不要寫死寬度與高度，請用 padding 推擠寬度與高度
> 2. `vertical-align: middle;` 跟 flex 置中請擇一使用
> 3. float 跟 flex 也請擇一使用
> 4. 這邊請不要用 % 來設定寬度達到置中效果，請使用容器概念，在設定最大寬度後，利用 `margin: 0 auto;` 置中
> 5. `.icon` 建議使用 `display: inline-block;` 排版，介紹可以看[這裡](https://ytclion.medium.com/css%E6%95%99%E5%AD%B8-%E9%97%9C%E6%96%BCdisplay-inline-inline-block-block%E7%9A%84%E5%B7%AE%E5%88%A5-1034f38eda82)
> 6. 提供一份修改好的 [codepen](https://codepen.io/Iotalh/pen/poPebeq) 給你參考，結構寫得很不錯哦！
>
> 如果有其他不懂的歡迎再發問！

---

2. Cloudia：
我發現在.icon裡面
用max-width/height:20px;和一般的width/height:20px;差很多
想知道這兩種用法分別差在哪裡和使用時機

> 助教回覆：
> - max-width 跟 max-height 都是給予元素在適應視窗大小時，一個延展 width/height 的上限值。
> - width 跟 height 則是給予元素一個固定的大小，不會受到視窗大小影響而變大或變小。
> - max-width 使用時機：
> - 會在給予 `.container` 寬度時用到，這樣可以讓容器內容隨視窗大小字適應
> - 設定圖片時，如果想要讓圖片以原始大小顯示，就會使用 `max-width: 100%`，這樣可以避免圖片被放大到超過原始大小而變得模糊，也可以在視窗縮小時跟著縮小圖片
> - width/height 使用時機：
> - 設定圖片時，如果是設計稿要求圖片是固定大小，並且不需要隨視窗大小縮放的狀況，就可以使用 width 設定
> - 圖片原始大小比要求長寬小一點時，並且寫死大小不會影響圖片觀看效果，可以使用 width 來設定，但還是建議圖片盡量比設計稿大或者剛好的大小，不然可能會造成模糊。
> - 固定比例的元素：有時候會使用 flex 並排多個元素，這時就可以設定 `width: ?%;` 來調整並排元素顯示的寬度比例
> - max-height 使用時機：
> - 通常比較少用到，因為網頁通常都是由上往下閱讀，因此 height 通常不會給予一個上限值
> - 如果是在做動畫的畫，就可以利用 max-height，像是參考連結提到的下拉式選單
>
> 這邊附上[參考連結](https://www.gushiciku.cn/pl/pNYB/zh-tw)，裡面有比較詳細的範例，可以參考看看

(這邊只能由助教編輯，問題請到 thread 上詢問)