本站小編為你精心準(zhǔn)備了網(wǎng)頁設(shè)計(jì)CSS布局方式比對(duì)參考范文，愿這些范文能點(diǎn)燃您思維的火花，激發(fā)您的寫作靈感。歡迎深入閱讀并收藏。

1CSS布局技術(shù)概述

CSS（CascadingStyleSheet）中文譯為層疊樣式表。它是一門經(jīng)過標(biāo)準(zhǔn)化的WEB標(biāo)準(zhǔn)。最早是在1996年由W3C組織審核通過并推薦使用。針對(duì)于網(wǎng)頁設(shè)計(jì)越來越趨向整體結(jié)構(gòu)化，web標(biāo)準(zhǔn)也將網(wǎng)頁拆分成了三個(gè)相對(duì)獨(dú)立的部分：結(jié)構(gòu)層（structure）,表現(xiàn)層（presentation）及行為層（behavior）。在基于標(biāo)準(zhǔn)的WEB開發(fā)中，css的作用就是負(fù)責(zé)控制網(wǎng)頁的表現(xiàn)層。如果我們把HTML比做是人的身體的話，CSS代碼我們就可以看成是穿在人身上的衣服。我們說什么是最完美的頁面布局方式？這是一個(gè)已經(jīng)困擾了設(shè)計(jì)者很多年的問題。CSS的主要功能被很多人誤以為就是那些特殊效果的實(shí)現(xiàn)。實(shí)際上，它的真正核心應(yīng)該在于強(qiáng)大的頁面布局能力，而并不是實(shí)現(xiàn)整個(gè)網(wǎng)站排版的一致性或細(xì)節(jié)上。也只有當(dāng)網(wǎng)頁布局和網(wǎng)頁內(nèi)容完美接合時(shí)，才能帶給用戶最好的體驗(yàn)。

2基于CSS布局的幾種方式

盒模型、流動(dòng)、浮動(dòng)、定位這四個(gè)概念，是最基礎(chǔ)也是最重要的。各種布局技巧的應(yīng)用都來源于此。選擇怎樣的布局方式主要取決于站點(diǎn)自身的類型和發(fā)展。在做決定之前權(quán)衡好它們的兩面性，找出適合站點(diǎn)的方案。下面，我們就現(xiàn)今網(wǎng)頁設(shè)計(jì)過程中較常用到的幾種網(wǎng)頁布局模式做個(gè)比較。

2.1固定寬度布局

固定布局(FixedLayout)，指最外面的包裹層(Wrapper)使用固定寬度，其內(nèi)部的各個(gè)部分均使用百分比或者是固定的寬度來表示。其關(guān)鍵是，外面的包裹層(或稱為容器)的寬度是固定不變的，所以不論訪問者的瀏覽器是怎樣的分辨率，他們所看到的網(wǎng)頁效果都是完全相同的。固定寬度布局是層疊樣式表中最早應(yīng)用的布局效果之一。有一個(gè)必須要解決的問題是所設(shè)計(jì)的頁面寬度到底為多少才合適？這涉及到關(guān)于現(xiàn)今用戶使用瀏覽器的分辨率大小的問題，據(jù)權(quán)威組織統(tǒng)計(jì)，使用640×480像素的用戶占3%，使用800×600像素的用戶占4%，使用1024×768像素的用戶占36%，而更高像素的用戶占到57%。與此同時(shí)，我們了解到五大知名網(wǎng)站，網(wǎng)頁設(shè)計(jì)時(shí)考慮用戶的默認(rèn)分辨率從800×600的主流設(shè)計(jì)三年內(nèi)完全轉(zhuǎn)化為1024×768。由此可知，現(xiàn)在主流用戶的屏幕分辨率應(yīng)該是1024×768或者更高。因此960像素成為了網(wǎng)頁設(shè)計(jì)的最佳寬度。它能夠非常好地展現(xiàn)網(wǎng)頁的內(nèi)容。960的網(wǎng)格系統(tǒng)已經(jīng)成為了固定寬度布局的行業(yè)標(biāo)準(zhǔn)了。固定寬度布局的優(yōu)點(diǎn)非常明顯，由于整個(gè)布局和布局中的每塊都有預(yù)設(shè)的寬度。設(shè)計(jì)人員能夠根據(jù)窗口的寬度和屏幕狀況，進(jìn)行一些精確度量的內(nèi)部元素的設(shè)計(jì)。如標(biāo)語、圖像、以及精確定位的文本等，這種方法非常的適用，而且容易使用。在設(shè)計(jì)方面方便定制。但是它相對(duì)于使用高分辨率的用戶來說，固定寬度布局會(huì)留下很大的空白。而屏幕分辨率過小時(shí)則會(huì)出現(xiàn)默認(rèn)的滾動(dòng)條。

2.2流式布局

流式布局(FluidLayout)，使用百分比來設(shè)置各個(gè)部分的具體寬度，以用來適應(yīng)不同的分辨率。流式布局的意思是從左到右從上到下來進(jìn)行自適應(yīng)。當(dāng)一行不能容納下內(nèi)容時(shí)則會(huì)自動(dòng)換行。正如它的名字一樣，這種布局具有彈性，可以自動(dòng)填充需要填充的部分。流布式局頁面相對(duì)于用戶來說更為友好，因?yàn)樗軌蜃赃m應(yīng)用戶的設(shè)置。在視覺上也能更加美觀。合適的技巧會(huì)使頁面在大屏幕、小屏幕、PDA小屏幕上都能有良好的呈現(xiàn)效果。所以有人說，這種布局可以讓人隨心所欲的控制自己的網(wǎng)站。當(dāng)然這種布局也是存在缺點(diǎn)的。如果在特別大的分辨率下，內(nèi)容會(huì)被拉成長(zhǎng)長(zhǎng)的一行，而當(dāng)瀏覽器窗口特別小的時(shí)候，行又會(huì)變得非常狹窄，逐行閱讀變得十分困難。還有就是圖像設(shè)計(jì)同標(biāo)語元素設(shè)計(jì)上也會(huì)出現(xiàn)問題。因?yàn)樵诹鞑季种校瑘D片需要隨著它包含的元素一起伸縮以適應(yīng)整體布局的擴(kuò)大。

2.3彈性布局

我們了解了在流式布局下，如果用戶瀏覽器窗口變寬，網(wǎng)頁內(nèi)容會(huì)變得很難閱讀。如果我們想要能夠隨著網(wǎng)頁元素大小的變化而變化的頁面布局。如字體變小，欄長(zhǎng)度及頁面寬度都會(huì)相應(yīng)減少，反之亦然。彈性布局，就能夠?qū)崿F(xiàn)。彈性布局如果用固定寬度布局轉(zhuǎn)換也非常簡(jiǎn)單，只需要對(duì)度量單位進(jìn)行修改即可。彈性布局（ElasticLayout），指網(wǎng)頁寬度不固定，當(dāng)你改變字體的大小，其他元素也會(huì)隨之發(fā)生變化。我們的布局以字體的大小來進(jìn)行參照變化的。那么這時(shí)我們就用em（字體高）而不是用像素值或百分比來定義寬度。em直接表現(xiàn)了字體的大小，因此如果用em表示一個(gè)包含框的寬度，當(dāng)你增加字體大小時(shí)，包含框的寬度也會(huì)隨之增加。這對(duì)于視力弱或有認(rèn)知障礙的人尤其有用。彈性布局的效果是明顯的，也受到廣大設(shè)計(jì)師的歡迎。但它也是有局限性的。如果不對(duì)這種布局設(shè)置一個(gè)最小寬度，當(dāng)用戶縮小窗口到足夠小時(shí)，會(huì)對(duì)布局產(chǎn)生的影響是致命的，造成布局嚴(yán)重錯(cuò)位。當(dāng)然圖片的隨比例縮放問題，也是一個(gè)有待解決的問題。

2.4可變固定寬度布局

可變固定寬度布局（VaribleFixedWidthLayout又叫做分辨率布局方式）指在CSS代碼中設(shè)計(jì)好關(guān)于各種瀏覽器類型所需要的不同尺寸，實(shí)現(xiàn)根據(jù)瀏覽器類型自動(dòng)調(diào)用不同的CSS布局。這種布局方法的思想是布局能夠自動(dòng)變化以提供最適合用戶窗口大小的布局效果。例如如果瀏覽器窗口足夠大，那么布局可能包括產(chǎn)生3個(gè)固定寬度的列，如果窗口寬度小于某個(gè)特定寬度時(shí)，那么某一列將無縫地放在另一列下面，從而產(chǎn)生一個(gè)兩列的布局。運(yùn)用該布局最可靠的方法就是通過用javascript來自動(dòng)評(píng)估窗口寬度，從而改變網(wǎng)頁上所運(yùn)用的CSS規(guī)則。這里指的寬度，是你正在瀏覽的窗口的寬度。使用這種技術(shù)，你可以將頁面的某一個(gè)視圖，作為默認(rèn)頁面，但是對(duì)于正在用大窗口訪問你的站點(diǎn)的用戶來說，你的頁面會(huì)相應(yīng)的放大至整個(gè)窗口。這種布局與流動(dòng)式布局不同。流動(dòng)式布局是當(dāng)你移動(dòng)瀏覽器時(shí)，它的尺寸在不斷的重新設(shè)置，而這種布局一旦達(dá)到了一個(gè)“觸發(fā)”點(diǎn)，布局才會(huì)改變并進(jìn)而影響到內(nèi)容。缺點(diǎn)是可能會(huì)導(dǎo)致一些跨平臺(tái)的問題出現(xiàn)。

2.5混合布局

顧名思義就是集中各種布局方法組合起來使用，取各自之所長(zhǎng)。可以想象，各種布局都有它的優(yōu)缺點(diǎn)。就例如彈性布局來說，它隨著元素的大小而相應(yīng)發(fā)生改變。可是萬一它們將東西放得太大，頁面超出了瀏覽器窗口，那怎么辦？可能這時(shí)，你就想取回一部分的控制權(quán)，于是就有了混合性布局。可以用em（字體高）定義文本的尺寸、包含框、導(dǎo)航區(qū)和內(nèi)容塊的寬度。但是卻為max-width屬性設(shè)置一個(gè)百分比，限制它變得過大，而造成的布局混亂。組合流式布局與彈性布局，以em設(shè)置寬度，以百分比設(shè)置最大寬度。這就是一種典型的混合式布局。這樣的布局方式在極端情況下都能有較好的整體效果。所以，我們說混合布局是結(jié)合各個(gè)布局的優(yōu)缺點(diǎn)及布局人員的需要而組合使用的一種良好的布局方式。

3小結(jié)

綜上所述，層疊樣式表運(yùn)用在網(wǎng)頁布局上的方式多種多樣，而我們?cè)u(píng)價(jià)哪種布局方式好的最終目標(biāo)不是針對(duì)它的各種優(yōu)缺點(diǎn)，而是從三個(gè)相關(guān)方面來進(jìn)行探討：可讀性、適應(yīng)性（方便性）及未來的可維護(hù)性。對(duì)于網(wǎng)頁設(shè)計(jì)人員來說，選擇布局方式同時(shí)來源于你網(wǎng)站客戶端的需求。只有充分考慮協(xié)調(diào)好以上各方面，才能實(shí)現(xiàn)網(wǎng)站價(jià)值的最大化，并且提高網(wǎng)站的競(jìng)爭(zhēng)力。