HTML5 + CSS

****** css selectors:
1. id selector can only use once in html file.
2. class selector can chain multiple class apply to same element
3. child selector '>', only select direct children of elements
4. descendant selector,all child of selected element
5. ~ combinator ex. p ~ span means selecting all <span> tags which is preceded by the p 
    and both of them share a common parent
6. p + span means first <span> palced immediately after <p>
7. ::before/after add cosmetic content before/after a element by using content, eg:
    .boring-text::after {
       content: "<- BORING!";
       color: red;
    }
    
******* weight
inhertance=0.1 < tag=1 < class=10 < id=100

text-indent:2em means 2 times size of font-size

block element [display: block]
1. start new line, element after also start from new line
2. 100% in parent element unless width setup

inline element [display: inline]
1. same line with other elements
2. unsetable with height, width, margin
3. element width = content with, not changeable

flow/float/layer
flow: 1. all block element displayed top to bottom, width=100%
      2. inline element from left to right
      
layer: position:relative(相对于以前的位置移动)/absolute(相对window)/fix(不会随浏览器窗口的滚动条滚动而变化)

假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，
ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；
而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。