# 第一周直播課程 學習筆記
###### tags: `六角學院` `學習筆記`

## 練emmet! Why?
老師在課程說要提升切版速度，除了熟悉編輯器熱鍵、常練習切版、練英打外，另一個提升速度的方法就是練習emmet。

Emmet是一個外掛程式，讓你可以用幾個特定符號讓你不用死記HTML跟CSS的關鍵字，讓你避免在coding時打錯字。

這邊放上老師提供的Cheat Sheet
[Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/)
還有使用教學（有圖文解釋超棒！)
[［技術分享］Emmet簡易教學-快速上手包](https://pjchender.blogspot.com/2016/07/emmet.html)

## 容器？不放書，放元素
一個網頁中，有頁首，有選單，有中間主要的文章內容。如果打開網頁的程式碼，會每個區塊都發現有一個標籤 div 包住一堆HTML標籤，這個包住一推標籤的div就是收納程式碼的容器（Container）。沒錯，跟書櫃一樣，HTML的內容也是要分門別類的拉！

除了分類外，也是為了在日後套用CSS和應用Javascript時可以順利將效果鎖定特定區塊！

[HTML "div" 區塊容器元素](https://www.fooish.com/html/div-tag.html)

## 甚麼元素？這不是化學課！
在容器的部分說到div標籤以及他要包容的程式碼。就一個網頁來說，div包含他其中的所有程式碼都是構成一個網頁的元素。

一個元素(Element)=起始標籤+內容+結束標籤
EX:

<p>
Hello World
</p>

[HTML 標籤 (Tag)](https://www.fooish.com/html/tag.html)

## 1px不差，要求零誤差
要畫面好看，大小跟距離都很重要！雖然我不懂設計，但我也知道只要大小差一點點，整個畫面都會差很多。
所以在寫程式時，要做到和設計稿1px不差，除了剛剛的容器外，了解網頁中的每個元素也很重要。

而元素依其特性又分為「區塊元素 block」和「行內元素 inline」

#### 區塊 block 特性：
自己佔據一行，而且會左右拓寬，誓死（並沒有）占滿左右兩邊，填好填滿，但是可以設置寬度width限制他的發展。
簡單來說，是一個很好操控的人！（誤）

除了寬度，也可以限制他的高度 height，行高 line-height等數據。
也可以使用margin還有padding來讓他和外面的容器或和裡面的內容之間有間距。

這麼好操控的區塊元素（誤）有這些：
div, p, h1~h6, ul, ol, li...等

#### 行內 inline 特性：
喜歡人擠人，會和其他元素待在一行裡面，直到擠不下才會依依不捨的換行。雖然喜歡人擠人，但卻是個自由靈魂（誤），無法在他身上設置寬高來限制發展。

有著自由靈魂又是群居動物（誤）的行內元素有這些：
span, br, a, img...等

[區塊元素 行內元素 空元素特點？分別有哪些？](https://medium.com/@small2883/%E5%8D%80%E5%A1%8A%E5%85%83%E7%B4%A0-%E8%A1%8C%E5%85%A7%E5%85%83%E7%B4%A0-%E7%A9%BA%E5%85%83%E7%B4%A0%E7%89%B9%E9%BB%9E%E5%88%86%E5%88%A5%E6%9C%89%E5%93%AA%E4%BA%9B-19f8c05f16f6)

補：在放置img時會發現下方有空白，也是因為inline屬性造成的。可以將img的屬性改為block，或讓他垂直置中來消除留白。

[HTML img 下方有不明空隙？！](https://tzuhui.github.io/2020/01/08/HTML/html-img-blank/)

#### 今晚，我想來點　margin／padding，留白的美靠他們
當你寫好了HTML，打開CSS為你的HTML打扮得美美的，卻發現每個區塊都像連體嬰一樣分都分不開，這時就要來點margin跟padding！

在上課之前，第一次接觸這兩個屬性時傻傻分不清楚，只覺得兩個都是拿來推擠元素，所以剛開始我都亂用（不要學我）。

後來才知道兩個是有差別的！
以border為界，margin是調整border和外面border的距離（往外延伸隱形的距離），padding則是調整border和內文之間的距離（向內默默擠壓內容）。

[border(邊框), margin(邊界), padding(邊距), ....](https://sites.google.com/site/coolteazhuanti/css/padding)
[Day11-HTML元素邊界關係！margin、padding、border](https://ithelp.ithome.com.tw/articles/10205322)

#### line-height！決定區塊高度的不是字的大小，而是行高！
老師在課程說，很多人都以為是文字在推擠區塊大小，但是你以為真的有這麼簡單嗎？

其實操控區塊大小的是line-height！只是line-height預設值為1，也就是字型大小的1倍，所以才會讓人認為是由文字推擠高度！

#### 練習題：.box的高度
在上完課程之後，老師跟助教們有出小組任務的題目（還有每日任務），其中一題就是讓大家複習元素特性跟行高的概念。

問：.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;
}

解答（小組討論答案）

>.box中包含了h1一個, p兩個, imgx一個
> 文字部分是以行高而非文字本身計算，故h1高度為36px；一個p段落為16X1.5再加上margin-bottom的高度24px，也就是一個p為48px，而.box中有兩個p，所以是96px；img在這裡則是改變為屬性block，因此預設的留白高度也不存在，所以這裡的img為html設定的90px。
> 而將三者的高度加起來就是.box的高度，故36+96+90=222px，**.box的高度為222px**。