在構建網頁的過程中，我們經常必須保證它的美觀性，使讀者看起來感到舒服。這時，我們首先要考慮的就是對於頁面的布局和定位了。
css中有以下三種布局：
流體布局其實就是在擴充套件瀏覽器視窗時，頁面上的內容會自動擴充套件，不論我們將瀏覽器調整到多大的寬度，布局都會擴充套件，以填充可用空間。這樣，使用者便能夠充分地利用他們的螢幕空間了。
顧名思義，在凍結布局中，內容的寬度是固定的，不會隨著瀏覽器視窗擴充套件或收縮。這樣一來，當使用者調整螢幕大小時，他的設計仍能保持原樣。凍結布局會鎖定元素，讓它們凍結在頁面上，這樣這些元素根本就不能移動，我們就能避免由於視窗擴充套件帶來的許多問題。不過也要付出代價，因為這樣就不能有效地使用瀏覽器寬度了。
進行凍結布局時，要在html中增加乙個新的元素，設定乙個id名，用它來包圍你所需要固定的內容。同時，還要在css中限制此id中所有元素和內容的大小，使它有乙個固定的寬度，這樣，即使瀏覽器的大小調整了，你所選的內容的寬度永遠會是你所設定的寬度，就可以說，我們有效地將這個以及其中包含的所有內容凍結在了頁面上，也就是凍結布局。
凝膠布局介於流體和凍結之間，其中內容寬度是固定的，但是外邊距會隨著瀏覽器視窗擴充套件或收縮。凝膠布局通常會把內容放在中間。這與凍結布局有著同樣的好處，不過通常更為美觀。在設定凝膠布局時，我們需要將左右外邊距的值設定為auto，這樣，瀏覽器會確定正確的外邊距是多少，另外還會確保左右外邊距相同，所以內容會居中。
利用css，實現一種布局通常有許多方法，都有自己的長處和短處。在實際應用中，我們應根據自己的需要靈活的用最恰當的方法選擇合適的布局。
position屬性可以設定為4個值：static（靜態）、absolute（絕對）、fixed（固定）和relative（相對）。
靜態定位是瀏覽器的預設方式，將元素放在頁面的正常流中。
絕對定位可以在頁面上精確地定位元素，實現一些漂亮的效果。乙個元素絕對定位時，瀏覽器首先要做的是將它從流中完全刪除，然後瀏覽器將這個元素放置在top和right屬性指定的位置上（也可使用bottom和left指定位置）。流中的元素不會將其內聯內容圍繞在乙個絕對定位元素周圍，它們完全不知道頁面上有這個絕對定位元素。這與浮動元素有所不同，因為流中的元素會調整它們的內容來適應浮動元素的邊界，而絕對定位元素對其他元素沒有任何影響。
關於絕對定位元素還有乙個重要的問題，那就是它可以分層放置，乙個元素可以放在另乙個元素上面。要區分它們之間的分層情況，必須借助乙個名為z-index的屬性，這是元素在乙個虛擬z軸上的順序。不過大多數情況下，你並不關心元素的z-index屬性，除非你要對元素建立某種特定的分層。通常只需要把z-inddex設定為1，這就足以確保元素出現在頁面中其他元素的上面，不過，如果有多個元素，而且你需要自行定位和分層，就要慎重地考慮這些元素的z-index值。下面簡單通過例子說明一下這個屬性的使用方法：
#div1
#div2
這些規則會把id為「div2「的元素放在id為」div1」的元素上面。
固定定位元素總是相對於瀏覽器視窗定位，頁面滾動時，固定定位的元素不會移動，頁面中的其他內容會在這些固定定位元素下面正常滾動。設定固定定位時要將position設定為fixed。
相對定位與絕對定位較為類似，只是元素仍然在頁面流中（還再它原本的位置上），然後按照你指定的量偏移，從而留出它們原先所在的空間。可以使用top、left、bottom或right偏移元素，就像元素絕對定位一樣。position屬性要設定為relative。
css 布局和定位
首先，我們說一下flow，實際上就是從html在上面開始，從上到下沿著元素流逐個顯示。對於塊元素，從上到下布局。對於塊元素中的內聯元素，從左上方流向右下方。對於內聯元素我們需要注意間距問題 1.對於併排放置的兩個內聯元素，中間外邊距不會重疊。所以最終兩個元素中間相差兩個外邊距之和。2.對於上下放置的...
CSS布局中定位問題
定位 將指定的元素擺放到頁面指定的位置 通過定位可以任意的擺放元素 通過position 屬性進行定位 static 預設值，沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位，也是絕對定位的一種 開啟元素定位後，可以通過left...
css元素定位和布局
一 定位 模型和定位是密不可分的，就像買了家具，要找地方放家具一樣，要不然沒地方放，放到人家家裡面，是沒有意義的。下面就介紹一下定位的屬性 position 定義元素在頁面的定位方式 left 指定元素和最近乙個具有定位設定的父物件左邊的距離 right 指定元素和最近乙個具有定位設定的父物件右邊的...