week01 - 1px 也不差的版型控制術

為了精進自己的切版能力，報名了六角學院推出的網頁切版直播班，這次上課讓我收穫很多，有複習到舊觀念也有增加新知識，以下為第一周上課的筆記。

Emmet

老師有建議想要提升切版速度，熟悉 Emmet 很重要，也可以減少打錯字找不到 bug 的狀況出現。

所以本周作業嘗試著全程使用 Emmet 做練習，雖然有些不習慣，但是真的有減少之前常常打錯字的問題。

keybr 英打練習

我的 keybr profile 連結

熟練英打也可以提升切版速度，因為有報名 21 天英打鍛鍊武道大會，所以持續都有在練習，也發現每天練 10 分鐘，真的可以積沙成多，每天都有進步一點點。

ps. 除了練英打速度，也可以自訂練習 emmet 語法

區塊與行內元素概念

老師把 display: block; 以及 display: inline; 拿出來做複習，加強觀念。

區塊元素的特色會另起一行、滿版、可以設定高度與寬度

補充觀念 :
h1、p、ul、li 屬於區塊元素

行內元素特色為並排、不滿版

box-model

Q: 試算 box 的寬度?

1
2
3
4
5
6
7
8

.box{
      width: 80px; /**/
      height: 80px;
      padding-left: 20px;/**/
      padding-right: 20px;/**/
      background: black;
      border: 3px solid yellow;/**/
}

Ans:

80px + 20px + 20px + 3px + 3px = 126px

但是老師有提到一個神奇語法

1
2
3
4

*{
      box-sizing: border-box;
}
`

加上這段語法， box 寬度變成 80 px，就算加上 padding 、 border 都不會改變原本設定的寬度。

行距設定

這個地方是我很容易粗心犯錯的地方，還好老師有再加強觀念一次。

Q1: 試問 p 段落高度為多少?

1
2
3
4

p{
    font-size: 20px;
    line-height: 28px;
}

Ans: p 段落的高度為 28px

Q2: 試問 img 圖片與 p 段落的距離是多少 px ?

1
2

<p> hello world </p>
<img src="hello.png" alt="" />

1
2
3
4
5

p{
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 20px;
}

Ans: 24px

(28px-20px)/2 + 20px

除以 2 是因為 4px 在文字上方的行距，另外 4px 在文字下方的行距

css img 3px

在老師還沒講之前，我都不知道 img 預設底部會自動多出 2-3px 的留白，若想解決留白問題可以透過 css 做 display: block;

44px 最適合手指點擊

根據 IOS APP Guidelines 最小手指觸控範圍是 44px

新手容易犯的錯

避免太多重複型的 css ，可以透過整合 class 讓 code 看起來更乾淨俐落。

Week 01 作業

(Photo by Domenico Loia on Unsplash)

Week 01 - 作業連結

第一周的履歷作業加強了 timeline 的 css 偽元素寫法，雖然還很不熟練，但是會繼續研究，讓寫法更好。

CSS TimeLine & 偽元素 ( Pseudo Element ) 的關係

本周訓練菜單:

• 將本週教授內容寫成部落格，以加深程式觀念

• 自主學習新語法，並寫成筆記

• 熟悉三個編輯器熱鍵，熱鍵中文表

• 幾乎全程使用 emmet 來開發

• 透過 keybr.com 練習英打