CSS筆記（佈局與定位）

塊元素和內聯元素，還有盒模型，這些正是瀏覽器創建頁面佈局的基礎

1 流（Flow）

流 其實是瀏覽器在頁面上擺放HTML元素所用的方法。

1.1 關於塊元素

瀏覽器從HTML文件最上面開始，從上到下沿着元素流逐個顯示所遇到的各個元素。好比只考慮塊元素，顯示第一個塊元素後，自動換行，顯示第二個塊元素，接着又是一個換行，如此從文件最上面到文件末尾逐個顯示，這就是流 。

當瀏覽器上下放置兩個塊元素時，兩個塊元素的外邊距會摺疊在一塊兒，即塊元素上下襬放，兩者距離是較大的那一方的外邊距。

浮動的與定位的塊元素與正常流塊元素上下放置時，外邊距不會摺疊

1.2 關於內聯元素

塊元素從上到下，那麼內聯元素就是從左上流向右下，而當所屬的塊元素寬度被設定，從而須要佔據更多的垂直空間，此時內聯元素的排列就必須適應一個更小的水平空間。

當瀏覽器並排放置兩個內聯元素時，兩元素之間的距離等於它們的外邊距之和。通常狀況下是不會設置內聯元素的外邊距（固然<img>圖像元素除外，對於圖像元素不只會設置外邊距，還有邊框與內邊距）。

2 浮動定位

在瞭解完流以後，如今理解設置屬性float是如何浮動一個元素，達到改變位置的效果。
對於全部浮動元素都要有一個要求，那就是：它必須有一個width寬度值。
在理解其理由時，關鍵在於理解：正常狀況下，瀏覽器的一行裏不能容納兩個塊元素，全部沒有定義的塊元素的寬度都是默認爲auto，即只要沒定義，基本狀況上這元素的寬度爲瀏覽器大小的寬度。
浮動屬性是將一個元素浮動在整個頁面之上，經過兩個塊元素中內聯元素的互相約束，從而達到兩個塊元素並排的相似效果。
而此時若是不設置浮動元素的寬度，就沒法肯定正常流元素的寬度，最終會致使重疊狀況出現。

2.1 向右與向左浮動

向左向右浮動，結果是不同的，這又是爲何呢？在此以前，咱們須要在深入地理解一下浮動的定義。

#go-right { width:200px; float:right; }

當如上述定義浮動向右時，瀏覽器的解釋步驟：

• 首先瀏覽器會像以往那樣正常地由上至下將元素流入頁面
• 當遇到浮動元素時，會把它放到最右邊，還會從流中刪除這個段落，就比如它浮在頁面上
• 因爲浮動元素從正常流中刪除，因此其餘元素就會像沒有浮動元素繼續流進頁面
• 因此理論上後面正常流進來的元素是在浮動元素的下方，不過這時候就要考慮到這些塊元素中內嵌的內聯元素了。瀏覽器對內聯元素定位時，它們會考慮浮動元素的邊界，於是起到一個圍繞浮動元素的效果。

這裏還得注意的就是瀏覽器讀取元素順序，也就是說書寫HTML時，浮動元素必定要緊跟你排版頁面位於浮動元素上面的正常流元素，不然若是按照正常閱讀頁面時的順序，浮動元素就會掉到後頭去了（此時只有浮動元素有寬度，而正常流元素寬度是可調節的）。
因此此時就要考慮使用向左浮動了。

正常流塊元素仍是在浮動元素下方，能夠在正常流塊元素設置了一些邊框（不設置寬度），以便看出重疊效果。

---

3 屬性float

說那麼多沒用，仍是實戰敲一敲得好。

例如此次期待編寫出如下這頁面：

3.1 向右浮動定位

諸如其餘的樣式編寫完以後，要使用向右浮動定位，浮動向右定位的步驟：

• 首先要定義姆爺板塊的寬度 width
• 而後定義float 屬性
• 接着還要計算姆爺板塊的總寬度，從而定義歌詞板塊的左外邊距，不然歌詞板塊背景會與姆爺板塊重疊（注意這裏邊距數值能夠是百分數或數值）。

到此時仿似一切正常，但縮小瀏覽器頁面一看，頁面內容都擠到一塊兒了，尤爲頁腳與姆爺模塊會有重疊。
這裏使用一個新屬性clear，先解決頁腳的重疊問題。
clear 屬性提出請求：當元素流入頁面時，能夠設置在這個元素的左邊或右邊或兩邊（both，left，right）不容許有浮動內容。所以這屬性只能使用在頁腳，而不能使用到歌詞模塊上。

#bottom { background-color: #FFE957; clear:right; }

使用右浮動定位的問題：屏幕過小時，姆爺模塊會佔優點把歌詞模塊頂得很小塊，因爲內聯元素之間的排斥以至歌詞內容都掉下去，同時原本想先看歌詞後看姆爺信息的順序就被打亂了。
因此如今要考慮向左浮動定位。

3.2 向左浮動定位

使用左浮動定位的步驟：

• 首先定義歌詞模塊寬度 width
• 而後定義float屬性
• 接着定義姆爺模塊左邊距
• 最後定義頁腳clear 屬性

使用左浮動定位的問題：如今姆爺模塊爲可擴展模塊了，當屏幕太大，這模塊會過寬，很差看。

因此結論是：從設計的角度來說，向右浮動比較好，而從信息角度來說，向左浮動比較好。
那有沒有一個方法能夠同時獲得兩者的好處呢？

3.3 流體佈局，凍結佈局與凝膠布局

3.3.1 流體佈局

目前，咱們所採用的的方法都是流體佈局，也就是不管瀏覽器調整得多大寬度，佈局都會擴展，填滿整個瀏覽器，使得用戶能充分利用他們的屏幕空間。
但也是由於這些不肯定的因素致使很難控制頁面，頁面大小不一樣呈現的效果與預期有出入。因此乾脆全都設置一些寬度把它們鎖死。

3.3.2 凍結佈局

凍結佈局會鎖定元素，讓他們凍結在頁面上，這樣就能避免因爲窗口擴展引來的衆多問題。
它的作法就是定義一個封裝全部元素如<allcontent>元素的width數值，其餘元素的寬度，外距都用百分數定義，那麼此時就會造成一個總體「凍結」的頁面板塊。
那麼此時假如瀏覽器真的足夠大，頁面板塊就會被掛到瀏覽器的一旁，不太美觀，這時就可使用凝膠布局。

3.3.3 凝膠布局

接着上述的步驟，這時能夠定義<allcontent> 元素的左右外邊距爲auto，此時瀏覽器會肯定正確的外邊距，使得左右邊距相同，於是頁面板塊居中。而這種設計叫作凝膠布局。

---

4 <position> 屬性

CSS中<position> 屬性有四個值：static （靜態）, absolute （絕對）, fixed（固定） , relative （相對）, 默認值爲static，當靜態定位時，元素會依據正常的文檔流。

4.1 絕對定位

絕對定位（absolute positioning）能讓內容保持正確順序，同時避免流體佈局存在的一些問題（好比說自身是按順序書寫HTML，邊欄模塊是有寬度使得主內容模塊的寬度是可擴展）
當<position> 屬性設定值爲absolute時，就是絕對定位。
使用絕對定位實現上述效果：

• 絕對定位會先從流中刪除姆爺模塊
• 而後根據指定的 top 、right、width（寬度） 屬性對姆爺模塊進行定位，定位方法是平移，如top=0% 則元素定位在頂端，right=50% 則元素從頁面右邊開始，以右邊外框（包括外邊距）爲準平移50%距離。

但問題在於：絕對定位不能使用clear 屬性，即頁腳重疊問題沒法解決

#singer { position:absolute; top:128px; right:0px; wdith:280px; }

4.1.2 關於定位受限問題

使用絕對定位，能夠編輯width, top ,left ,right 以及bottom 屬性用以肯定整一個定位元素的位置和大小。
那麼假如我設定的定位元素的屬性值過分受限怎麼辦呢？
比方說我要定義一個有衝突的定位元素，如left=50%，right=50%，那麼這時瀏覽器就會忽略掉right值，並重置right值。
同理當垂直方向發生定位受限衝突時，瀏覽器會忽略掉bottom值

4.2 固定定位

固定定位相信在不少網頁上都有看過，就是無論你的瀏覽器怎麼滾動上下頁面，固定定位元素仍是在固定位置上顯示着。
用法與絕對定位的差很少：

#singer { position:fixed; top:128px; right:0px; wdith:280px; }

4.3 相對定位

相對定位與固定定位的地方在於：固定定位時鹹魚瀏覽器窗口，而相對定位是相對於其父類元素來定位，其自己元素仍在正常的頁面流中（這句話要吃透），再按照指定的量來移動元素。（儘管是在正常流中，仍是會引發覆蓋）

#three { position: relative; top:-340px; left: 0px; width:1350px; }

最後，討論一下「自己元素仍在正常的頁面流中」這句話的意思。
看下圖，下圖的三條藍色線是在HTML裏是內嵌在頁腳模塊的元素，也就是說這裏移動是基於頁腳來移動的，設置移動距離爲負值。但有沒有注意到頁腳地下有塊空白區域，儘管把頁腳的margin值調爲零那區域仍是在這裏，這區域其實就是相對移動元素在正常流中的位置，儘管移動到別的地方，這個位置也是一直存在，一直被佔據的。

這裏思索一下爲何不使用姆爺模塊或標題頭模塊做爲基準對象，進行定位，而恰恰使用不討好的頁腳以致於生成空白區域？
這是由於會受到了繼承寬度等的影響，達不到原本預期的效果，如鐵定不能使用姆爺模塊，由於起始值被會在該模塊下面的左方位置（不是這個頁面的最左方），實現不了預期效果。

4.4 z-index 屬性

關於覆蓋優先的問題，定位元素可使用z-index 屬性分層放置，一個z-index 值越大，說明它層次越高，在屏幕上離你越近。
如上圖的三條藍色線就是對z-index 屬性賦值爲-1，才達到後置在歌詞模塊的效果。

5 關於overflow屬性

當一個元素固定爲某特定大小，但內容卻在元素中放不下，此時可使用overflow屬性來定義這種狀況：
overflow的值分別爲：visible（默認值），hidden，scroll，auto（含義是交給瀏覽器自己定義）以及inherit。
然而設置了overflow='hidden'屬性後並非在任何狀況下都能正常操做，它的實現也是有條件的，假如內部溢出元素的包含塊爲該容器的父級元素時，overflow屬性無效。即假如符合如下狀況，即便設置了overflow='hidden'也無法成功剪裁：

• 一、擁有overflow樣式的元素不具備position:absolute或position:relative樣式
• 二、內部溢出的元素是經過position:absolute進行定位

只要知足這兩個條件，overflow屬性就沒法對內部溢出元素進行剪裁。
這是由於一個絕對定位的元素，其包含塊是最近的擁有relative或者absolute定位屬性的祖先元素，若是任何一級祖先元素都不符合，則其包含塊是body元素。

包含塊簡單說就是定位參考框或者定位座標參考系，元素一旦定義了定位顯示（相對、絕對、固定）都具備包含塊性質，它所包含的定位元素都將以該包含塊爲座標系進行定位和調整。
對於相對定位及靜態定位來講，其包含塊都是最近的塊級元素或單元格或行內塊。
對於固定定位，其包含塊就是可視窗口

---

6 display 屬性（表格顯示）

CSS的表格顯示佈局須要增長HTML結構支持

• 首先定義表格，在HTML增長一個<div>，如id爲」tablecontainer」，這個元素包含佈局意義上的行與列。
• 而後定義行，在HTML增長一個<div>，如id爲」tablerow」，這個元素包含佈局意義上全部的行。
• 最後定義單元格，在HTML增長一個<div>，如id爲」tablecell」，這個元素包含佈局意義上全部的單元格。

#tc { display: table; border-spacing: 10px; }

#tr { display: table-row; }

#singer { display:table-cell; vertical-align:top; }

#song { display: table-cell; vertical-align:top; }
/* 1. border-spacing爲表格邊框邊距，可看做爲外邊距，因此源元素的外邊距可取消 2. 「vertical-align:top;」---> 單元格元素垂直對齊 */

若是須要創建多欄佈局，並且內容欄是均勻的，表格顯示就是很是好的佈局策略