合理使用負邊距技術，可以幫助我們創建很多有意思的布局，比如自適應瀏覽器寬度的流體布局。國外關于使用負邊距創建這類布局的技術文檔，我看到的最早是04年 Ryan Brill 發表在 A List Apart 上的 《Creating Liquid Layouts with Negative Margins》 （04年 - -！國內剛小部分人開始關注WEB標準化），本文亦可看做是對其的中文翻譯版。

隨著越來越大的瀏覽器的出現及普及，網站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。目前國內門戶很多都進行了改版，采用目前的主流--960px左右的寬度。

我認為，對于不太復雜的網站，采用百分比進行架構是個不錯的主意。自適應布局的應用面還是蠻多的，比如論壇頁面、博客頁面等。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創建出符合WEB標準化的自適應布局。

這里需要的用到的技術關鍵點就一則：負邊距。

【簡單的布局】

OK。我們現在開始。假設現在需要給自己的博客重新制作前臺，界面的設計已經完成，就差代碼架構。我們希望博客的界面可以做到：左側的主要部分是博客文章內容，這部分需要在不同分辨率瀏覽器下自適應寬度；而右側是側邊欄，這部分我們想做成一個固定250px寬，預期效果圖如下：

這是個典型的兩欄布局，我們來做一個初步的架構

<div id="header">頂部區域</div>
<div id="mainer">
<h1>使用負邊距創建自適應寬度的流體布局</h1>
<p> 隨著越來越大的瀏覽器的出現及普及，網站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創建出符合WEB標準化的自適應布局。</p>
</div>
<div id="sideBar">
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<div id="footer">底部區域</div>

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表