CSS布局高級技巧

margin和padding總是有可能要用到，而產生的問題如何解決呢？由於瀏覽器解釋容器寬度的方法不同：IE 6.0 Firefox Opera等是真實寬度=width+padding+border+marginIE5.X真實寬度=width-padding-border-marginIE中有浮動對象的雙倍距離之BUG（IE Doubled Float-Margin Bug ）, 這裡還需要具體問題具體解決，下面是解決辦法：IE Bug--浮動對象外補丁的雙倍距離很明顯，第一種下很完美的布局在第二種情況下後果是很凄慘的！解決的方法是hackdiv.content { width:400px; //這個是錯誤的width，所有瀏覽器都讀到了voice-family: ""}""; //IE5.X/win忽略了""}""後的內容voice-family:inherit;width:300px; //包括IE6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的} html>body .content { //html>body是CSS2的寫法width:300px; //支持CSS2該寫法的瀏覽器(非IE5)有幸讀到了這一句} div.content { width:300px !important; //這個是正確的width，大部分支持!important標記的瀏覽器使用這裡的數值width(空格)/**/:400px; //IE6/win不解析這句，所以IE6/win仍然認為width的值是300px；//而IE5.X/win讀到這句，新的數值(400px)覆蓋掉了舊的，因為!important標記對他們不起作用} html>body .content { //html>body是CSS2的寫法width:300px; //支持CSS2該寫法的瀏覽器有幸讀到了這一句} 具體解釋點擊下面鏈接查看XHTML+CSS兼容性解決方案小集CSS之兼容瀏覽器篇列等高技巧n行n列布局，每列高度（事先並不能確定哪列的高度）的相同，是每個設計師追求的目標，做法有：背景圖填充、加JS腳本的方法和容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法。背景圖填充法：xhtml:<div id="wrap"><div id="column1">這是第一列</div><div id="column1">這是第二列</div><div class="clear"></div></div>css:#wrap{ width:776px; background:url(/bg.gif) repeat-y 300px;}#column1{ float:left; width:300px;}#column2{ float:right; width:476px;}.clear{ clear:both;}就是將一個npx寬的一張圖片在外部容器縱向重複，定位到兩列交錯的位置縱向重複，在視覺上產生了兩列高度一樣的錯覺JS腳本法：www.blueidea.com/bbs/NewsDetail.asp?id=2453983代碼的原理基本就是這樣，讀取高度，判斷高度，高度相等容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法這篇文章說的很詳細了CSS布局自適應高度解決方法探索CSS實現三行三列等高布局滿屏高度布局（最窄770px最寬1024px經典布局）http://www.itlearner.com/article/2006/3227.shtml今天和一個網友兩天，他提到：給一個外國公司做網站，要求1.800x600滿屏。2.1024x767滿屏。3.1280下居中。4.不許用JS。我突然想起了這篇文章，哈哈！把它感覺不可思議的事情解決了！但是好像對於IE5有點問題啊！至此，把布局從最基本的知識點到高級應用整理了一遍，有遺漏的請大家跟貼補上，唯一的缺憾就是例子演示不夠，由於時間關係，見諒了！
推薦閱讀：