---
title: 第一週直播筆記
tags: 2021直播切版班, 六角
date: 20210702
image:
---

# 第一週直播筆記

## 環境建立
1. **載入與新增 HTML、CSS**
> ! + tab : 創造html5 環境
> link:css +tab : 創造CSS環境[color=green]

2. 運用 Emmet([字典](https://docs.emmet.io/cheat-sheet/)與[影片](https://www.youtube.com/watch?v=6VUFO6sLS5M))、[學姐操作示範](https://youtu.be/tFvFMncRYYM?t=62)

//emmet範例
.container>(.header>h1+.menu>ul>li*3>a)+(.content)+(.footer>ul>li*3>a)

**Emmet的好處**
> 不會打錯單字
> 提升切版速度[color=green]

3. [練功菜單](https://hackmd.io/iE6mxohOS-ujKU398Ewk1w)

## 1 px 也不差的容器觀念

### 網頁可以切分為容器與元素
> 範例網站：[Yahoo 首頁](ht2tps://tw.yahoo.com/)、[Yahoo 新聞](https://tw.yahoo.com/)

在設計網頁時，我們需要幫網頁設計容器。而通常我們用**Div**作為容器的標籤，將logo的圖片、選單等放進容器內。

以**yahoo新聞**為例，會有表頭導覽、側欄、內容、表尾...等容器，我們也能透過**chrome開發人員工具**，去即時的調整code ( 但不是真的更動 )，如果覺得OK再貼回 VS code，如此寫code時就不用一直來回切換。

設計網頁不外乎就是先設計容器，再把內容一個個放上去。

---

## 1 px 也不差的區塊與行內元素概念

### **小問題**：哪些 HTML 標籤是區塊元素？
h1、ul、a、li、p、span、div

每個網頁幾乎都有h1標籤，而且一頁只有一個h1標籤，h2~h5則能有許多個。
> Q : 打一個以上的h1會怎樣嗎?
> A : 不會怎麼樣，但是這種網站是不具語意化的、沒有結構性的。如果你的網站結構混亂、毫無章法，會得罪其他與你一起協作的人。

**區塊元素** : 盡可能佔滿版面，會另起一行。如 : div、p、h1~h6、 ul、ol、li
**行內元素** : 不會佔滿版面。如 : a標籤

行內與區塊元素的區分法:直接在標籤下背景色，有滿版就是區塊元素;無滿版就是行內元素。
補充資料 : [HTML 小知識 - 區塊元素 vs 行內元素](https://yanennnnn.github.io/html/20200827/fd7f7d68/)

---
## 1 px 也不差的 box-model 與行距設定

### **盒模型**：margin 與 padding 推擠

補充資料 : [Day21：小事之 CSS Reset 與 CSS normalize](https://ithelp.ithome.com.tw/articles/10196528)

**小測驗1：請問box的寬度是多少?**

.box{
  width: 50px;
  height: 50px;
  border-right: solid 3px yellow ;
  background: #000;
  padding: 10px;
}

**解答**

Ans : 73px (50+10*2+3=73)
那如果加上 `margin-right:10px`，寬度又會變多少呢?

Ans : 答案可以是73px，也可以是83px。
雖然box本身寬度是73px，但就整個瀏覽器上，他還是佔了83px，因為margin也算網頁上的空間。

### **行距設定**：line-height 的高度影響
文字預設size是16px。

**小測驗2：請問三行p段落的高度是多少?**

<p>
Lorem ipsum dolor, sit amet 
consectetur adipisicing elit. Nihil vel nesciunt, 
doloribus id minus, ullam ex corrupti
</p>

**解答**

Ans : 48px (16*3=48)
//如果變兩行，高度也會變成32px

:::info
:bulb: **以下為重要觀念提醒**
:::
**小測驗3：請問兩行p段落的高度是多少?**

//HTML
<p>
Lorem ipsum dolor, sit amet 
consectetur adipisicing elit. Nihil vel nesciunt
</p>

//css
p{
  font-size:16px;
  line-height:24px;  
}

**解答**

Ans : 48px (24*2=48)
//如果 line-height:0px，高度就會變成0px。

:::info
:bulb: 因為並不是文字產生高度，而是**行距產生出高度**。
:::
文字本身不佔高度，只是預設會帶有行距一倍。如16px的字預設16px的行距

如果一個16px的文字，設置24px的行距，會如下圖撐出高度 :

**小測驗4：請問box的高度是多少?**

//HTML
<div class="box">
<h1>標題</h1>
<p>Lorem ipsum dolor, sit amet 
consectetur adipisicing elit. Nihil vel nesciunt
</p>
</div>

//css
.box h1{
  line-height:36px;
  font-size:20px
}
.box p{
  line-height:24px;
  font-size:16px;
  margin-bottom:10px;
}

**解答**

Ans : 答案是60px，但實際上在網頁的空間是70px。
//因為有margin-bottom:10px的影響。

### **圖片距離分享**

**小測驗5：加上img後，請問box的高度是多少?**

//HTML
<div class="box">
<h1>標題</h1>
<p>Lorem ipsum dolor, sit amet 
consectetur adipisicing elit. Nihil vel nesciunt
</p>

<img src="#" height:"100">

</div>

//css
.box h1{
  line-height:36px;
  font-size:20px
}
.box p{
  line-height:24px;
  font-size:16px;
  margin-bottom:10px;
}

**解答**

Ans : 172px。(60+10+102=172)
:::info
:bulb: 因為img預設下方會空出2~3cm。
:::
**解決方法**

1. 在img的css裡寫 display:block (可以把行內元素改成區塊元素)
2. font-size:0
3. vertical-align: center

---

## 1px 也不差的常見誤區

### 常看到寫死高度與寬度

看到設計稿上的滿版時，我們常常會誤寫成**width:1920px**。但通常設計師在設計稿上標示1920px，只是在**示意你這是滿版設計**，並不是真的要你寫死寬度，如果這樣寫會被打(欸)。

真正的網頁容器，是中間的網頁元素。

以[蝦皮](https://shopee.tw/)為例，我們該怎麼寫出他的footer呢 ?我們可以利用container容器，讓網頁內容居中。

//sass
.container
  width:500px
  margin:0 auto

.footer
  .container
    p 段落

:::info
:bulb:[老師的範例程式碼](https://codepen.io/liao/pen/yLYyYaZ)
:::

**小測驗6：若要寫一個header，請問兩種寫法中，何者為正確的?**

//sass
.container
  width:500px
  margin:0 auto

(1)
.header
  .container 
    p 段落
  
(2)
.container
  .header
    p 段落

**解答**

Ans : (1)。
header的外層是瀏覽器，div會盡可能撐滿瀏覽器，所以瀏覽器多寬，背景就會跟著滿版。
而網頁內容因為被container包住，寬度有限制，所以會居中。

:::info
:bulb: 以[kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF)為例，其中只有圖片需要寫死高度。其他都應該讓它自動產生出高度。
:::