精通CSS筆記第7章布局

所有css布局技術依賴於三個基本概念：定位、浮動和空白邊margin操縱

主要內容：

1. 讓設計在頁面中水平居中

2. 建立兩列和三列的基於浮動的布局

3. 建立固定寬度、流體和彈性布局

4. 將列拉長到整個可用的寬度

讓設計居中有兩個基本方法：乙個方法使用自動空白邊（margin auto）另乙個方法使用定位和負值空白邊

ps：怪異模式中的ie5.x和ie6不支援自動空白邊，幸運的是，ie將text-align:center誤解為讓所有的東西居中，而不只是文字，可以利用這一點方法讓主題標籤中的所有東西居中，包括容器div ,然後將容器的內容重新對準左邊

body

width:720px;

margin:0 auto;

text-align:left;

}這個trick對**無害，對**沒什麼影響

此容器現在在ie以及比較符合標準的瀏覽器中都會居中

使用定位和負值空白邊讓設計居中

使用自動空白進行居中的方法是最常用的，但是它需要乙個招數來滿足ie5.x的要求，而且還需要對兩個元素而不只是乙個元素應用樣式，因此，有些人喜歡使用定位和負值空白邊

使用css進行布局的幾種不同方式:包括絕對定位和使用負值空白邊，基於浮動的布局是最容易使用的方法

浮動元素脫離文件流，不占用文件流空間，不再對包含它們的邊框產生任何的影響，為解決這個問題，需要對各個點上的浮動進行清理。非常常見的做法，不對元素進行連續的浮動和清理，而是浮動幾乎所有東西，然後在整個文件的戰略點（比如頁尾）進行一次或兩次清理

以畫素為單位的布局叫做固定寬度布局，由於它是剛性的，有時候也稱作」冰布局「

固定寬度布局非常常見，它使開發人員對布局和定位有更大的控制能力

缺點：無論視窗的尺寸有多大，它們的尺寸總是不變的，因此它們無法利用可用空間。在高解析度的螢幕上，為800*600解析度建立的設計會縮小並且會出現在螢幕中間，反之，為1024*768解析度建立的設計在低解析度的螢幕上會導致水平滾動，隨著螢幕尺寸範圍越來越大，固定寬度設計的缺點越來越明顯

固定寬度布局另乙個問題：涉及行長和文字易讀性

固定寬度布局對於瀏覽器預設文字字型大小往往是合適的，但是當文字字型大小增加幾級，邊欄會擠滿空間並且行長太短，閱讀起來不舒服

在使用流體布局時，尺寸是用百分數而不是畫素來設定的

這使得流體布局相對於瀏覽器視窗進行伸縮。隨著瀏覽器視窗變大，列變寬。相反，隨著視窗變小，列的寬度變小。流體布局可以非常高效地使用空間，最好的流體布局甚至不會引起使用者的注意

但是在視窗寬度小的時候，行變得非常窄，很難閱讀。在多列布局中尤其如此，因此，有必要新增以畫素或em為單位的min-width，從而防止布局變得太宰

若是設計跨越整個瀏覽器的寬度，也很難閱讀。

要注意：首先，寬度不要跨越整個瀏覽器，而是讓容器只跨越寬度的乙個百分比，比如85%

還可以考慮用百分數設定填充和空白邊，這樣的話，padding和margin的寬度隨著視窗尺寸而變，防止列太快變得過寬

對於非常嚴重的情況也可以選擇以畫素設定容器的最大寬度，防止內容在大顯示器上變得極寬

彈性布局

彈性布局相對於字型大小（而不是瀏覽器寬度）來設定元素的寬度，通過以em為單位設定寬度，可以確保字型大小增加的時候整個布局隨之擴大，這樣可以將行長保持在可閱讀的範圍內，對於實力弱或者認知障礙的人士尤其有用

為了防止網頁變得比視窗寬，出現水平滾動條，可以設定max-width(px或100%)

注：ie6和更低版本不支援max-width

彈性-流體布局

精通CSS筆記 第7章 布局