html&css布局與定位小結（headfirst html&css第11章）

流（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外邊距