對同一種網(wǎng)頁布局以不同CSS技術(shù)實現(xiàn)的實例探討

摘 要：本文通過使用兩種主要的CSS布局技術(shù)實現(xiàn)一種常規(guī)網(wǎng)頁的布局，探討了這兩種布局技術(shù)在實際開發(fā)中的應(yīng)用情況，以供參考。

關(guān)鍵詞：網(wǎng)頁布局;float;flex

中圖分類號：TP393.09 文獻標(biāo)識碼：A DOI：10.3969/j.issn.1003-6970.2021.03.014

本文著錄格式：吳瑕.對同一種網(wǎng)頁布局以不同CSS技術(shù)實現(xiàn)的實例探討[J].軟件，2021，42（03）：049-051+057

Discussion on the Realization of the Same Webpage Layout with Different CSS Technologies

WU Xia

（Sichuan Vocational and Technical College Department of Computer Science， Suining? Sichuan? 629000）

【Abstract】：This article uses two main CSS layout techniques to achieve a regular web page layout， the application of these two layout technologies in practical development is discussed， for reference.

【Key words】：web layout;float;flex

0 引言

隨著Web前端技術(shù)的發(fā)展，網(wǎng)頁布局結(jié)構(gòu)可實現(xiàn)千變?nèi)f化。一個良好的網(wǎng)頁布局，可以有效提升用戶瀏覽的舒適度，增強用戶體驗。要實現(xiàn)網(wǎng)頁布局可以使用到的CSS技術(shù)有多種，一般有浮動定位、絕對定位和相對定位，以及Flex彈性布局[1]。其中最流行的是浮動定位和彈性布局。為了探討這兩種重要的布局技術(shù)，下面用這兩種技術(shù)實現(xiàn)一種常規(guī)網(wǎng)頁的布局。

1 網(wǎng)頁布局實例

1.1 HTML部分

網(wǎng)頁布局中有一種很常規(guī)的頁面布局結(jié)構(gòu)，頂部是標(biāo)題欄，中間有三欄：左邊邊欄、內(nèi)容、右邊邊欄，底部有腳注欄。布局結(jié)構(gòu)如圖1所示。

要實現(xiàn)此網(wǎng)頁布局需先編寫這個頁面的HTML部分，再通過CSS布局技術(shù)實現(xiàn)。該布局頁面的HTML代碼如下：

1.2 外層容器布局

通常對整個頁面來說，最外層容器的布局主要有固定布局和液態(tài)布局兩種。所謂固定布局，就是讓最外層的容器固定列寬，頁面內(nèi)容的寬度不會根據(jù)瀏覽器的大小而變化。如果以固定列寬的方式，對外層容器container設(shè)置，CSS代碼如下[2]：

.container {

width： 1020px;/*固定外層容器（頁面內(nèi)容）寬度為1020px*/

margin： 0 auto; /*設(shè)置居中*/

}

液態(tài)布局是指最外層的容器列寬以百分比形式指定，頁面內(nèi)容顯示的寬度根據(jù)瀏覽器的寬度自動調(diào)整。如果以液態(tài)方式布局，對container設(shè)置CSS代碼如下：

.container {

width： 80%;/*設(shè)置外層容器（頁面內(nèi)容）的寬度始終占瀏覽器的80%*/

margin： 0 auto; /*設(shè)置居中*/

max-width： 1020px; /*最大寬度，防止布局在大型顯示器上過寬*/

min-width： 480px; /*最小寬度，防止布局過窄*/

}

這里說明一下，液態(tài)布局設(shè)置完成以后，當(dāng)調(diào)整瀏覽器寬度，可以看到頁面寬度始終保持瀏覽器的80%，當(dāng)然，超過最大和最小設(shè)置寬度時，將按設(shè)置的最大和最小寬度顯示。設(shè)計者可根據(jù)具體情況選擇采用哪種方式設(shè)置外層container。

1.3浮動定位float

在CSS中，有三種基本的定位可以使用：浮動定位（float：left/right）、絕對定位（position：absolute）、相對定位（position：relative）。

在實際開發(fā)中，浮動定位的使用要占大多數(shù)，因為其排版簡單，方便靈活，易于擴展。外層容器container設(shè)置好以后，通常使用浮動定位布局內(nèi)部元素。絕對和相對定位是在浮動定位之后對一些局部元素定位的補充。

如果設(shè)置對象為float： left，對象將向左浮動，之后的內(nèi)容流到當(dāng)前對象的右側(cè);設(shè)置對象為float：right，對象將向右浮動，之后的內(nèi)容流向其左側(cè)。根據(jù)這個特點，采用浮動定位實現(xiàn)如圖1布局結(jié)構(gòu)。CSS代碼如下[3]：

header{

background： #ADB96E;

height： 30px;/*設(shè)置標(biāo)題欄背景顏色和高度*/

}

.sidebar1 {

width： 20%;/*設(shè)置左邊邊欄的寬度始終占container的20%（固定布局也可以精確設(shè)置為像素值）*/

height： 500px;/*因為沒有填充具體內(nèi)容只做布局測試，所以高度暫定為500px，實際開發(fā)中高度一般由具體內(nèi)容決定。*/

background： #EADCAE;

float：left/*設(shè)置左邊邊欄定位方式為左浮動*/

}

article {

width： 60%;/*設(shè)置內(nèi)容欄的寬度始終占container的60%（固定布局也可以精確設(shè)置為像素值）*/

height： 510px;

background-color： #99CC33;

float：left; /*設(shè)置內(nèi)容欄定位方式為左浮動*/

}

.sidebar2 {

width： 20%;/*設(shè)置右邊邊欄的寬度始終占container的20%（固定布局也可以精確設(shè)置為像素值）*/

height：500px;

background： #EADCAE;

float：right /*設(shè)置右邊邊欄定位方式為右浮動（中間三欄的總寬度剛剛等于container的寬度，也可以設(shè)置為左浮動，效果一樣）*/

}

footer {

clear：both; /*腳注欄要不受前面浮動影響，設(shè)置清除浮動*/

background： #CCC49F;

height： 20px;

}

這里說明一下，對于液態(tài)布局，因為整個頁面寬度是變化的，所以內(nèi)部子元素寬度只能采用百分比形式設(shè)置;對于固定布局，可以利用盒模型精確設(shè)置內(nèi)部每個子元素的寬度，也可以采用百分比形式。

1.4 flex布局

flex布局又稱為“彈性布局”，是W3C推出的一種較新的、靈活的布局方式，現(xiàn)已得到所有主流瀏覽器的支持。當(dāng)頁面需要適應(yīng)不同屏幕尺寸及設(shè)備類型時該布局方式可以確保元素在恰當(dāng)?shù)奈恢谩?/p>

使用該布局需要理解幾個關(guān)鍵點：（1）在flex布局中，用于包含內(nèi)容的組件稱為容器（container），容器內(nèi)部的組件稱為項目（item）。容器允許包含嵌套。（2）通過給容器設(shè)置 display屬性為 flex，將其定義為彈性容器。在彈性容器中的項目，其排列方向由主軸的排列方向來決定。（3）默認(rèn)情況水平方向從左往右為主軸，用戶也可以通過樣式屬性flex-direction：column將主軸與交叉軸（垂直方向自上而下）互換。（4）flex屬性可以分為容器屬性和項目屬性。容器屬性用于規(guī)定容器的布局方式，項目屬性用于設(shè)置容器內(nèi)部項目的尺寸。

彈性布局的使用原則要遵循幾點：（1）給父容器添加屬性display： flex或display：inline-flex，即可讓父容器的內(nèi)容彈性布局顯示，不再遵循默認(rèn)文檔流的顯示方式。（2）容器添加彈性布局后，僅僅是容器內(nèi)容（即項目）采用彈性布局，而容器自身在文檔流中的定位方式依然遵循默認(rèn)文檔流。（3）容器設(shè)置為display： flex彈性布局后，顯示為塊級元素;容器設(shè)置為display：inline-flex彈性布局后，顯示為行級元素。（4）容器設(shè)為 flex布局后，其子元素的float、clear和vertical-align屬性將失效，而position屬性，依然生效。

弄清楚flex布局的基本原理之后，要實現(xiàn)如圖1的結(jié)構(gòu)，就比較容易了。因為外層容器container主軸是垂直方向，邊欄及內(nèi)容的主軸是水平方向，所以需要考慮用到容器嵌套，于是修改HTML將中間三欄放在一個content容器內(nèi)，代碼如下[4]：

在CSS中設(shè)置布局，首先將外層容器container的display屬性設(shè)置為flex，flex-direction屬性設(shè)置為column，可以保證container的內(nèi)部項目垂直居中。內(nèi)嵌容器content也設(shè)置為彈性布局，并設(shè)置內(nèi)部各項目尺寸的比例。CSS代碼如下：

.container{

display：flex;/*設(shè)置container為彈性布局*/

flex-direction：column; /*設(shè)置container的主軸方向為垂直方向*/

width：80%;

margin：0 auto;

max-width：1020px;

min-width：480px;

}

header{

background：#adb96e;

height：30px;

}

#content{

display：flex;/*設(shè)置內(nèi)嵌容器content為彈性布局，默認(rèn)主軸方向是水平方向*/

}

.sidebar1{

flex：1;/*該屬性簡寫設(shè)置，可理解為設(shè)置左邊邊欄占content容器的比例*/

height：500px;

background：#eadcae;}

article{

flex：3; /*設(shè)置內(nèi)容欄占content容器的比例*/

height：520px;

background-color：#99cc33;

}

.sidebar2{

flex：1; /*設(shè)置右邊邊欄占content容器的比例*/

height：500px;

background：#eadcae;

}

footer{

background：#ccc49e;

height：20px;

}

這里說明一下，采用flex彈性布局，外層container可以是固定布局也可以是液態(tài)布局。通常使用彈性布局就是為了適應(yīng)不同瀏覽器寬度的需求，所以建議采用液態(tài)布局。

2 結(jié)語

以上通過探討兩種主要的CSS布局技術(shù)，實現(xiàn)了一種常規(guī)網(wǎng)頁的布局。由于網(wǎng)頁布局技術(shù)很多，方法靈活，具體使用什么方式，可以根據(jù)具體的設(shè)計情況。比如想做一個垂直排列且水平方向居中的布局，現(xiàn)成的flex布局就可以又快又好的實現(xiàn)，所以flex特別適用于微信小程序開發(fā);使用浮動定位可以非常方便的增加模塊，或交換左右列的順序，所以在網(wǎng)頁布局中非常常見;絕對定位和相對定位常常在浮動定位之后作為補充，比如用在整個布局結(jié)束以后對標(biāo)題欄里面的某些子元素的精確定位。因此在實戰(zhàn)開發(fā)中，有時候同一個頁面會使用到多種技術(shù)，開發(fā)者不要被技術(shù)本身限制，而應(yīng)該根據(jù)具體需要，合理并高效的利用各種CSS布局技術(shù)。

參考文獻

[1] 周文潔.微信小程序開發(fā)零基礎(chǔ)入門[M].北京：清華大學(xué)出版社，2019.

[2] 張樹明.Web前端設(shè)計基礎(chǔ)[M].北京：清華大學(xué)出版社，2020.

[3] 薛玉倩.基于HTML5的Web前端設(shè)計與開發(fā)[J].內(nèi)蒙古科技與經(jīng)濟，2019（17）：68-69.

[4] 孟秀霞.Web UI技術(shù)的研究與應(yīng)用[D].北京：中國地質(zhì)大學(xué)（北京），2019.