對同一種網頁布局以不同CSS技術實現的實例探討

1、    對同一種網頁布局以不同css技術實現的實例探討    摘 要：本文通過使用兩種主要的css布局技術實現一種常規(guī)網頁的布局，探討了這兩種布局技術在實際開發(fā)中的應用情況，以供參考。關鍵詞：網頁布局;float;flex中圖分類號：tp393.09 文獻標識碼：a doi：10.3969/j.issn.1003-6970.2021.03.014本文著錄格式：吳瑕.對同一種網頁布局以不同css技術實現的實例探討j.軟件，2021，42（03）：049-051+057discussion on the realization of the same web

2、page layout with different css technologieswu 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 technolo

3、gies in practical development is discussed， for reference.【key words】：web layout;float;flex0 引言隨著web前端技術的發(fā)展，網頁布局結構可實現千變萬化。一個良好的網頁布局，可以有效提升用戶瀏覽的舒適度，增強用戶體驗。要實現網頁布局可以使用到的css技術有多種，一般有浮動定位、絕對定位和相對定位，以及flex彈性布局1。其中最流行的是浮動定位和彈性布局。為了探討這兩種重要的布局技術，下面用這兩種技術實現一種常規(guī)網頁的布局。1 網頁布局實例1.1 html部分網頁布局中有一種很常規(guī)的頁面布局結構，頂部是標題

4、欄，中間有三欄：左邊邊欄、內容、右邊邊欄，底部有腳注欄。布局結構如圖1所示。要實現此網頁布局需先編寫這個頁面的html部分，再通過css布局技術實現。該布局頁面的html代碼如下：1.2 外層容器布局通常對整個頁面來說，最外層容器的布局主要有固定布局和液態(tài)布局兩種。所謂固定布局，就是讓最外層的容器固定列寬，頁面內容的寬度不會根據瀏覽器的大小而變化。如果以固定列寬的方式，對外層容器container設置，css代碼如下2：.container width： 1020px;/*固定外層容器（頁面內容）寬度為1020px*/margin： 0 auto; /*設置居中*/液態(tài)布局是指最外層的容器列寬

5、以百分比形式指定，頁面內容顯示的寬度根據瀏覽器的寬度自動調整。如果以液態(tài)方式布局，對container設置css代碼如下：.container width： 80%;/*設置外層容器（頁面內容）的寬度始終占瀏覽器的80%*/margin： 0 auto; /*設置居中*/max-width： 1020px; /*最大寬度，防止布局在大型顯示器上過寬*/min-width： 480px; /*最小寬度，防止布局過窄*/這里說明一下，液態(tài)布局設置完成以后，當調整瀏覽器寬度，可以看到頁面寬度始終保持瀏覽器的80%，當然，超過最大和最小設置寬度時，將按設置的最大和最小寬度顯示。設計者可根據具體情況選擇

6、采用哪種方式設置外層container。1.3浮動定位float在css中，有三種基本的定位可以使用：浮動定位（float：left/right）、絕對定位（position：absolute）、相對定位（position：relative）。在實際開發(fā)中，浮動定位的使用要占大多數，因為其排版簡單，方便靈活，易于擴展。外層容器container設置好以后，通常使用浮動定位布局內部元素。絕對和相對定位是在浮動定位之后對一些局部元素定位的補充。如果設置對象為float： left，對象將向左浮動，之后的內容流到當前對象的右側;設置對象為float：right，對象將向右浮動，之后的內容流向其左側。

7、根據這個特點，采用浮動定位實現如圖1布局結構。css代碼如下3：headerbackground： #adb96e;height： 30px;/*設置標題欄背景顏色和高度*/.sidebar1 width： 20%;/*設置左邊邊欄的寬度始終占container的20%（固定布局也可以精確設置為像素值）*/height： 500px;/*因為沒有填充具體內容只做布局測試，所以高度暫定為500px，實際開發(fā)中高度一般由具體內容決定。*/background： #eadcae;float：left/*設置左邊邊欄定位方式為左浮動*/article width： 60%;/*設置內容欄的寬度始終占c

8、ontainer的60%（固定布局也可以精確設置為像素值）*/height： 510px;background-color： #99cc33;float：left; /*設置內容欄定位方式為左浮動*/.sidebar2 width： 20%;/*設置右邊邊欄的寬度始終占container的20%（固定布局也可以精確設置為像素值）*/height：500px;background： #eadcae;float：right /*設置右邊邊欄定位方式為右浮動（中間三欄的總寬度剛剛等于container的寬度，也可以設置為左浮動，效果一樣）*/footer clear：both; /*腳注欄要不受前面

9、浮動影響，設置清除浮動*/background： #ccc49f;height： 20px;這里說明一下，對于液態(tài)布局，因為整個頁面寬度是變化的，所以內部子元素寬度只能采用百分比形式設置;對于固定布局，可以利用盒模型精確設置內部每個子元素的寬度，也可以采用百分比形式。1.4 flex布局flex布局又稱為“彈性布局”，是w3c推出的一種較新的、靈活的布局方式，現已得到所有主流瀏覽器的支持。當頁面需要適應不同屏幕尺寸及設備類型時該布局方式可以確保元素在恰當的位置。使用該布局需要理解幾個關鍵點：（1）在flex布局中，用于包含內容的組件稱為容器（container），容器內部的組件稱為項目（ite

10、m）。容器允許包含嵌套。（2）通過給容器設置 display屬性為 flex，將其定義為彈性容器。在彈性容器中的項目，其排列方向由主軸的排列方向來決定。（3）默認情況水平方向從左往右為主軸，用戶也可以通過樣式屬性flex-direction：column將主軸與交叉軸（垂直方向自上而下）互換。（4）flex屬性可以分為容器屬性和項目屬性。容器屬性用于規(guī)定容器的布局方式，項目屬性用于設置容器內部項目的尺寸。彈性布局的使用原則要遵循幾點：（1）給父容器添加屬性display： flex或display：inline-flex，即可讓父容器的內容彈性布局顯示，不再遵循默認文檔流的顯示方式。（2）容器

11、添加彈性布局后，僅僅是容器內容（即項目）采用彈性布局，而容器自身在文檔流中的定位方式依然遵循默認文檔流。（3）容器設置為display： flex彈性布局后，顯示為塊級元素;容器設置為display：inline-flex彈性布局后，顯示為行級元素。（4）容器設為 flex布局后，其子元素的float、clear和vertical-align屬性將失效，而position屬性，依然生效。弄清楚flex布局的基本原理之后，要實現如圖1的結構，就比較容易了。因為外層容器container主軸是垂直方向，邊欄及內容的主軸是水平方向，所以需要考慮用到容器嵌套，于是修改html將中間三欄放在一個cont

12、ent容器內，代碼如下4：標題邊欄內容邊欄腳注在css中設置布局，首先將外層容器container的display屬性設置為flex，flex-direction屬性設置為column，可以保證container的內部項目垂直居中。內嵌容器content也設置為彈性布局，并設置內部各項目尺寸的比例。css代碼如下：.containerdisplay：flex;/*設置container為彈性布局*/flex-direction：column; /*設置container的主軸方向為垂直方向*/width：80%;margin：0 auto;max-width：1020px;min-width：

13、480px;headerbackground：#adb96e;height：30px;#contentdisplay：flex;/*設置內嵌容器content為彈性布局，默認主軸方向是水平方向*/.sidebar1flex：1;/*該屬性簡寫設置，可理解為設置左邊邊欄占content容器的比例*/height：500px;background：#eadcae;articleflex：3; /*設置內容欄占content容器的比例*/height：520px;background-color：#99cc33;.sidebar2flex：1; /*設置右邊邊欄占content容器的比例*/heig

14、ht：500px;background：#eadcae;footerbackground：#ccc49e;height：20px;這里說明一下，采用flex彈性布局，外層container可以是固定布局也可以是液態(tài)布局。通常使用彈性布局就是為了適應不同瀏覽器寬度的需求，所以建議采用液態(tài)布局。2 結語以上通過探討兩種主要的css布局技術，實現了一種常規(guī)網頁的布局。由于網頁布局技術很多，方法靈活，具體使用什么方式，可以根據具體的設計情況。比如想做一個垂直排列且水平方向居中的布局，現成的flex布局就可以又快又好的實現，所以flex特別適用于微信小程序開發(fā);使用浮動定位可以非常方便的增加模塊，或交換左右列的順序，所以在網頁布局中非常常見;絕對定位和相對定位常常在浮動定位之后作為補充，比如用在整個布局結束以后對標題欄里面的某些子元素的精確定位。因此在實戰(zhàn)開發(fā)中，有時候同一個頁面會使用到多種技術，開發(fā)者不要被技術本身限制，而應該根據具體需要，合理并高效的利用各種css布局技術。參考文獻1 周文潔.微信小程序開發(fā)零基礎入門m.北京：清華大學出版社，2019.2 張樹明.web前端設計基礎m.北京：清華大學出版社，2020.3 薛