利用css進行網頁布局

網頁布局：

又稱版式布局，是網頁ui設計師將有限的視覺元素進行有機的排列組合，將理性的思維個性的化的表現出來，是一種具有個人藝術特色的視覺傳達方式。傳達資訊的同時有美感。網頁設計特點（相對紙媒來說）。特點：1、網頁可以自適應寬度2、網頁的長度理論上可以無限延長3：頁面為：頭部，主體部分，底部。

分欄又稱為分列：一列布局二列布局三列布局以及混合布局（用的最多），布局通過浮動和定位來完成(實現ui介面效果）。

一列布局：

body清除預設樣式，各個瀏覽器的預設邊距不一樣，這樣可以避免一些瀏覽器差異。當然也可以用*萬用字元把所有標籤元素重置一遍，如：*，但是不推薦，因為會把所有的標籤元素都給重置一遍，影響效能。需要用哪個就重置哪個吧。

水平居中，margin：0 auto

兩列布局：

因為寬度要自適應，所以要設定左側left的width:xx%；需要左右排列，所以設定float:left；另一側right也設定width和float(left和right都可以吧，再微調)

固定寬度的情況，left和right增加乙個父div#main,設定這個main的width，以及margin 0 auto；如果要精確控制left和right的寬度，可以使用px。

浮動（float）和絕對定位（position：absolute）可以讓元素脫離標準文件流。

三列布局--中間自適應：

不用浮動，用定位

左右兩邊分別定位（position:absolute;letf/right:xpx;top:xpx;)

中間部分使用margin值確定（margin:0 xpx 0 xpx) ---左右延生到了下面，margin值大於左右寬度才能看到隔斷區域

混合布局：我們可以把一列布局加入「左」和「右」改造為混合布局。

在中部mian中加入子div 分別是（左，右）。然後分別在style中加入「.left和.right」的樣式！「left和right」都要加浮動「float」，還可以在混合布局下進行更複雜的混合布局，可以將right定義為sub_right和sub_right 分為化為更為密集的混合布局。

清除浮動有兩種方法：1.clear:both 2.overflow:hidden

clear:both; //清除兩邊元素的浮動對他的影響

overflow: hidden; // 用在浮動元素本身清除對父元素的影響

其實網頁布局就是塊與塊之間的關係：1.挨著關係 2.巢狀的關係 3.疊加的關係進行各種組合。