對同一種網(wǎng)頁布局以不同CSS技術實現(xiàn)的實例探討
2021-08-17 13:55:42吳瑕
軟件 2021年3期
摘 要：本文通過使用兩種主要的CSS布局技術實現(xiàn)一種常規(guī)網(wǎng)頁的布局，探討了這兩種布局技術在實際開發(fā)中的應用情況，以供參考。
關鍵詞：網(wǎng)頁布局;float;flex
中圖分類號：TP393.09 文獻標識碼：A DOI：10.3969/j.issn.1003-6970.2021.03.014
本文著錄格式：吳瑕.對同一種網(wǎng)頁布局以不同CSS技術實現(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前端技術的發(fā)展，網(wǎng)頁布局結構可實現(xiàn)千變萬化。一個良好的網(wǎng)頁布局，可以有效提升用戶瀏覽的舒適度，增強用戶體驗。要實現(xiàn)網(wǎng)頁布局可以使用到的CSS技術有多種，一般有浮動定位、絕對定位和相對定位，以及Flex彈性布局[1]。其中最流行的是浮動定位和彈性布局。為了探討這兩種重要的布局技術，下面用這兩種技術實現(xiàn)一種常規(guī)網(wǎng)頁的布局。
1 網(wǎng)頁布局實例
1.1 HTML部分
網(wǎng)頁布局中有一種很常規(guī)的頁面布局結構，頂部是標題欄，中間有三欄：左邊邊欄、內容、右邊邊欄，底部有腳注欄。布局結構如圖1所示。
要實現(xiàn)此網(wǎng)頁布局需先編寫這個頁面的HTML部分，再通過CSS布局技術實現(xiàn)。該布局頁面的HTML代碼如下：
1.2 外層容器布局
通常對整個頁面來說，最外層容器的布局主要有固定布局和液態(tài)布局兩種。所謂固定布局，就是讓最外層的容器固定列寬，頁面內容的寬度不會根據(jù)瀏覽器的大小而變化。如果以固定列寬的方式，對外層容器container設置，CSS代碼如下[2]：
.container {
width： 1020px;/*固定外層容器（頁面內容）寬度為1020px*/
margin： 0 auto; /*設置居中*/
}
液態(tài)布局是指最外層的容器列寬以百分比形式指定，頁面內容顯示的寬度根據(jù)瀏覽器的寬度自動調整。如果以液態(tài)方式布局，對container設置CSS代碼如下：
.container {
width： 80%;/*設置外層容器（頁面內容）的寬度始終占瀏覽器的80%*/
margin： 0 auto; /*設置居中*/
max-width： 1020px; /*最大寬度，防止布局在大型顯示器上過寬*/
min-width： 480px; /*最小寬度，防止布局過窄*/
}
這里說明一下，液態(tài)布局設置完成以后，當調整瀏覽器寬度，可以看到頁面寬度始終保持瀏覽器的80%，當然，超過最大和最小設置寬度時，將按設置的最大和最小寬度顯示。設計者可根據(jù)具體情況選擇采用哪種方式設置外層container。
1.3浮動定位float
在CSS中，有三種基本的定位可以使用：浮動定位（float：left/right）、絕對定位（position：absolute）、相對定位（position：relative）。
在實際開發(fā)中，浮動定位的使用要占大多數(shù)，因為其排版簡單，方便靈活，易于擴展。外層容器container設置好以后，通常使用浮動定位布局內部元素。絕對和相對定位是在浮動定位之后對一些局部元素定位的補充。
如果設置對象為float： left，對象將向左浮動，之后的內容流到當前對象的右側;設置對象為float：right，對象將向右浮動，之后的內容流向其左側。根據(jù)這個特點，采用浮動定位實現(xiàn)如圖1布局結構。CSS代碼如下[3]：
header{
background： #ADB96E;
height： 30px;/*設置標題欄背景顏色和高度*/
}
.sidebar1 {
width： 20%;/*設置左邊邊欄的寬度始終占container的20%（固定布局也可以精確設置為像素值）*/
height： 500px;/*因為沒有填充具體內容只做布局測試，所以高度暫定為500px，實際開發(fā)中高度一般由具體內容決定。*/
background： #EADCAE;
float：left/*設置左邊邊欄定位方式為左浮動*/
}
article {
width： 60%;/*設置內容欄的寬度始終占container的60%（固定布局也可以精確設置為像素值）*/
height： 510px;
background-color： #99CC33;
float：left; /*設置內容欄定位方式為左浮動*/
}
.sidebar2 {
width： 20%;/*設置右邊邊欄的寬度始終占container的20%（固定布局也可以精確設置為像素值）*/
height：500px;
background： #EADCAE;
float：right /*設置右邊邊欄定位方式為右浮動（中間三欄的總寬度剛剛等于container的寬度，也可以設置為左浮動，效果一樣）*/
}
footer {
clear：both; /*腳注欄要不受前面浮動影響，設置清除浮動*/
background： #CCC49F;
height： 20px;
}
這里說明一下，對于液態(tài)布局，因為整個頁面寬度是變化的，所以內部子元素寬度只能采用百分比形式設置;對于固定布局，可以利用盒模型精確設置內部每個子元素的寬度，也可以采用百分比形式。
1.4 flex布局
flex布局又稱為“彈性布局”，是W3C推出的一種較新的、靈活的布局方式，現(xiàn)已得到所有主流瀏覽器的支持。當頁面需要適應不同屏幕尺寸及設備類型時該布局方式可以確保元素在恰當?shù)奈恢谩?/p>
使用該布局需要理解幾個關鍵點：（1）在flex布局中，用于包含內容的組件稱為容器（container），容器內部的組件稱為項目（item）。容器允許包含嵌套。（2）通過給容器設置 display屬性為 flex，將其定義為彈性容器。在彈性容器中的項目，其排列方向由主軸的排列方向來決定。（3）默認情況水平方向從左往右為主軸，用戶也可以通過樣式屬性flex-direction：column將主軸與交叉軸（垂直方向自上而下）互換。（4）flex屬性可以分為容器屬性和項目屬性。容器屬性用于規(guī)定容器的布局方式，項目屬性用于設置容器內部項目的尺寸。
彈性布局的使用原則要遵循幾點：（1）給父容器添加屬性display： flex或display：inline-flex，即可讓父容器的內容彈性布局顯示，不再遵循默認文檔流的顯示方式。（2）容器添加彈性布局后，僅僅是容器內容（即項目）采用彈性布局，而容器自身在文檔流中的定位方式依然遵循默認文檔流。（3）容器設置為display： flex彈性布局后，顯示為塊級元素;容器設置為display：inline-flex彈性布局后，顯示為行級元素。（4）容器設為 flex布局后，其子元素的float、clear和vertical-align屬性將失效，而position屬性，依然生效。
弄清楚flex布局的基本原理之后，要實現(xiàn)如圖1的結構，就比較容易了。因為外層容器container主軸是垂直方向，邊欄及內容的主軸是水平方向，所以需要考慮用到容器嵌套，于是修改HTML將中間三欄放在一個content容器內，代碼如下[4]：
在CSS中設置布局，首先將外層容器container的display屬性設置為flex，flex-direction屬性設置為column，可以保證container的內部項目垂直居中。內嵌容器content也設置為彈性布局，并設置內部各項目尺寸的比例。CSS代碼如下：
.container{
display：flex;/*設置container為彈性布局*/
flex-direction：column; /*設置container的主軸方向為垂直方向*/
width：80%;
margin：0 auto;
max-width：1020px;
min-width：480px;
}
header{
background：#adb96e;
height：30px;
}
#content{
display：flex;/*設置內嵌容器content為彈性布局，默認主軸方向是水平方向*/
}
.sidebar1{
flex：1;/*該屬性簡寫設置，可理解為設置左邊邊欄占content容器的比例*/
height：500px;
background：#eadcae;}
article{
flex：3; /*設置內容欄占content容器的比例*/
height：520px;
background-color：#99cc33;
}
.sidebar2{
flex：1; /*設置右邊邊欄占content容器的比例*/
height：500px;
background：#eadcae;
}
footer{
background：#ccc49e;
height：20px;
}
這里說明一下，采用flex彈性布局，外層container可以是固定布局也可以是液態(tài)布局。通常使用彈性布局就是為了適應不同瀏覽器寬度的需求，所以建議采用液態(tài)布局。
2 結語
以上通過探討兩種主要的CSS布局技術，實現(xiàn)了一種常規(guī)網(wǎng)頁的布局。由于網(wǎng)頁布局技術很多，方法靈活，具體使用什么方式，可以根據(jù)具體的設計情況。比如想做一個垂直排列且水平方向居中的布局，現(xiàn)成的flex布局就可以又快又好的實現(xiàn)，所以flex特別適用于微信小程序開發(fā);使用浮動定位可以非常方便的增加模塊，或交換左右列的順序，所以在網(wǎng)頁布局中非常常見;絕對定位和相對定位常常在浮動定位之后作為補充，比如用在整個布局結束以后對標題欄里面的某些子元素的精確定位。因此在實戰(zhàn)開發(fā)中，有時候同一個頁面會使用到多種技術，開發(fā)者不要被技術本身限制，而應該根據(jù)具體需要，合理并高效的利用各種CSS布局技術。
參考文獻
[1] 周文潔.微信小程序開發(fā)零基礎入門[M].北京：清華大學出版社，2019.
[2] 張樹明.Web前端設計基礎[M].北京：清華大學出版社，2020.
[3] 薛玉倩.基于HTML5的Web前端設計與開發(fā)[J].內蒙古科技與經(jīng)濟，2019（17）：68-69.
[4] 孟秀霞.Web UI技術的研究與應用[D].北京：中國地質大學（北京），2019.
