佈局方式以及一些佈局經常使用方法

     前端頁面的佈局方式經常使用到的大概有三種方式分別爲普通文檔流佈局、浮動佈局和絕對佈局。下面將分別介紹着三類佈局。

　　a、普通佈局：前端中用到的標籤主要分爲塊級標籤（display：blcok）和行級標籤(display:inline)。塊級標籤爲必須佔一行的標籤元素，後面的元素必須在下一行顯示；行級標籤是顯示時後面的行級元素緊跟着前一個行級標籤顯示。普通佈局是在按照這些元素的特性進行界面的佈局，從左到右，從上到下的順序進行。另：普通元素的position爲static。

　　b、浮動佈局：浮動佈局包括左右浮動，即相對於普通佈局，該佈局元素會脫離普通佈局也是流佈局，至關於浮動元素會在普通佈局之上進行界面的佈局，會致使的問題就是會有普通佈局的部分被浮動佈局元素給遮擋，解決辦法爲清除浮動，即在被遮擋的普通元素上添加clear：both進行浮動的清除，使得普通佈局的元素不會跟浮動元素在一行顯示並另起一行進行dom文檔的渲染，清除浮動還有其餘辦法請自行查詢。另：浮動佈局中浮動的範圍是根據父元素的位置進行浮動位置定位。

　　c、絕對佈局：經常使用的position爲absolute時的元素會進行絕對佈局。絕對定位的參考位置爲其祖先元素中position爲非static的第一個元素。因此通常將參考位置元素設置爲position：relative。

     除了以上三種佈局方式，還有常使用的佈局辦法：

     橫向佈局：豎向佈局相對容易，只須要進行塊狀元素的上下堆疊，橫向佈局通常採用浮動的方式進行佈局，即多個塊狀元素進行元素的浮動並按照浮動的方向進行堆疊；另橫向佈局還能夠採用display：inline-block的方式進行，另ie6下能夠使用_display：inline的hack實現，能夠實現區域塊在父級元素寬度能容納 的狀況下橫向堆疊。

     居中方法：居中是佈局中經常使用方法，其中居中的方法分爲限制寬度的塊狀元素和行級元素。前者使用常規辦法margin：0 auto實現；後者使用text-align：center實現行級元素在其所在的塊級區域中的居中，另 ie6將塊級元素設置爲行級後也使用該辦法是實現居中。

     界面自適應：佈局的自適應其實主要是寬度的自適應，對於常見的分辨率的pc顯示器屏界面都能友好的適應，不出現混亂和疊壓的狀況，可是對於非pc顯示器的適應就要經過響應式進行，此處不討論。自適應辦法：對於界面總體佈局的區域寬度採用百分比寬度設置，例如」前端html文檔的基本佈局「中界面的區域塊的寬度採用百分比佈局，具體定位到什麼級別大小的區域塊具體看頁面自定。對於相對細級別的區域塊或者說是內容塊能夠使用絕對大小px進行佈局，以上基本實現自適應。

     以上爲當前項目中經常使用到的一些方法，爲了兼容ie低版本因此使用的都是比較傳統的辦法，隨着現代瀏覽器的發展以及ie低版本的放棄，更好的佈局方式未在本文羅列。以上爲我的項目總結，沒有涉及之處以及其中存在的問題請包涵並指出。

 

來自爲知筆記(Wiz)