五倍紅寶石- 深入淺出立即上手的HTML網頁設計(Amos老師)

雖然我是資管系畢業的，但是因為畢業之後就沒有再碰相關科系的東西，所以連最基本的HTML都差不多忘光了，更不用說是CSS……
都不太想提自己是資管了囧

而且其實我是很害怕前端的，以前專題的時候常常實際的外觀和我希望的外觀不一樣，我只是想要移個位置為什麼那麼難QQ
常常都在想要是我可以伸手去移動網頁上的東西就好了（想太多）

外加以前常常是自己亂用亂用，碰到問題上網google把大家寫的解法都試一下看哪一個有用就用哪一個，但是因為不了解那些css真正的意義，
所以很容易之後繼續又犯一樣的錯誤
老師上課的時候強調了好幾次我們要去理解它背後的邏輯，這樣之後自然就會通了
我覺得這部分是線上教學網頁比較少解說的部分

特別是對於float或是position，這兩個老實說我沒有真的搞清楚他到底是怎樣運作的，一直以來我腦中都是像下面這樣
float? 你是要飄去哪啊
position? 一個路痴哪會知道什麼position(?!)
特別是position,對我來說真的太謎了,但配合老師的講解，加上課堂上的練習，總算沒有之前那麼搞不清楚頭緒，下面是我上課的時候寫的memo

---

position

absolute

• absolute
• fixed
• relative
  會先從資料流當中抽離出來獨立一層
  
  1. 先找父層有沒有上面三種定位設定任何一種
  2. 有找到任何一種定位設定就靠在該層上
  3. 若所有父層都沒有設定就設在視窗上

relative

因為不會抽離出來獨立一層，如果只設定position: relative;然後沒有設定任何位置的話不會有任何作用．
設定位置後會跑到別的地方，但本來原有的位置依舊是繼續佔著

      position: absolute;
      left: 0;
      top: 16;

fixed

直接找視窗位置

---

還有一個其實很基本，但我一直忽略他的事實，就是…..網頁上的元素其實都有分成是block還是inline兩種

顧名思義可以和大家排在一起的就是inline(ex: span/ a /img ),一個人就佔掉整行的是block(ex: p/div)
inline預設沒辦法設定寬度/ padding上下/margin上下,可以想成只有長度沒有厚度的東西
但傻傻的我，以前常常想要去設定inline元素的寬度之類的(遠目)
這就是看到什麼就用什麼，但沒想過這些東西的本質的後果orz
當然搞清楚之後對於css的display設定成block/inline/inline-block會影響到什麼東西也更理解了

當然老師有說，切版是很吃經驗值的東西，而且很多東西還是要多用才會熟悉，才不會忘掉，因此之後的練習是很重要的

最後，html/css雖然不用一開始就面對讓人痛苦的環境設定問題，但是一個用的順手的編輯器是很重要的
自己編輯器是用sublime,老師有投影片介紹一些可以讓寫html/css更方便的功能
https://www.slideshare.net/banPrint/sublime-text-51689543
覺得ctrl+w可以幫我把tag外面再包一層tag非常方便，不然以前都要自己加然後再整理一下縮排,很麻煩