前言
關於布局與定位是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建立布局有很多種可以使用的方法，比如浮動布局、凝膠布局、絕對布局和表格顯示布局等。要想掌握布局與定位還需要自己多多實踐，只有在編程中才能獲得提高。先寫這么多吧，以后有時間的話再把實例補充進來……