CSS筆記：Positioning

1. 重要觀念
(1) 把網頁想成有兩層：下層跟上層

2. position的方式
(1) position: static
瀏覽器處理HTML元素的預設方式

(2) position: relative
相對於原本在下層的位置做指定的偏移

(3) position: absolute
元素會被移到上層，相對於容器元素做指定的偏移

(4) position: fixed
固定在瀏覽器視窗的某個位置

(5) float
float屬性可以將元素移到上層，並將它放在容器元素的最左側或最右側。位在容器元素中的其他下層元素會沿著float元素流動。
方框的高度會影響後續元素的位置。clear屬性可以讓你表明方框的左側或右側不應該碰到其他任何一個float元素(在同一個容器元素裡面)

CSS筆記：Font

優化之道p.267, 268 FONT Family
serif, san-serif, monospace




優化之道p.267, 268 FONT Size
font-size自動會inherit
可用px, %, em設定
瀏覽器預設文字大小是16px
如果<h1>的font-size是2em, 那麼大小將會是2 * (<h1>所繼承的font-size大小) %亦是如此
h1 { line-height: 1.2em } means that the line height of "h1" elements will be 20% greater than the font size of the "h1" elements. On the other hand:
h1 { font-size: 1.2em } means that the font-size of "h1" elements will be 20% greater than the font size inherited by "h1" elements.
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
http://www.w3.org/Style/Examples/007/units.en.html




優化之道p.267, 268 line-height
行距(leading) = 此行文字的最低點到下一行文字的最高點之間的距離
line-height屬性設定了整行文字的高度，所以font-size和line-height之間的差異就是行距
增加line-height會使得文字行之間的垂直間距變大
http://www.mukispace.com/css-line-height/

CSS筆記：一般原則

優化之道p.238 選擇器的種類
global selector: *
type selector: h1
class selector: p.note, .note (選擇class屬於note的p)
id selector: #nav
child selector: li>a (選擇身為li的小孩的a)
descendant selector: li a (選擇身為li的子孫的a)
adjacent sibling selector: h1+p (The selector matches if E1 and E2 share the same parent in the document tree and h1 immediately precedes p, ignoring non-element nodes (such as text nodes and comments). If this is the case, select that p.)
general sibling selector:h1~p (選取和h1有相同父元素的所有p)

NOTE:
    *[lang=fr] and [lang=fr] are equivalent.
    *.warning and .warning are equivalent.
    *#myid and #myid are equivalent.

關鍵想法: 把h1+p, h1~p等等想成跟regular expression一樣，背後有一個解譯器在運作，只要regular expression合乎語法，解譯器就能按照你的意思去運作。 (我自己是這樣想啦)



優化之道p.239 優先權
如果兩個選擇器相同的話，後者優先
如果一個選擇器較其他選擇器更具指定性，較具指定性規則會凌駕一般性的選擇器。 ex. p b > p, h1 > *
可以在任何屬性值後面加上!important，來表示此規則有最高優先權。




優化之道p.239 繼承
有些屬性會繼承給子孫元素
可以在屬性中用inherit來強迫繼承父元素的屬性值




CSS將每個HTML元素視為獨立的方框。這個方框若非「區塊」方框，就是「行內」方框(block and inline)