很榮幸之前有當過幾個月六角學院 HTML & CSS 線上問答助教一小段時間，這邊整理出幾個自己印象比較深刻的問題。
下方 auto 的意思指剩下可用空間。
margin:0 auto; 表示平均分配左右空間，上下空間為 0。margin:auto; 表示平均分配上下與左右空間。margin-left:auto; 為例，可讓區塊靠右對齊，因為 left 把剩餘的空間拿走。根據規範，margin-top: auto; 和 margin-bottom: auto; ，其計算值為 0。所以 margin:auto; 與 margin:0 auto; 視覺上呈現會是一樣的。
參考資訊：
text-align 做調整。margin:0 auto; 是讓區塊本身置中。參考資訊：
六角學院 - 使用 HTML、CSS 開發一個網站 | text-align 文字水平調整
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
}
" Microsoft JhengHei " 取代中文，避免錯誤。sans-serif 無襯線字體，因為此字體是 Mac 與 Windows 都支援的字體，假設前方系統字都沒有，至少還有sans-serif 可支援。font-family 字體名稱中有空白或是中文，需用單引號 '' 或雙引號 "" 將它括起來，避免發生錯誤。參考資訊：
* 星號設定 font-family ，但頁面沒有吃到是因為 CSS Reset 中 font: inherit; 的關係。
* 星號 CSS 選擇器權重為 0 ，因此會被 CSS Reset 的 font:inherit; 給覆蓋。所以可把 font-family 寫於 html,body 內，如下：
html, body {
font-family: ...;
}
參考資訊：
寬度與版型置中建議寫於 body 下的子層，直接寫於 body 會降低整體網頁彈性。body 的設定較常用於字型樣式設定。
背景色的部分也建議寫於 body 下的子層 ( 例如 .wrap )，一個專案內可能不同頁面會設定不同的背景色，所以可用 .wrap 包覆寫外層，但字體樣式基本上全站都會一樣，所以可以寫於 body。
<body>
<div class="wrap"></div>
</body>
HTML 套用 CSS 的方法有三種：
<head> 內。<head> 中使用 <link rel="stylesheet" href="xxx.css"> 載入此檔案。flex 則是使用主軸與交錯軸做控制。inline-block 搭配 vertical-align 的方式，不過還是較推薦使用 flex 排版。CodePen 範例另外也可參考筆者鐵人賽中 「 Day7 | 垂直置中的一些排版方式 」文章
content 是 CSS 的一個屬性，常用於 ::before 和 ::after 這二個偽元素中。content 的屬性值設為空字串 → content: ''; ，再搭配其它屬性生成輔助。( 例如圖片取代文字用法 )。參考資訊 :
text-orientation 屬性可讓文字旋轉。參考資訊：
text-decoration 屬性定義比較特別，所以建議把它套用到 body 內的其它子層元素上，例如 h1 、 p 段落。上方解說須重構
text-decoration 屬性定義比較特別，不要套用到最外層的 body 上，請直接套用於要使用的那個元素上，不然套用的那個元素內如果還有其他子元素，都會一起套用 text-decoration 的設定。( 要多繞口 )範例：
.wrap 使用 text-decoration: line-through; 可見子層 .inWrap 使用 text-decoration: none; 無效。text-decoration。參考資訊：
hr 標籤是段落焦點轉換，比較適合用在 A 區塊轉到 B 區塊之間，如果是像標題下的線條，是偏向裝飾用的話，就建議用 border 來處理，像設計稿中「個人資料」下方銜接內容中間的線條就較適合使用 border-bottom 屬性。
參考資訊：
border-bottom，可避免 a 連結 hover 時產生的高度變化。對 HTML 來說 :root 為 <html> 元素，除了優先級更高外功能與 html 選擇器相同。
:root 可搭配 CSS variables ( 變數 ) 使用。
:root 建立變數。/* 建立變數 */
:root {
--white-color: #fff;
}
/* 套上變數 */
p {
color: var(--white-color);
}
參考資訊：
➊ 基本寫法：
但此寫法方向就是固定從上至下 ( 起始色 → 結束色 )，無法控制方向。
background: linear-gradient(起始色彩, 結束色彩);
➋ 可控制方向的寫法：
因有些舊瀏覽器沒有支援 linear-gradient，所以需於前方加入前綴詞。如果沒有加前綴詞就需於方向前加上 to。
語法：
前綴詞
background: -webkit-linear-gradient(left ,red,orange,yellow,green,blue,purple);
background: -o-linear-gradient(left ,red,orange,yellow,green,blue,purple);
background: -moz-linear-gradient(left ,red,orange,yellow,green,blue,purple);
background: linear-gradient(left ,red,orange,yellow,green,blue,purple);
加上 to：linear-gradient(方向性, 色彩);
linear-gradient(to left top, blue, red);
/* 方向一般由上至下 */
➌ 可控制漸層色的角度寫法：
deg 。％
linear-gradient(角度, 起始色彩 , 結束色彩 );
linear-gradient(角度, 起始色彩 起始色彩位置, 結束色彩 結束色彩位置);
linear-gradient(角度, 起始色彩 起始色彩位置, 中間色彩 中間色彩位置, 結束色彩 結束色彩位置);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
background: linear-gradient(135deg, red 50%, yellow 50%);
background: linear-gradient(
163deg,
red 2%,
red 40%,
yellow 40%
);
參考資訊：
iThome鐵人賽
看影片追技術