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

# 7/14 線上 Slack 助教

## 今日助教輪班時間

Luna： 7/14 (三)
回覆時間：下午 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/xxdgVOB
連結中是這次主線任務的banner和footer部分
我在.banner img有寫overflow: hidden;
但不知道為什麼banner的圖片還是超出了父元素的高度
導致footer不是在最下面
再麻煩助教解答了
感謝～～
> 助教回覆：
> 這邊其實不應該在 `.banner img` 設定 overflow，因為圖片通常都設定了 `max-width: 100%;`，而且又有 `max-height: 100%;`，所以整個元素的高度會隨著圖片大小改變。
> 但是 overflow 只會作用在有設定高度的元素上，並且較常用在處理文字溢出的狀況，可以參考連結內的使用範例。
> 這邊建議你寫法：
> 1. 把圖片設定成背景，有看到你寫了一行 `background-size: contain;`，但是他並不會對 img 的圖片產生作用，只會對使用 background-image 設定的背景產生作用
> 2. 根據設計稿設定高度，因為這邊的圖片並沒有裁切剛好，所以必須設定高度讓它符合設計
> 3. 建議在 `.banner` 內層可以放 `.container`，並使用相對位置與絕對位置來設定文字位置
> 4. 這邊對 background 還設定了位置在正中心、不要重複圖片，以及用覆蓋來顯示。
> 分別對應 `background-position: center center;`, `background-repeat: no-repeat;`, `background-size: cover;`。
> 使用 cover 而非 contain 是因為：contain 會把整張圖都顯示出來，所以可能會在顯示時沒有滿版的效果，cover 則是延展到鋪滿整個元素大小。
>
> 除了圖片問題之外，我發現你有一些設定是可以不用設定的，因為預設值跟你要設定的值是相同的，所以可以不用再設定一次。
> 我這邊修了一份 [codepen](https://codepen.io/Iotalh/pen/PomWOgx)，你可以參考看看。
> 有些地方不要設定寬度，請盡量用 padding 去推擠出寬度。
> 這份設計稿有很多會重複使用到的設定，你可以嘗試把這些常用設定都抽出來使用，以及把大部分字體、行高、字體大小的設定都設定在 body。
> 還有不用設定 `.warp` 的 `max-width: 1920px;`，也不用設定 flex，因為預設就是由上往下排列。這層 div 也可以直接拿掉。
> 可以觀察網頁內容的寬度，可以發現大部分都在同一個範圍裡面，並可以以此寬度設定 `.container` 的寬度。
> 如果有看不懂用意的設定，歡迎再提問。
> [overflow 參考資料](https://www.w3schools.com/css/css_overflow.asp)

---

2. Cloudia：
助教你好：
我還有第二個問題
以下是 Codepen 連結：https://codepen.io/hkps87/pen/bGWgoPL
想問助教目前我的 ul 寬度不正常
但是為什麼在 .wrap 裏面
註解掉 display:flex; 以後就回到正常了
或是不用調 .wrap
(我昨天是發現在 .content 裡面不加上 margin: 0 auto; 寬度也正常，但我又希望他置中，所以不知道問題出在哪裡)
謝謝助教～～

> 助教回覆：
> `.wrap` 不可以設定 flex 哦，因為內層只有一個 content 而已。
> `.wrap` 也不用設定 `max-width: 1920px;`
> `.content` 不用設定 flex 排版，因為預設就是由上到下排列。
> 這邊是受到內層的 `max-width:1110px` 和 `margin:0 auto` 的影響所以才導致 `.content` 受限在這個範圍內
> 所以就算外層的 flex 沒有拿掉，內層把寬度拿掉也可以恢復正常尺寸
> 附上我修好的一份 [codepen](https://codepen.io/Iotalh/pen/ExmZoqp)
> 這邊建議你使用 img 標籤來顯示圖片，因為它並不是背景圖，也可以避免圖片越來越多時，要一直增加只使用一次的 class
> 也請不要用 % 來設定 padding

---

3. 羿宣：
老師助教同學們好，這是我的 [codepen](https://codepen.io/Ann828/pen/YzVNrKo)，我原本預期「css第五行可以改變照片顯示位置，想要做的跟範例照片一樣(手指部分畫面有裁切)」，但卻出現「畫面右側因為left -140px，而有留白」，想問下該怎麼改善？謝謝助教！

> 助教回覆：
> 因為 background-position 是移動整張圖片的位置，但並不會放大，所以右側就會產生留白。
> 建議你可以使用已經裁切好大小的圖片來替換會比較方便，不然就要先讓圖片置中 `background-position: center center;`，再利用 background-size 進行縮放，例如：`background-size: 110% 870px;`，但縮放可能會不夠準確，因此還是建議用裁切好的圖片去替換，附上裁切好的圖片
> 

---

4. 小羊：
老師助教好，我像請問有關圖片的問題，第一個是我發現當圖片設定高度時，圖片會有變形的情況，和設計稿的等比放大縮小不同，變得比較窄因為有設定高度為520px(codepen第一張圖)，另外想請問有甚麼方法可以讓圖片局部放大(想要突顯圖某個區塊)，譬如想要凸顯這張圖(下方連結)的香水部分而不是連同背景也顯示 https://hexschool.github.io/webLayoutTraining1st/perfume-week6/index2.jpg 。

第二個問題是(codepen的第二張圖) 香水電商的index.8的圖有sold out的，上面的遮罩我有設定樣式，但好像沒有效果，設計稿的背景色比較深，想問一下是哪方面出了問題？這裡是codepen的連結 https://codepen.io/eqsmebaz-the-selector/pen/KKmaXQo 謝謝助教麻煩了~~ :pray:

> 助教回覆：
> 如果你要使用 background 來處理圖片，就必須用 background-image 來設定圖片，而不是用 img 標籤。
> 第一個問題：
> 如果要放大可以使用 [background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) 去處理，可以填入寬高放大的倍率達到放大的效果。但是建議還是使用裁切好的圖片，才不會在放大過程中導致變形或是畫面放大到變得失真。
> 第二個問題：
> 因為你這邊上色的方式是設定背景顏色，但在 img 標籤設定背景的話，img 本身的圖會覆蓋在背景顏色之上，所以才會看不到效果，可以參考 codepen 裡面的寫法。
> 附上 [codepen](https://codepen.io/Iotalh/pen/VwbPXjP) 給你參考。

5. 小松
老師助教同學們好，這是我的 Codepen (https://codepen.io/120061203/pen/jOmyzNv)。
我原本預期「CSS 第 35 行會制作出覆蓋整張圖片的Sold Out的效果」，但卻出現「預期外的結果是 高度超過圖片的高度」，想問下問題出在哪裡？ 謝謝助教

> 助教回覆：
> 你這邊在 `a.soldOut::before` 使用了 `position: absolute;` 來設定，但是也要在 `a.soldOut::before` 外層，也就是 `a`，設定 `position: relative;`，這樣 absolute 才會知道要以哪一個元素為基準點哦

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