合理使用負邊距技術，可以幫助我們建立很多有意思的布局，比如自適應瀏覽器寬度的流體布局。國外關於使用負邊距建立這類布局的技術文件，我看到的最早是04年 ryan brill 發表在 a list apart 上的 《creating liquid layouts with negative margins》 （04年 - -！國內剛小部分人開始關注web標準化），本文亦可看做是對其的中文翻譯版。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。目前國內門戶很多都進行了改版，採用目前的主流–960px左右的寬度。
我認為，對於不太複雜的**，採用百分比進行架構是個不錯的主意。自適應布局的應用面還是蠻多的，比如論壇頁面、部落格頁面等。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
這裡需要的用到的技術關鍵點就一則：負邊距。
【簡單的布局】
ok。我們現在開始。假設現在需要給自己的部落格重新製作前台，介面的設計已經完成，就差**架構。我們希望部落格的介面可以做到：左側的主要部分是部落格文章內容，這部分需要在不同解析度瀏覽器下自適應寬度；而右側是側邊欄，這部分我們想做成乙個固定250px寬，預期效果圖如下：
這是個典型的兩欄布局，我們來做乙個初步的架構
頂部區域檢視測試頁面一，這是在沒有樣式表的情況下頁面的顯示效果。下面我們給它加上基本的樣式表隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
底部區域
body,p,h1,h2,ul定義mainer右邊距為-250px，使得右邊得以空出側邊欄的寬度，放置側邊欄。加上樣式表頁面請檢視測試頁面二。ok，現在我們看到左側的內容區域已經為側邊欄空出了相應的空間，使得側邊欄放置在了它應該出現的位置。#header
#footer
#mainer
#sidebar
【去除重疊部分】
我們這時會發現，左側的文字內容部分卻和側邊欄有重疊。這時候我們需要另外的乙個div層，來將左側文字部分設定乙個足夠大的右邊距，使其不與側邊欄重疊。並將左側內容部分與側邊欄部分設定不同背景色，以示區分。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。增加的css
#sidebar檢視測試頁面三#main
【自適應高度】
這時候我們又發現了乙個問題：如果左側長度繼續加長，那麼，右側側邊欄的下部會出現空白。我們希望可以實現視覺上的左右兩欄自適應等高。
這裡我們可以給外層的mainer div設定乙個右對齊縱向重複的背靜，的寬度我們設定為250px，即同側邊欄寬度相同。
css部分我們加上
#mainer多數時候我們並不想設定全部寬度為瀏覽器的寬度，多數時候我們會設定小於螢幕寬度的百分比。這種情況下，我們可以在左側內容及右側側邊欄外再套乙個div層，並在側邊欄下加上乙個清除浮動的層，來達到我們的目的。這個時候我們的xhtml會是下面這個樣子。
頂部區域相應的css隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
底部區域
檢視測試頁面四
【高階，三欄布局】
掌握了以上的方法，我們會發現製作乙個三欄的布局也是很簡單的！ok。下面我們把上面的例子變下，我們需要乙個三欄的布局，2側為固定寬度，中部為自適應寬度。這僅需要增加一點div。
頂部區域以及另外乙個背景隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
底部區域
css部分增加：
#main現在來看看我們的頁面，測試頁面五。#leftbar
#inmain
ok，大功告成~！！
使用負邊距建立自適應寬度的流體布局
隨著越來越大的瀏覽器的出現及普及，介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。目前國內門戶很多都進行了改版，採用目前的主流 960px左右的寬度。我認為，對於不太複雜的 採用百分比進行架構是個不錯的主意。自適應布局的應用面還是蠻多的，比如論壇頁面 部落格頁面...
使用負邊距建立自適應寬度的流體布局
隨著越來越大的瀏覽器的出現及普及，介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。目前國內門戶很多都進行了改版，採用目前的主流 960px左右的寬度。我認為，對於不太複雜的 採用百分比進行架構是個不錯的主意。自適應布局的應用面還是蠻多的，比如論壇頁面 部落格頁面...
兩邊寬度固定，中間寬度自適應的幾種布局方法
我們在用css設定頁面布局的時，歸根結底是要讓頁面中的塊按照我們的需求進行排列組合。以下是幾種常用的中間自適應，兩邊固定的布局方法。核心 將父元素設定為彈性盒布局 display flex html css father son1 son2 son3父元素不設定定位，三列子元素都設定為左浮動。自適應...