課程詳細：https://5xruby.tw/talks/css-html-2016-3

這門課的老師是Amos，我覺得他對html和css的了解算是非常深入，滿推薦他的

1. 課程一開始是在講html tag的語意，用了解語意的方式去記憶，除了不容易忘記，在編寫網頁的時候也能挑出最符合情境的tag使用

要做好SEO就和無障礙設計一樣，盲人看不到畫面，只能靠閱讀器判斷內容，搜尋引擎也是一樣的

盡量讓網頁的語意和輔助標籤完整，就不用太擔心SEO的問題

2. 在標籤的使用上不能亂包，例如用<p>去包<div>，在Chrome的parser裡面他會認為你寫錯了，然後幫你修正而產生非預期的結果，造成css失效的問題

3. 再來就是切版，規劃版面大小的時候要計算pixel數，如果超過大小就會跑版

主要會影響版面大小的東西是width、margin、padding、border

width不用說，就是內容物要用的大小

border和padding會把元素往外展開，造成他佔位的空間變大

margin則是將其他元素推開，一樣會改變元素們在整個容器裡面可用的大小，但本身佔用的空間沒變

4. 元素在畫面上有分block和inline兩種類型

block的元素會直接用margin佔掉右邊整塊區域，並強迫下一個元素換行

inline則是類似<a>、<img>或<span>這種可以以一行呈現的東西

inline的高度不太能調整，通常會用line-height去操作

5. 排版的時候可以透過float或是display:inline-block將子容器進行橫向排列

float要避免後面的元素浮上來被擋住可以用clear:both，將左右的float消除

inline-block在使用的時候要注意，將block轉換成inline時，會繼承inline的特性，而出現所謂的4px space

6. html在比較後面的元素，render時處在比較高的位置，可以蓋過前面的東西

7. position有四種static、absolute、relative、fix

static就是你沒去設定他時的預設值

relative則是會以原本的位置當基準進行移動，原本所佔的位置則保留下來

absolute首先會往上層容器開始找，先找到任一容器不是position:static時，以他為基準進行移動，此時元素原來佔的位置會消失，由後面的元素替補

fixed直接跳到最上層，用視窗作為他的基準來移動