CSS網(wǎng)頁(yè)布局全精通
互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:25:26 作者：佚名 
我要評(píng)論
我要評(píng)論在本文中將使用四種常見(jiàn)的做法,結(jié)合CSS于結(jié)構(gòu)化標(biāo)記語(yǔ)法制作兩欄布局.很快地就會(huì)發(fā)現(xiàn),不用嵌套表格,間隔用的GIF也能做出分欄版面布局.
相關(guān)文章：CSS網(wǎng)頁(yè)布局開(kāi)發(fā)小技巧24則
稍后在"技巧延伸"中,將會(huì)討論Windows版Internet Explorer 5.0盒模型的問(wèn)題,以及繞
在本文中將使用四種常見(jiàn)的做法,結(jié)合CSS于結(jié)構(gòu)化標(biāo)記語(yǔ)法制作兩欄布局.很快地就會(huì)發(fā)現(xiàn),不用嵌套表格,間隔用的GIF也能做出分欄版面布局.
相關(guān)文章：CSS網(wǎng)頁(yè)布局開(kāi)發(fā)小技巧24則
稍后在"技巧延伸"中,將會(huì)討論Windows版Internet Explorer 5.0盒模型的問(wèn)題,以及繞過(guò)它的方法.也將分享一個(gè)以CSS達(dá)成等寬欄位的簡(jiǎn)單秘密.
要如何以CSS作出兩欄版面布局?
答案是有好幾種方法,為了帶領(lǐng)你起步,同時(shí)幫助你了解兩種常見(jiàn)方法的差異(浮動(dòng)與定位),因此先把焦點(diǎn)放在四種不同的方法上,在此每一種方法都能做出兩欄布局,同時(shí)具備頁(yè)首和頁(yè)尾.
我的愿望是:你能以本章作為指引開(kāi)始構(gòu)建一個(gè)網(wǎng)站,并發(fā)揮本書(shū)其他章節(jié)之內(nèi)的方法制作內(nèi)容.
我們將討論的四種方法都應(yīng)用在文檔的<body>與</body>標(biāo)簽之間,同時(shí)我會(huì)在開(kāi)始討論每種方法之前介紹將會(huì)使用的標(biāo)記語(yǔ)法結(jié)構(gòu).
為了讓你了解圍繞著每種方法的頁(yè)面結(jié)構(gòu),讓我們大致看一下還需要加入些什么:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Layouts</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
...方法示范...
</body>
</html>
為了讓你可以了解要達(dá)成的版面配置,請(qǐng)看圖12-1:這就是我們想要完成的分欄版面布局.
圖12-1 兩欄布局的框線(xiàn)圖
#p#
方法A:浮動(dòng)側(cè)邊欄
<div id="header">
...頁(yè)頭部分...
</div>
<div id="sidebar">
...側(cè)邊欄部分...
</div>
<div id="content">
...主體部分...
</div>
<div id="footer">
...頁(yè)腳部分...
</div>
上面就是我們要以CSS的float屬性制作成分欄布局的標(biāo)記源代碼,使用<div>標(biāo)簽把頁(yè)面元素分成幾個(gè)邏輯段落,每個(gè)都設(shè)定了唯一的id: #header: 包含標(biāo)題圖片,導(dǎo)航欄等 #sidebar: 包含額外的內(nèi)容鏈接與相關(guān)資訊 #content: 包含主要的文字內(nèi)容,也是頁(yè)面的焦點(diǎn)所在. #footer: 包含版權(quán)信息,作者,輔助鏈接等
把這些頁(yè)面段落拆開(kāi),能讓我們能完全控制版面布局,只要指定幾條CSS規(guī)則,就可以馬上完成兩欄布局.
為頁(yè)首與頁(yè)尾指定樣式
要把內(nèi)容結(jié)構(gòu)轉(zhuǎn)化成分欄布局的第一步,是為頁(yè)首,頁(yè)尾加上一點(diǎn)背景顏色以及一點(diǎn)內(nèi)補(bǔ)丁,這樣能使內(nèi)容更容易凸顯出來(lái).
#header {
padding: 20px;
background: #ccc;
}
#footer {
padding: 20px;
background: #eee;
}
為方法A的結(jié)構(gòu)加上前面這段CSS會(huì)使它顯示成圖12-2這樣,我為各個(gè)段落加了一些假象的內(nèi)容.
圖12-2 為頁(yè)首,頁(yè)尾指定樣式
當(dāng)然,在#header與#footer里,可以繼續(xù)為這些段落指定適當(dāng)?shù)臉邮?像是font-family,color,鏈接色彩等等.現(xiàn)在讓我們把兩欄版面制造出來(lái).
浮動(dòng)側(cè)邊欄
方法A的精華,在于它以float屬性把#sidebar放到主要內(nèi)容<div>的任一邊去.以這個(gè)例子來(lái)說(shuō),將它放到內(nèi)容的右側(cè),但是放到另一側(cè)當(dāng)然也行.
浮動(dòng)#sidebar的關(guān)鍵在于,在標(biāo)記源代碼中,必須出現(xiàn)在主內(nèi)容<div>之前,這樣一來(lái),側(cè)邊欄的頂部就會(huì)與主內(nèi)容的頂部排齊.
接著,為#sidebar加上float屬性,同時(shí)把它的寬度設(shè)為30%,指定背景顏色:
#header {
padding: 20px;
background: #ccc;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#footer {
padding: 20px;
background: #eee;
}
圖12-3是加上這段CSS之后的顯示效果,能看到側(cè)邊欄跑到右邊去了,而主要內(nèi)容在側(cè)邊欄范圍之內(nèi)流動(dòng).
圖12-3 把#sidebar浮動(dòng)到主要內(nèi)容的右側(cè)
真正的欄位
看看圖12-3,我們還沒(méi)有真正完成兩欄布局,為了完成這個(gè)效果還必須取#content這個(gè)<div>,指定與憂(yōu)側(cè)邊欄寬度相同的右外補(bǔ)丁,因此產(chǎn)生放置#sidebar的空間.
需要加上的CSS就是這么簡(jiǎn)單:
#header {
padding: 20px;
background: #ccc;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#content {
margin-right: 34%;
}
#footer {
clear: right;
padding: 20px;
background: #eee;
}
我們會(huì)發(fā)現(xiàn),我們給content設(shè)定的右外補(bǔ)丁大小比#sidebar還大4%,如此能在兩欄之間留下一點(diǎn)空位.圖12-4是以瀏覽器查看的效果,你可以發(fā)現(xiàn)只要為<div>設(shè)定右外補(bǔ)丁,就能造出第二欄的假象.
圖12-4 兩欄布局
同時(shí)要留意的是對(duì)#footer所加上的clear:right規(guī)則,這個(gè)規(guī)則很重要,能確保頁(yè)尾一定會(huì)出現(xiàn)在側(cè)邊欄和內(nèi)容區(qū)之后,而不受兩欄的長(zhǎng)度變動(dòng)影響,頁(yè)尾會(huì)避開(kāi)任何先前出現(xiàn)的float內(nèi)容.
現(xiàn)在有了能使用的兩欄布局,可以繼續(xù)為現(xiàn)在的CSS聲明加上更多邊界,背景,邊框與其他元素,使外觀更吸引人.
至今為止我們都以百分比設(shè)定寬度,以便造出靈活的布局(欄寬會(huì)自動(dòng)隨著使用者的視窗寬度縮放).我們也能以像素單位造出定寬布局,但是以像素指定內(nèi)外補(bǔ)丁大小時(shí),必須注意IE for Windows錯(cuò)誤解析CSS盒模型的問(wèn)題,你能在本章的"盒模型問(wèn)題"找到更多信息以及能用的解決方法.
#p#
方法B:雙重浮動(dòng)
<div id="header">
...header content here...
</div>
<div id="content">
...main content here...
</div>
<div id="sidebar">
...sidebar content here...
</div>
<div id="footer">
...footer content here...
</div>
方法A的缺點(diǎn)之一是:為了浮動(dòng)側(cè)邊欄,則必須在標(biāo)記源代碼之內(nèi)把側(cè)邊欄放到主內(nèi)容<div>的前面,關(guān)閉CSS的瀏覽器,文字瀏覽器,屏幕閱讀器與其他不支持CSS的設(shè)備將會(huì)在頁(yè)面主要內(nèi)容之前顯示(或念出)側(cè)邊欄的內(nèi)容.這樣實(shí)在不嚴(yán)謹(jǐn).
我們可以利用float做法,并避開(kāi)這個(gè)問(wèn)題,只要交換標(biāo)記源代碼里的主內(nèi)容,側(cè)邊欄<div>的位置(如上所示),然后以CSS將兩者浮動(dòng)到不同邊即可.
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#footer {
clear: both;
padding: 20px;
background: #eee;
}
通過(guò)把兩個(gè)<div>浮動(dòng)到不同方向,就能以最恰當(dāng)?shù)姆绞脚帕性创a(主內(nèi)容放在側(cè)邊欄前面),同時(shí)仍能得到圖12-4這樣的效果.
避開(kāi)兩邊
同樣重要的是,你必須將#footerdeclear屬性設(shè)為both,如此一來(lái)不管兩欄的長(zhǎng)度多長(zhǎng),頁(yè)尾總是顯示在最后,而標(biāo)簽源代碼的內(nèi)容順序也改善了.
#p#
方法C:浮動(dòng)主內(nèi)容
<div id="header">
...頁(yè)頭內(nèi)容...
</div>
<div id="content">
...主內(nèi)容...
</div>
<div id="sidebar">
...側(cè)邊欄...
</div>
<div id="footer">
...頁(yè)尾內(nèi)容...
</div>
還有個(gè)值得一提的方法,只需要用一個(gè)float屬性,同時(shí)標(biāo)記源代碼仍然可以將主內(nèi)容的<div>放在側(cè)邊欄之前.
只要將主內(nèi)容的<div>浮動(dòng)到左側(cè),并且為它設(shè)定小于100%的寬度,如此一來(lái)就能在右側(cè)留下足夠空間擺放側(cè)邊欄.
CSS內(nèi)容
方法C需要的CSS內(nèi)容再簡(jiǎn)單不過(guò)了,"一個(gè)float屬性",內(nèi)容區(qū)希望使用的寬度,以及兩欄之間留下的小邊界.
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
}
#sidebar {
background: #999;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
請(qǐng)注意我們并不需要定義側(cè)邊欄的寬度,因?yàn)樗鼤?huì)自動(dòng)填滿(mǎn)主內(nèi)容<div>用剩下的空間(在這個(gè)例子中是34%).
悲慘的背景
圖12-5就是以瀏覽器查看的成果,哦喔!在某些常用瀏覽器里,側(cè)邊欄的背景顏色會(huì)出現(xiàn)在主內(nèi)容區(qū)底下,由于側(cè)邊欄并未制定寬度,因此它想擴(kuò)到與瀏覽器視窗一樣寬.
圖12-5 浮動(dòng)內(nèi)容,但是側(cè)邊欄的背景顏色透了出來(lái)
這個(gè)部分只要我們能在側(cè)邊欄左邊加上寬度與內(nèi)容區(qū)相同的外邊界便可以避開(kāi)這個(gè)問(wèn)題.實(shí)際上我們會(huì)把外補(bǔ)丁設(shè)的稍微大一點(diǎn),以便在兩欄之間留下一點(diǎn)空白.
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
}
#sidebar {
margin-left: 70%;
background: #999;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
簡(jiǎn)單樸素
或者是,如果涉及不需要用到背景色的話(huà),那就不必設(shè)定邊界了,圖12-6是去掉整個(gè)#sidebar聲明,在為主內(nèi)容<div>加上一點(diǎn)右外補(bǔ)丁之后的結(jié)果.此時(shí)兩欄會(huì)共用頁(yè)面預(yù)設(shè)的背景色.
圖12-6 不使用背景色的浮動(dòng)內(nèi)容
CSS則能縮減成:
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
margin-right: 6%;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
除了加上左外補(bǔ)丁(或是省去背景色)之外,還有個(gè)使用背景圖片的替代做法能讓分欄具備背景色彩,我稍后會(huì)在本章的" 技巧延伸 "單元里提示這個(gè)小秘密.
#p#
方法D:定位
<div id="header">
...頁(yè)首內(nèi)容...
</div>
<div id="content">
...主內(nèi)容...
</div>
<div id="sidebar">
...側(cè)邊欄...
</div>
<div id="footer">
...頁(yè)腳內(nèi)容...
</div>
方法D是使用相同的標(biāo)記源代碼結(jié)構(gòu),然后以最有效率的方式排列<div>:把主內(nèi)容放在側(cè)邊欄之前,關(guān)閉樣式的瀏覽器,屏幕閱讀器會(huì)先收到主內(nèi)容部分,再收到側(cè)邊欄,在定位時(shí),標(biāo)記源代碼內(nèi)的順序與頁(yè)面元素出現(xiàn)的位置沒(méi)有關(guān)系.
能夠預(yù)測(cè)的高度
CSS內(nèi)容與前三個(gè)方法有點(diǎn)類(lèi)似,第一個(gè)差異是對(duì)頁(yè)首指定的像素高度,我們需要能夠預(yù)測(cè)的高度以便稍后為側(cè)邊欄定位.
在這里隨機(jī)選了一個(gè)數(shù)字,而這需要根據(jù)頁(yè)首使用的內(nèi)容調(diào)整,像是標(biāo)志,導(dǎo)航欄,搜索表單等.
#header {
height: 40px;
background: #ccc;
}
#footer {
padding: 20px;
background: #eee;
}
為各欄留下空間
接著,要為#content這個(gè)<div>設(shè)定右外補(bǔ)丁,就像前幾個(gè)方法一樣,這能為右側(cè)邊欄留下空間,稍后會(huì)使用絕對(duì)定位法(不是浮動(dòng))把右側(cè)邊欄放進(jìn)去.
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34%;
}
#footer {
padding: 20px;
background: #eee;
}
放進(jìn)側(cè)邊欄
最后,要使用絕對(duì)定位法把#sidebar這個(gè)<div>放到#content的邊界里,也必須去掉瀏覽器在頁(yè)面周?chē)由系念A(yù)設(shè)邊界,如此一來(lái)定位座標(biāo)在所有瀏覽器之內(nèi)就會(huì)一致了.
body {
margin: 0;
padding: 0;
}
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34%;
}
#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 30%;
background: #999;
}
#footer {
padding: 20px;
background: #eee;
}
在指定position:absolute之后,就能以top與right坐標(biāo)把#sidebar準(zhǔn)確的放到所想的位置(圖12-7).
圖12-7 以定位做出的兩欄布局效果
我們敘述了 "把 #sidebar這個(gè)<div>放到距離瀏覽器視窗上邊緣40像素,右邊緣0像素的位置",除此之外,也能用bottom和left指定坐標(biāo).
頁(yè)尾問(wèn)題
以先前的方法浮動(dòng)分欄時(shí),可以用clear屬性確保頁(yè)尾橫跨整個(gè)瀏覽器視窗的寬度,而不受主內(nèi)容,側(cè)邊欄的長(zhǎng)度影響.
在定位時(shí),側(cè)邊欄的文檔流獨(dú)立于整個(gè)頁(yè)面之外,所以只要側(cè)邊欄比內(nèi)容還長(zhǎng),它就會(huì)蓋住頁(yè)尾部分.(圖12-8)
圖12-8 側(cè)邊欄與頁(yè)尾重疊
面對(duì)這個(gè)問(wèn)題我常用的解決方法之一,是為頁(yè)尾指定與主內(nèi)容一樣的右外補(bǔ)丁,讓側(cè)邊欄能夠延伸超過(guò)頁(yè)尾.
使用這個(gè)方法的話(huà),CSS需要調(diào)整成這樣:
body {
margin: 0;
padding: 0;
}
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34%;
}
#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 30%;
background: #999;
}
#footer {
margin-right: 34%;
padding: 20px;
background: #eee;
}
這個(gè)解決方案在內(nèi)容很短,側(cè)邊欄很長(zhǎng)的頁(yè)面上看起來(lái)有點(diǎn)怪,但是它的確有效,結(jié)果可參照?qǐng)D12-9,示范了側(cè)邊欄避開(kāi)頁(yè)尾的情況.
圖12-9 外補(bǔ)丁和主內(nèi)容相同的頁(yè)尾
除了使用float屬性之外,也能用定位制造出分欄布局,讓我們看看最后一個(gè)選擇,方法D.
#p#
三人行
如果想做三欄布局的話(huà)該怎么辦?沒(méi)問(wèn)題,而且在使用絕對(duì)定位時(shí)很容易加入.只需要為主內(nèi)容,也為加上左外補(bǔ)丁,大小足夠容納第三欄即可.
另一個(gè)側(cè)邊欄能夠放在標(biāo)記源代碼之內(nèi)任何地方,因?yàn)闀?huì)需要再度使用絕對(duì)定位進(jìn)行布局.
假設(shè)加了第二個(gè)側(cè)欄,并將它取名# sidecolumn,接著以下面這段CSS為它空出位置,再把它放進(jìn)去.
body {
margin: 0;
padding: 0;
}
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 24%;
margin-left: 24%;
}
#sidecolumn {
position: absolute;
top: 40px;
left: 0;
width: 20%;
background: #999;
}
#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 20%;
background: #999;
}
#footer {
margin-right: 24%;
margin-left: 24%;
padding: 20px;
background: #eee;
}
剛才完成的部分是在主內(nèi)容,頁(yè)尾區(qū)空出左外補(bǔ)丁(避免重疊),與之前做右側(cè)邊欄一樣,接著以絕對(duì)定位法放進(jìn)新的#sidecolumn ,將它放在距離上邊緣40像素,距離左邊緣0像素的位置.
你有留意我們稍微修正了寬度以容納第三欄嗎?由于我們使用百分比,因此這個(gè)布局會(huì)隨著瀏覽器的寬度縮放,或者也可以為任何一欄指定像素寬度,以便使布局寬度固定下來(lái).
圖12-10是用瀏覽器查看這個(gè)示例的效果,一份以CSS絕對(duì)定位完成的靈活三欄布局.
圖12-10 以定位法作出的靈活三欄布局
#p#
歸納
我們?cè)谶@章稍微研究了以CSS規(guī)劃版面布局是能夠達(dá)成的效果.本章的目的是提供你發(fā)揮的基礎(chǔ),因此示范了兩種主要的做法: 浮動(dòng)和定位.
我希望你能繼續(xù)深入嘗試CSS布局技巧,去掉頁(yè)面內(nèi)的嵌套表格,并且換上更多瀏覽器與設(shè)備能讀取的靈活的結(jié)構(gòu)化的標(biāo)記語(yǔ)法.
如果你想知道更多關(guān)于CSS版面布局的資訊,那么一定要看看這些資源: "The Layout Reservoir" (http://www.bluerobot.com/web/layouts):這是個(gè)使用絕對(duì)定位制作多欄排版的絕佳示例. "From Table Hacks to CSS Layout: A Web Designer's Journey" (http://www.alistapart.com/articles/journey/): Jeffrey Zeldman撰寫(xiě)的絕佳教學(xué),記錄了建立雙欄布局所需的步驟. "CSS Layout Technoques: For Fun and Profit"(http://www.glish.com/css/): Eric Costello的各種CSS布局資源. "Little Boxes" (http://www.thenoodleincident.com/tutorials/box_lesson/boxes/html): Owen Briggs編寫(xiě)的許多CSS布局示例的漂亮界面. "CSS Zen Garden"(http://www.csszengarden.com/): "示范以CSS為基礎(chǔ)的設(shè)計(jì)能達(dá)成什么視覺(jué)效果". Dave Shea培養(yǎng)的"花園"以單一XHTML文檔展示讀者投稿的最新CSS設(shè)計(jì)(當(dāng)然也包含布局).這是個(gè)能看到CSS布局能力極致的神奇網(wǎng)站.
技巧延伸
現(xiàn)在我們經(jīng)過(guò)了建立基本CSS布局的基礎(chǔ),該是討論Windows版Internet Explorer 5與5.5版,以及它們錯(cuò)誤解析CSS盒模型這個(gè)不幸問(wèn)題的時(shí)候了.稍后也會(huì)分享一個(gè)通過(guò)平鋪背景圖片達(dá)成等高欄位布局的秘密技巧.
盒模型問(wèn)題
本章開(kāi)始的時(shí)候我們討論了建立多欄CSS布局的方法,只用width屬性定義每欄的寬度,當(dāng)你開(kāi)始為這些欄位加上補(bǔ)丁,邊框的時(shí)候,事情就變得有些復(fù)雜了.為什么?
不幸的是,Internet Explorer 5 for Windows在加上內(nèi)外補(bǔ)丁,邊框的時(shí)候,無(wú)法正確計(jì)算外包元素的寬度.
舉例來(lái)說(shuō),除了IE5 for Windows之外,所有支持CSS1的瀏覽器都會(huì)將外包元素的寬度計(jì)算為寬度,內(nèi)補(bǔ)丁,邊框三者相加,這是W3C希望所有瀏覽器處理CSS盒模型的方式.
但是IE5 for Windows會(huì)將邊框和內(nèi)補(bǔ)丁算在指定的寬度之內(nèi),搞混淆了?不用擔(dān)心,直接看看問(wèn)題會(huì)對(duì)你有所幫助.
眼見(jiàn)為實(shí)
比較一下圖12-11和12-12,圖12-11是個(gè)200像素寬的元素,兩側(cè)各有10像素的內(nèi)補(bǔ)丁,以及5像素的邊框,把水平部分的數(shù)值全加起來(lái),就能知道實(shí)際寬度為230像素.
圖12-11 盒模型的正確計(jì)算結(jié)果
圖12-12 IE5 for Windows 錯(cuò)誤的內(nèi)補(bǔ)丁,邊框,寬度計(jì)算結(jié)果
這是符合設(shè)計(jì)的盒模型:width屬性總是定義元素的內(nèi)容范圍,而內(nèi)補(bǔ)丁,邊框則會(huì)加到這個(gè)數(shù)值上.
因此,如果將側(cè)邊欄的寬度定義成200像素然后加上內(nèi)補(bǔ)丁和邊框,CSS的聲明如下:
#sidebar {
width: 200px;
padding: 10px;
border: 5px solid black;
}
把寬度設(shè)定為200像素,但是側(cè)邊欄實(shí)際需要230像素的空間,除了IE5 for Windows以外. IE5 for Windows 里側(cè)邊欄總共會(huì)占用200像素,把內(nèi)補(bǔ)丁和邊框都算在里面.
圖12-12 顯示的是當(dāng)width屬性指定為200像素時(shí),邊框和內(nèi)補(bǔ)丁會(huì)占用內(nèi)容空間,而不是內(nèi)容空間之外.
#p#
搖擺不定的寬度
我們反對(duì)為元素指定邊框,內(nèi)補(bǔ)丁的理由就是實(shí)際寬度會(huì)隨著使用者瀏覽器的不同而不同,就算在今天,幾百萬(wàn)使用IE5.x的用戶(hù)還是會(huì)看到明顯偏差的設(shè)計(jì)結(jié)果.同時(shí)有個(gè)重點(diǎn)必須記住:在這段文字撰寫(xiě)的時(shí)候,仍然有太多人在使用IE5以致我們不能忽視這個(gè)問(wèn)題.
所以該怎么辦?恩,幸運(yùn)的是,有個(gè)能修復(fù)這個(gè)問(wèn)題的技巧,這個(gè)技巧可以提供兩種不同的寬度,一種給IE5 for Windows,另一種給其他瀏覽器以便得到正確的盒模型.
盒模型Hack
親切的Tantek Celik寫(xiě)了盒模型Hack (http://www.tantek.com/CSS/Examples/boxmodelhack.html) 讓我們能提供兩種不同寬度:一種調(diào)整過(guò),只會(huì)被Window Internet Explorer 5使用,另一種則給其他所有瀏覽器使用.
通過(guò)IE5和IE5.5才有的CSS解析Bugs,可以指定一個(gè)略大的寬度(容納邊框和內(nèi)補(bǔ)丁),然后以實(shí)際的寬度覆蓋這個(gè)數(shù)值,讓其他瀏覽器能顯示出正確的結(jié)果.
源代碼示例
舉例來(lái)說(shuō),如果希望把側(cè)邊欄的內(nèi)容區(qū)域?qū)挾仍O(shè)為200像素寬,加上10像素內(nèi)補(bǔ)丁和5像素邊框,那么我們的CSS看起來(lái)就像:
#sidebar {
width: 200px;
padding: 10px;
border: 5px solid black;
}
對(duì)IE5 for Windows來(lái)說(shuō),則需要把寬度指定為230像素(加上兩側(cè)內(nèi)補(bǔ)丁和邊框的寬度),接著再以200像素覆蓋回來(lái),讓符合標(biāo)準(zhǔn)的瀏覽器得到正確的寬度.
#sidebar {
padding: 10px;
border: 5px solid black;
width: 230px; /* for IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
width: 200px; /* actual value */
}
留意IE5 for Windows的值先出現(xiàn),接著幾條讓IE5 for Windows認(rèn)為聲明已經(jīng)結(jié)束的規(guī)則,在此我們使用voice-family屬性,原因單純只是瀏覽器認(rèn)得它的話(huà)也不會(huì)改變視覺(jué)效果,最后指定實(shí)際的寬度,覆蓋最初的width規(guī)則,第二個(gè)width規(guī)則會(huì)被IE5 for Windows忽略.
結(jié)果在IE5 for Windows以及其他所有兼容CSS2的瀏覽器上看起來(lái)應(yīng)該完全相同.沒(méi)有使用這個(gè)hack的話(huà),IE5 for Windows的使用者就會(huì)看到比設(shè)計(jì)還瘦的欄寬.
對(duì)Opera友好
對(duì)于同樣擁有IE5 for Windows解析錯(cuò)誤的CSS2兼容瀏覽器來(lái)說(shuō),我們必須在每次使用盒模型補(bǔ)丁之后加上一段額外的聲明,這個(gè)稱(chēng)為"對(duì)Opera友好"的規(guī)則會(huì)讓所有符合標(biāo)準(zhǔn)的瀏覽器不被解析Bug卡住,確保他們能顯示出期望中的寬度.
#sidebar {
padding: 10px;
border: 5px solid black;
width: 230px; /* for IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
width: 200px; /* actual value */
}
html>body #sidebar {
width: 200px;
}
有了這段規(guī)則,就可以完全繞過(guò)IE5 for Windows錯(cuò)誤解析CSS盒模型的問(wèn)題,讓所有人都能看到正確的效果.
#p#
不止寬度
在這里以"盒模型Hack"達(dá)成顯示相同寬度,但是這個(gè)Hack其實(shí)能在任何想為IE5 for Windows提供不同CSS內(nèi)容時(shí)派上用場(chǎng).任何Hack都必須小心使用,同時(shí)只有在真正需要的時(shí)候才使用,記住 "盒模型Hack"的使用地點(diǎn)是個(gè)好主意,這樣才能在未來(lái)輕易拿掉它.
本文撰寫(xiě)時(shí)仍有上百萬(wàn)網(wǎng)絡(luò)使用者仍然使用IE5 for Windows,因此這個(gè)補(bǔ)丁不可或缺.
下面這段"偽裝的欄位"原始出自2004年一月份的A List Apart雜志(http://www.alistapart.com/articles/fauxcolumns/).
偽裝的欄位
關(guān)于我個(gè)人網(wǎng)站的設(shè)計(jì),我最常被問(wèn)到的問(wèn)題是:
"你是如何讓右欄的背景色一路延伸到整頁(yè)底部的?"
其實(shí)這只是個(gè)簡(jiǎn)單的概念,真的.而且這個(gè)概念能應(yīng)用到本章開(kāi)始所述的每種布局方法上.
垂直伸展
CSS最容易讓人感到挫折的性質(zhì)之一,是元素只會(huì)垂直伸展到真正需要的長(zhǎng)度.這代表如果在<div>里放一張200像素高的圖片,那么<div>就只會(huì)在頁(yè)面上延伸200像素.
當(dāng)你以<div>切割頁(yè)面段落,接著用本章開(kāi)始時(shí)的方法用CSS完成多欄布局時(shí),這就會(huì)成為有趣的困境,某一欄可能比其他欄都長(zhǎng)(圖12-13),當(dāng)你想為每欄選用獨(dú)特的背景色彩時(shí),視內(nèi)容多寡而定,做出兩個(gè)一樣長(zhǎng)的欄位可能十分困難.
圖12-13 長(zhǎng)度不一樣的欄位
有幾個(gè)做法能讓闌尾看起來(lái)一樣長(zhǎng),不受欄位包含的內(nèi)容的影響.我準(zhǔn)備分享我的解決方法(適用于絕對(duì)定位布局法),而這個(gè)方法實(shí)在是莫名其妙的...簡(jiǎn)單.
作弊
這個(gè)難以啟齒的簡(jiǎn)單秘訣,是用一個(gè)垂直排列的背景圖片作出彩色欄位的錯(cuò)覺(jué).在SimpleBits(http://www.simplebits.com/),我用了類(lèi)似圖12-14的背景圖片(為了示范而修改了比例):左邊有裝飾用條紋,中間留下寬闊的空白空間安放主要內(nèi)容,接著是一條1像素的邊框,然后是右側(cè)邊欄的淺棕色區(qū)域,跟著是反向的裝飾用條紋.
圖12-14 tile.gif 2像素高的背景圖片,預(yù)先分配好欄寬.
整個(gè)圖片沒(méi)有幾像素高,但是垂直平鋪之后,他就能造成一路到底的彩色欄位,不管欄位內(nèi)容多長(zhǎng)都無(wú)所謂.
CSS內(nèi)容
我為<body>標(biāo)簽加上這條CSS規(guī)則:
background: #ccc url(tile.gif) repeat-y 50% 0;
這會(huì)使整個(gè)頁(yè)面的背景色設(shè)為灰色,并且只垂直平鋪圖片(repeat-y),后面的50% 0代表背景圖片的定位:在這個(gè)例子里,是從瀏覽器視窗左邊緣算起50%(使圖片居中),并且緊貼上邊緣.
欄位定位
放好背景圖之后,在把我的定位布局放到上面,為左欄,右欄指定內(nèi)外補(bǔ)丁以確保它們會(huì)對(duì)齊正確位置:也就是背景圖創(chuàng)造出來(lái)的虛假欄位里(圖12-15).
圖12-15 平鋪背景圖創(chuàng)造出的彩色欄位
有個(gè)重點(diǎn)必須要注意:如果哪一欄指定了邊框,內(nèi)外補(bǔ)丁的話(huà),就仍然用Tantek Celik的盒模型Hack為IE5 for Windows修正盒模型問(wèn)題(參照本章稍早的"盒模型問(wèn)題").
或者是,如果能夠只使用外補(bǔ)丁,避免邊框與內(nèi)補(bǔ)丁的話(huà),就不需要加上盒模型Hack了,同時(shí),如果欄位的內(nèi)容只單純放在平鋪背景圖之上(透明顯示),那么要避免使用Hack也應(yīng)該很簡(jiǎn)單.
只要有用就好
雖然我以絕對(duì)定位法在自己的網(wǎng)站上做了兩欄布局,但是你也能用本章開(kāi)始時(shí)提過(guò)的其他方法達(dá)成一樣好的效果.同樣的想法仍然適用:平鋪背景圖,接著再浮動(dòng)某個(gè)欄位,使其覆蓋在模擬的欄位背景上.
這是個(gè)簡(jiǎn)單的概念,但是能夠解決設(shè)計(jì)者在構(gòu)建CSS布局時(shí)經(jīng)常遇到的挫折之一.
結(jié)論
我希望本章能帶給你開(kāi)始探索CSS布局的刺激世界,本章開(kāi)始時(shí)我們看到了四種構(gòu)建版面布局的方式,其中三種用了float屬性,還有一種用了絕對(duì)定位.一定要去看看我列出的額外資源,里面有更多布局的技巧和示范.
我們也討論了盒模型Hack在建立具備邊框,內(nèi)補(bǔ)丁的欄位時(shí)有何重要性,讓這些效果在IE5 for Windows以及其他瀏覽器上表現(xiàn)一致.
最后,我分享了一個(gè)有用的技巧,讓你在設(shè)計(jì)CSS布局時(shí)能做出等高欄位,這是某些人認(rèn)為十分基本,但實(shí)現(xiàn)上經(jīng)常讓人感到挫折的設(shè)計(jì)目標(biāo).只要小小一個(gè)平鋪背景圖就能搞定,讓你得到能夠抵達(dá)頁(yè)面底部(不管內(nèi)容多長(zhǎng))的欄位.
相關(guān)文章
本文主要介紹了css九宮格布局的五種方法，內(nèi)容包括grid布局、flex布局、table布局、float浮動(dòng)定位、inline-block+letter-spacing屬性這五種方法的實(shí)現(xiàn)，感興趣的可以了解下2023-09-18- 在Web開(kāi)發(fā)中，經(jīng)常會(huì)遇到需要將元素水平和垂直居中的情況,今天，將為大家分享幾種CSS方法，讓你的元素輕松居中，讓頁(yè)面更美觀吸引人，感興趣的小伙伴可以自己動(dòng)手試一試2023-09-08
- 相信大家在面試的時(shí)候也會(huì)經(jīng)常碰到css實(shí)現(xiàn)元素居中的方法，下面我介紹6種方法給大家，歡迎大家評(píng)論區(qū)交流2023-09-07
flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐
最近需要做個(gè)換行的布局，本文主要介紹了flex布局中使用flex-wrap實(shí)現(xiàn)換行的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需2022-06-16CSS布局之浮動(dòng)(float)和定位(position)屬性的區(qū)別
今天看到有朋友留言問(wèn)浮動(dòng)和定位有什么區(qū)別，如何使用？今天找了篇文章，講的比較通俗易懂，供大家參考2021-09-23
這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
div水平布局兩邊對(duì)齊的三種實(shí)現(xiàn)方法
這篇文章主要介紹了div水平布局兩邊對(duì)齊的三種實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2021-01-21
waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)
這篇文章主要介紹了waterfall瀑布流布局+動(dòng)態(tài)渲染的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2021-01-19
頁(yè)面中有間隔的方格布局如何完美實(shí)現(xiàn)方法
這篇文章主要介紹了頁(yè)面中有間隔的方格布局如何完美實(shí)現(xiàn)方法。文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-11-27css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式
這篇文章主要介紹了css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-10-28