[Hexschool Web Layout Training] — Week_1 個人履歷

發表於 更新於 分類於 ， ， 文章字數： 6.6k 所需閱讀時間 ≈ 6 分鐘

第一週的練習

Introduction & 前言

依稀記得剛開始寫前端切版都是東摸西湊的，很多東西都是靠感覺硬拚出來的，最近公司案子變趕的情況下終於意識到自己的寫 Code 速度好像有待提升，除了打錯字外，在排版上似乎也還有很多可以精進的空間，又這麼剛好，在今年的 The F2E 開始前 六角學院 就釋出了一則消息：

荷包君 TAT

沒錯，工程師的限量就跟大媽瘋搶衛生紙一樣，沒多想就刷下去了，原本想等課程結束再來一篇完整的心得，但現在一個練習搭配一篇文章已經是基本了(笑

Summary & 摘要

*本篇文章將會以三個角度來紀錄， 課程心得(上課後的心得整理)、練習心得(做完作業後的心得整理)) 及 **小組任務(每週會有一項小組任務，寫完後的心得)*。

每週的練習挑戰和地下城有點像，都有自己必須練習到的地方；本週需要練習的目標有至少兩點以上的練習菜單，及額外的一項打字練習。

  1. 熟悉三個編輯器熱鍵

  2. 幾乎全程使用 emmet 開發

  3. 英打速度 練習

關卡目標

  1. 充分了解 box model 盒模型概念

  2. 了解 margin、padding 使用時機

  3. inline 行內與 block 區塊元素運用

  4. 行距觀念

課程心得

課程分為八週，一堂兩小時半，本週為第一次上課，到課率在第一天是很高的，畢竟校長都親口說不來上課的人會一個一個打電話了(笑，另外也許現代許多人還是能擠出零碎的時間來上線上課程，畢竟比起實體課程事後還是有錄影可以補課的，不用搭配老師時間。

這次直播班就是標榜打好你的底，所以有許多同學也是從 0 開始，剛好矯正我一些不對的觀念，以前剛開始學前端切版就是亂學亂用，也沒在乎過一些定義什麼的，所以後來才又陸陸續續學了 Sass 實戰全攻略 - 成為前 1% 的 CSS 頂尖好手 及 JavaScript 核心篇…等等來打好自己基礎。

這堂課介紹的項目主要如下：

什麼元素會佔滿版？

從前自己的觀念是任何東西我都要用 Div 包起來，有的東西也不知道為什麼自己就是 width:100%，因為有套用 Bootstrap，所以有換行就給他用 class="d-block" 不換行就給他 class="d-inline-block"，上了課之後終於好好的了解了。

根據 W3C(註1) 的規定，元素都有一個預設的 display 值，而元素預設的屬性又是以 display: block;(區塊元素) 及 display: inline-block;(行內元素) 為主。

**display: block;(區塊元素)**：

  1. 區塊元素之後的元素都會被擠到下一行。

  2. 高度寬度都可以另外給予。

  3. 預設寬度會自適應父元素的寬度，自己為預設 width:100%;。

有這些預設屬性的標籤如下：html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre。

這邊需要提到，以前一直不知道，一直到六角校長及助教提醒才知道一個網頁只會有一個 <h1></h1>，這點還真的要特別注意一下。

自動佔滿 100%

自訂 block 寬度後還是會佔滿一行

**display: inline-block;(行內元素)**：

  1. 會和其他的元素在同一行上，如果有多的行內元素則會一直排到排不下自動還行。

  2. 高度寬度無法另外給予。

  3. margin-top, margin-bottom, padding-top, padding-bottom 這四個屬性無效，但是左右是可以的 margin-left, margin-right, padding-left, padding-right。

有這些預設屬性的標籤如下：span, em, i, b, strong, a, img, br, q, bdo, sub, sup, button, textarea, input, select。

一直排到排不下才會自動換行

註1: W3C為 全球資訊網協會，又稱W3C理事會，是全球資訊網的主要國際標準組織。為半自治非政府組織，詳細介紹可參考此處。

CSS 還你漂漂拳

W3C 制定 HTML 及 CSS 時，沒有強制規定網頁需要有規定的預設樣式，簡單說就是很多瀏覽器都有自己預設的樣式，比如下面這張 chrome 的截圖：

瀏覽器壞壞

這時候你可能會納悶，有時候我明明就對準了且下對了 CSS，可是怎麼跑版了？這時候你就需要用到 CSS Reset 或 CSS Normalize，這是用來重置你網頁 CSS 的 CSS(好饒舌？！)，看下面這段 CSS Reset Code 就知道了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

明白了吧，就是把瀏覽器預設給你的 CSS 給歸零，而你可能會納悶 CSS Normalize 是蝦咪？！在時間上 CSS Reset 是比較早出來的，但是缺點就是 CSS Reset 像是強制把所有的 margin, padding, border, outline...等等 都直接歸零，所以很多地方使用者必須自己重新設定，而後者提到的最主要的目標則是 保留有用的瀏覽器默認設置，不是將之刪除，所以對針對不同的瀏覽器版本進行微調整。

這邊筆者最常使用的是 **Normalize.css**，跟框架一樣，沒有哪個最好，只有最適合自己的。

頁面排版怎麼推擠？

在以前不懂排版總是會給予 **魔數高度(註2)**，什麼寬高就是直接照的舒服的樣子或是設計稿直接設定，但是其實排版最不會出錯的法則就是由上而下，網頁該怎麼讓他往下排版呢？就是一個推一個，這邊建議朝同一個方向推擠即可，比如說 margin-bottom: 20px; margin-bottom: 30px; 這樣一路往下推，千萬不要左邊推一個，右邊推一個。

而這時候你可能會想說那高度怎麼算呢？這時候就要來圖解啦：

高度這樣來的

剛學切版我也不曉得東西高度怎麼算，後來才知道每一個元素高度是由 font-size 及 line-height 加出來的，這樣你就知道距離下一個東西高度為多少了吧！千萬不要再讓設計師生氣了(笑

註2: 這是一種統稱，意指那些不規律的數字，比方說 height: 237px; 或 margin-top: 164px;，通常不建議給予元素這種之後回來看 Code 或是其他人接手會毫無頭緒的數字

一般人不會注意到的 Img 小秘密

上面講完高度你可能開始會去注意每一個元素到底有沒有對齊，1px 也不想差，但是會意外發現 img 這個元素藏的彩蛋，你或許會納悶為什麼他的高度會多出 2px - 3px 呢？

什麼？

以前壓根沒注意過呀，因為 Bootstrap 套進去加上 img-fluid 或是直接給 .img:{height:100} 都不會發現這問題，那為什麼會這樣呢？

因為 img 其實算是 text 的歸類，而文字分為 頂線(top line), 中線(middle line), 基線(base line), 底線(bottom line)，所以在文字上會多出 2px - 3px 來預留顯示會在 底線(bottom line) 上文字的尾巴，比如 j。

解決方式通常都會建議直接給予圖片 display: block;，佔滿整個元素寬高，或是把圖調整到 中線(middle line) 上對齊，程式碼如下：

1
2
3
4
5
6
7
8
9
10
.img {
  display: block;
}

// 或

.img {
  vertical-align: middle;
}

See the Pen 2020春季網頁切版直播班 - 第一週範例程式碼 - Img 的小眉角 by ZeHung (@rexhung0302) on CodePen.

另外有人提到通常不建議使用 display：block; 這種寫法，因為通常項目在圖片右邊，如果這樣使用，就不能使文字緊鄰圖片排版，這時候就隨機應變囉！

額外小眉角

  1. 關於 Border 是會算進寬高的，如果不想要被算進寬高，可以使用：
1
2
3
4
5
* {
    box-sizing: border-box;
}

// 或是自定義 Class Name 然後個別給予這個屬性

  1. 關於行動裝置人體手指點選最適大小為 44px，記得囉，千萬不要在使用過小的按鈕或連結，造成差勁的使用者體驗！

  2. 關於 CodePen 的小眉角，可以直接在部落格貼上片段程式碼，只要到 CodePen 上寫完程式碼後存儲下來，然後點選右下角的 Embed 會彈出樣式給你選擇，複製最下面的 Copy & Paste Code 即可。

點選右下角 Embed

選擇好樣式後複製下方程式碼貼上部落格

  1. 關於 MarkMan 馬克曼，這是一款 高效的設計稿標註與測量工具，有時候你不知道設計師距離到底設定多少，就可以使用這款程式測量。

很方便呢

但是 MacOS 似乎安裝有點問題，還好同學(treeman)神通廣大，解決方法如下：

如果您安裝有遇到問題請在試著這樣做

1
2
3
4
5
6
7
8
9
10
// 記得打開終端機，前方的錢字號不需要複製

$ cd /Library/Frameworks

$ sudo xattr -d com.apple.quarantine "Adobe AIR.framework"

// 如果執行了第二行沒有顯示任何東西就是成功了

// 接著請重新安裝

安裝位置及方法可以參考 六角學院文章 MarkMan - 高效的設計稿標註與測量工具。

感謝大神同學

練習心得

這次排版練習使用了 emmet 來寫，整個流程雖然不太習慣，但是有感覺到整體速度提升了許多，我想之後還是會按照這種方式寫下去。

另外之前六角學院校長及助教提過 h1 一個網頁只會有一個，所以這邊也特別注意並且改善掉。

而在切版時有些觀念不太清楚，在爬文中偶然爬見助教 穎旻 的 Flex 修煉時光屋 作業批改心得，裡面有提到通常 ul li 不會再另外包一層 Div 了，這邊也有特別修正程式碼，但其實滿好奇如果有時候 ul 需要和其他元素綁在一起而且需要下 padding 一起置中或給獨立的背景顏色的情況下，還能不能包一個 Div，這邊還有待跟助教確認。

最後在切版上沒有太大的問題，覺得自己刪減掉很多不必要的 Div 了，這邊就等待校長或助教改完程式碼再進行課後檢討及修正了！

小組任務

本週小組任務有五題：

第一題 選擇題

以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)

  1. 90px
  2. 92~93px
  3. 120px
1
2
3
<div class="text">
  <img alt="" src="logo.png" height="90" /> 
</div>

解：因為圖片為文字屬性，有預留 **底線(bottom line)**，所以會多出 2px - 3px。

第二題

請問 .box 的高度是多少？(請不要用瀏覽器觀察)

1
2
3
4
5
6
<div class="box">
  <h1>標題</h1>
  <p>段落</p>
  <p>段落</p>
  <img alt="" src="logo.png" height="90" /> 
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.box h1{
  font-size: 24px;
  line-height: 36px;
}
.box p{
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.box img{
  display: block;
}

解：圖片不考慮多出來的 2px - 3px，因為有給予 display: block; 屬性，高度算法為 h1 的 line-height: 36px 加上 p 段落的 line-height: 1.5;(1 為網頁預設的 16px, 1.5 x 16px) 先加上 margin-bottom: 24px 在乘上兩個，加上圖片的高度 90px。

1
2
3
console.log(36 + (( 1.5 * 16 + 24 ) * 2) + 90 );

// -> 222px

第三題

請問 .card 的寬高與高度各是多少？(請不要用瀏覽器觀察)

1
<div class="card"></div>
1
2
3
4
5
6
7
8
.card{
  width: 50px;
  height: 50px;
  border-bottom: 3px solid orange;
  border-right: 3px solid #000;
  background: #000;
  padding: 20px;
}

解：

圖解

第四題

請優化此程式碼，優化重點為：

  • 在不影響外觀情況下，試著將不必要的 CSS 移除或整合
  • 請不用更動 HTML 程式碼，僅需優化 CSS 程式碼

解：傳送門

父層下的 css 其實都可以直接下在父層上, 因為幾乎都是共通的, 如果有需要客製在另外下 css 即可

第五題

請優化此程式碼，並將程式碼連結放到 Codepen 上。優化重點為：

  • 在不影響外觀情況下，將重複的 CSS 樣式，獨立成一個共用的 class
  • 可依照您設定的共用 class，適當調整 HTML 結構

解：傳送門

盡量把能重複使用的樣式獨立出來，如果有需要特別客製化的 CSS 如 height: 100px; 或 background: green; 在另外下，獨立 CSS 到新的 Class Name 有益網頁渲染速度，因為減少了 CSS 的階層數。

註：因為有 “在不影響外觀情況下” 的前提下，所以不考慮多放一個 container 的 div 至 wrap 下然後給 500px，或是直接對 wrap 下寬度 500px，因為這樣背景顏色會無法佔滿滿版。

Conclusion & 結論

這次直播課也是吸取了很多新知，人們常說，了解的越多你不懂的也越多，所以不論什麼人事物身上都是有值得你學習的地方，我想這次的階版直播班從 0 開始也能糾正我很多觀念。

希望之後幾週也能順利，然後接著 The F2E，不過還是希望 PM 能好好的跟客戶排時程放過我 QQ。

Demo & 成果程式碼

Source Code：點我

Demo：點我

參考網站