流（flow）：瀏覽器在頁面上擺放HTML元素所用的方法。瀏覽器從HTML文件最上面開始，從上到下沿着元素流逐個顯示所遇到的各個元素。
塊元素：自動換行，從上到下流
內聯元素：水平方向上相互挨着，從左向右流直到沒空間就換到下一行，總體上會從左上方流向右下方
注意：塊元素的外邊距在排列的時候會摺疊，margin只保留有較大margin的那個塊元素的值
浮動元素：瀏覽器會盡可能將其放在我們指定的位置（left or right），並從流中刪除這個元素，好像它浮在這個頁面上。
-
塊元素會無視浮動元素（疊加排列），但是裏面的內聯元素會繞開浮動元素排列。因此浮動元素更像是水面上浮着一層油，水流繞開它排列。
-
要浮動一個元素，必須爲這個元素設置一個寬度；而與其並排的塊元素內容區，則不能直接設置寬度（否則頁面無法正常擴展和收縮），需要設置外邊距，規定自己到這個浮動元素有多遠/要給這個浮動元素留下多少width
-
假如不想讓塊元素和浮動元素疊在一起，可以在塊元素的樣式裏用clear：left/right/both規定這個塊元素左邊/右邊/兩邊不準有浮動元素
-
一般只浮動塊元素，很少浮動內聯元素（除了圖像）
-
一般有原則，右緊左松，就是把右邊欄的寬度固定死，左邊內容區隨瀏覽器寬度變化而調整
流體佈局（liquid layouts）：瀏覽器寬度調整時，佈局擴展，填充可用空間；實現方法有很多，包括浮動佈局，絕對佈局
凍結佈局（frozen layouts）：鎖定元素，將其凍結在頁面（瀏覽器變寬，右邊會出現空白空間）
凝膠布局（Jello）：鎖定頁面中內容區的寬度，不過會將其居中；用auto屬性擴展外邊距
浮動佈局（floating layout）：float元素很適合浮動圖像，不過有個很大的缺點是，需要把浮動的div優先級在頁面提高，移到頁面主內容之上，但這個順序不能反應元素的相對重要性；float也無法創造兩個高度相同的列
絕對佈局：用絕對定位得到流體佈局，可以精確指定某個元素的位置；不過需要額外解決它和塊元素重疊問題
絕對定位（absolute position）：在頁面上精確定位元素
-
絕對定位完全從文檔流中抽出，跟文檔流不處於同一平面；
-
假如抽出多個絕對定位的元素浮在頁面，它們彼此也不會在一個平面，通過其z-index屬性進行判斷（值越大，層級越高）
-
Float雖然也能從流中抽出元素，但還是由瀏覽器決定其位置（我們傳的指令只是靠左/靠右）；絕對定位則完全由coder決定該元素所在的位置
-
絕對定位跟別的塊元素重疊，沒有clear這種解決方案，所以還可以引入表格佈局
position
static(默認)：元素正常放在文檔流中
relative：元素正常流入頁面，不過在頁面上顯示之前要進行偏移；元素還在頁面流中，而且會按你指定的量偏移
fixed：元素放在相對於瀏覽器窗口的一個位置上（而不是相對於頁面），即瀏覽器的大小/用戶的縮放不影響fixed的位置；
表格佈局（table-display layout）：缺點是增加div這種結構純粹爲了佈局，沒有爲頁面增加任何有意義的內容；濫用div是不對的
最外層的 div 樣式爲
div#tableContainer {
display:table;
}
每一行的div爲
div#tableRow{
display:table-row;
}
這個是單行，只有一個div，div的id=“tablerow”時候的情況
多行的時候可以使用一個類
div.tableRow{}
對於行中各列
樣式指定爲
display:table-cell;
讓大小不固定的元素垂直居中
表格佈局調整邊距用border-spacing，可以看成是常規元素的外邊距
同時也不再需要div上的margin外邊距