[CSS冷知識 #2] 最被人忽略的傢伙: html和body

有時候想到/做到一些冷僻屬性就寫一下吧...今天是常被人忽略的html和body。

[html]
1. 這傢伙的height是min-height: 100% + auto，先天填滿+會跟著content走的，理論上不會overflow
2. body的height:100%可以吃到這傢伙的min-height+auto的height，
i.e.
html { min-height: 100%; height: auto;  }
body { height: 100%; }
等同於
html { height: 100; }
body { min-height: 100%; height: auto;  }
應該除了firefox和IE全世界是一樣的...[原因]
不過別的body的child只吃body及其parent的100%/assign的長度...(繼承不到的問題)
3. html是可以吃background的...只是很多人都不知道就不把background塞進去

[body]
1. 這傢伙不是最底下的element，在其之下還有html
2. 預設高度是auto－background-image no-repeat時的高度
3. 不過如果在background設background-color又會填滿全頁...大概是這個屬性令人誤會了body最大 ( ._.)
4. background如果有repeat是會令background-image填滿全頁，no-repeat +bottom只到page bottom
5. FF: 如果html不寫100% body沒法填100%
6. body是有overflow的

[general]
1. child不會繼承全部parent的property
2. css selector不是後寫就會在overwrite有衝突的property，css specificity才是最後決定的因素
3. css multiple background/css optimization應該讓你發現了，不管selector還是multiple value (用','來分開的值)，都是從右邊拆解的
所以就multiple value/list而言，右邊會先套用，左邊是最後才加入的－對programmer還好懂，對其他人不一定了...(所以multiple background雷死一堆人)
4. html是樹 (DOM Tree)，請用樹(Data structure)的觀念思考

今天就寫到這裡～下次再見