【WebFrontEnd】一個頁面的多種HTML結構與多種CSS佈局

第一次寫文章，巧緊張！！！

這是一個很簡單的佈局，不過是個值得深思的問題。對於這種佈局，能夠有多種HTML、CSS寫法，那麼到底能夠有多少種寫法呢？

個人思路是根據HTML的不一樣佈局，寫不一樣的CSS。這裏爲了效果，因此都給元素添加了固定的高度。

一、第一種頁面結構

1-一、第一種CSS佈局：

這種寫法是一個清除了浮動的父元素含有兩個向左浮動的子元素，子元素各設置了寬度。

這裏必定要給aside一個右外邊距，否則兩個元素就會貼在一塊兒了。

這種寫法的缺點是不夠靈活，父元素和子元素和右外邊距都是固定寫死的，

若是父元素container寬度改變，aside寬度不變，邊距不變，那麼main的寬度要相應調整。

 1-二、第二種CSS佈局：

這種寫法是一個清除了浮動的父元素含有一個向左浮動的子元素，另外一個元素向右浮動，子元素各設置了寬度。

這種寫法也是不夠靈活，與第一種佈局同理，不過這種寫法aside元素能夠不用寫間距。

 1-三、第三種CSS佈局：

這種寫法是一個清除了浮動的父元素含有一個向左浮動的子元素並設置了寬度和右外邊距，main元素不用浮動也不用管寬度，只是設置了overflow:hidden; _zoo:1;。

這種寫法相對於第1、第二中寫法靈活，main元素能夠不用考慮設置寬度，當父元素寬度改變時，main元素寬度會自適應。

1-四、第四種CSS佈局：

這種寫法是一個清除了浮動的父元素含有一個向左浮動的子元素並設置寬度，main元素不用浮動也不用管寬度，只是設置左外邊距。

 這種寫法也是比較靈活啊，有木有！main元素自適應寬度，不用擔憂。

1-五、第五種CSS佈局：

這種寫法是父元素設置了相對定位，其中一子元素設置決定定位，main元素不用設置浮動和寬度。這種方法我常常使用在這種情景。我查看了360導航網頁，例如：

 

二、第二種頁面結構

有時咱們也會把右邊的主體內容放在上邊，側欄內容放在下面，這樣有利於重要內容先讀取。

2-一、對於這種佈局，我暫時只想到一種CSS寫法：

這也是左右浮動的兩個元素。

三、第三種頁面結構

這種佈局相對於前兩種佈局複雜一些。

3-一、第一種CSS佈局：

這種寫法是兩欄等高佈局的寫法，不過這種方法在IE6下有bug，aside不顯示了。

以上這些不一樣的方法涉及很多佈局的知識點：

浮動、清除浮動、包含塊、BFC、定位機制等等。

我以爲沒有最好的佈局，只有適合的佈局。在不一樣的狀況選擇不一樣的方法唄。

【扣扣兒】