奇妙的CSS之佈局與定位

前言

關於佈局與定位是Web前端開發裏很是基礎而又重要的部分。介紹相關知識的文章，很容易就能夠找到。雖然，這方面的知識點不是不少，但咱們若是不弄清楚，在運用時候每每會出現預料以外的佈局，這些「意外」有時候很使人苦惱。下面根據個人學習和編程經驗來談一下這方面的要點。

要想完美的實現本身的佈局，那首先必定要把盒模型搞清楚。盒模型由內容區、內邊距（padding）、邊框（border）和外邊距（margin）構成。這些屬性值都是可選的，相互之間沒有依賴關係，但在具體的佈局時會須要設置某些屬性。咱們平時設置的寬度和高度其實都是內容區的大小，而不是整個元素的大小。詳細狀況以下：

那麼既然瞭解了盒模型，咱們怎麼讓元素按照咱們的意願佈局呢？接下來就來探討一下這個問題。

其實瀏覽器在頁面上擺放HTML元素時，它是採用文檔流（flow）來實現的。就像瀑布同樣從最上面的元素開始，自上而下進行元素顯示，遇到塊元素自動換行，默認每一個塊元素會佔瀏覽器窗口的整個寬度。而內聯元素會在水平方向上自左向右顯示，整體上從左上方流向右下方，在垂直方向上擴展外圍元素。

邊距摺疊

關於流和盒模型咱們還須要瞭解，瀏覽器在並排顯示兩個內聯元素時，這兩個原時間的外邊距是不會重合的，兩者邊框之間的距離是二者外邊距之和；當兩個塊元素上下放置時，它們挨着的外邊距會摺疊起來，顯示出來的外邊距就是兩者外邊距裏的最大值。當元素嵌套時，也會發生外邊距摺疊問題，其只會合併上邊距和下邊距，左右外邊距並不合併。須要注意的是，若是外面的元素有一個邊框，那麼這兩個元素的外邊距就不會碰到一塊兒，也就不可能發生摺疊。咱們只須要記住：只要兩個垂直邊距碰到一塊兒，它們就會摺疊，即便是嵌套起來的也不例外。浮動元素因爲已經不在文檔流之中，它們的外邊距是不會摺疊的。

關於浮動咱們須要瞭解，浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。要想使元素浮動，必須爲元素設置一個寬度（width）。雖然浮動元素不是文檔流之中，可是它浮動後所處的位置依然是在浮動以前的水平方向上。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣，下面的元素填補原來的位置。有些元素會在浮動元素的下方，可是這些元素的內容並不必定會被浮動的元素所遮蓋，對內聯元素進行定位時，這些元素會考慮浮動元素的邊界，會圍繞着浮動元素放置。也能夠把浮動元素想象成是被塊元素忽略的元素，而內聯元素會關注浮動元素的。       

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。除非專門指定，不然全部框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。 

position 屬性

• static：元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。若是不爲元素指定定位方式，會採用默認的靜態定位方式。若是是靜態定位，那麼元素就放在正常的文檔流中，由瀏覽器徹底決定元素的擺放。雖然你能夠用float來浮動元素，但最終仍是由瀏覽器決定元素的最終放置。
• relative：元素框偏移某個距離。相對定位的元素會正常的流入頁面，不過在頁面上要進行偏移。
• absolute：元素框從文檔流徹底刪除，並相對於其包含塊定位。包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

絕對定位（absolute），雖然也是從文檔流中刪除，但它與浮動是不一樣的，它不會再和原來位置保持水平，而是由top,right,bottom,left等屬性值肯定，這些值都是相對於其父元素的。並且流中的元素不管是塊元素仍是內聯元素都再也不關注絕對定位的元素，它們徹底不知道頁面上有絕對定位元素的存在。因此在佈局時爲了避免被絕對定位元素遮蓋文檔流中的元素，最好給下面的元素設置恰當的外邊距（margin）。絕對定位元素還有一個很意思的特性，那就是能夠分層放置，能夠用z-index屬性來分層放置元素，這會指定它在一個虛擬z軸（垂直於頁面）上的位置，並且越靠近你的元素z-index值越大。固然z-index屬性並非絕對定位所專屬的，相對定位和固定定位的元素也有這個屬性。絕對定位時並不須要對元素設置寬度(width)，若是不指定寬度，則塊元素會默認的佔瀏覽器的整個寬度（包含margin-left和margin-right，並不只僅是內容寬度width）。

• fixed：元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。也就是說，固定定位會把元素放在相對於瀏覽器窗口的一個位置上（不是相對於頁面，html），固定定位的元素是不會隨頁面滾動而移動的。

上面已經介紹了佈局定位須要用到的知識，那麼咱們就能夠按照本身的須要實現佈局啦！使用HTML和CSS創建佈局有不少種可使用的方法，好比浮動佈局、凝膠布局、絕對佈局和表格顯示佈局等。要想掌握佈局與定位還須要本身多多實踐，只有在編程中才能得到提升。先寫這麼多吧，之後有時間的話再把實例補充進來……