岳丹丹

（興義民族師范學(xué)院， 貴州 興義 562400）

網(wǎng)頁浮動(dòng)布局方式和伸縮盒布局方式的比較研究

岳丹丹

（興義民族師范學(xué)院， 貴州 興義 562400）

浮動(dòng)布局方式是當(dāng)下流行的網(wǎng)頁布局技術(shù)，伸縮盒布局方式是較新的網(wǎng)頁布局技術(shù)，對(duì)浮動(dòng)布局方式和伸縮盒布局方式進(jìn)行了比較研究，用簡(jiǎn)潔的代碼實(shí)例闡述了伸縮盒布局的優(yōu)勢(shì)所在。

網(wǎng)頁布局、浮動(dòng)布局float、伸縮盒布局Flexbox

Abstract:Float layout is the popular web development technology,the layout of the flexbox is a relatively new web technology.This paper compares float with flexboxlayout in web application research,and some simple example are given toillustrate the advantage offlexboxmethod.

Key words:Web layout；float；flexbox

網(wǎng)絡(luò)技術(shù)的迅速發(fā)展，使得網(wǎng)絡(luò)技術(shù)融入到了人們的日常生活、工作和學(xué)習(xí)中?；ヂ?lián)網(wǎng)上各種網(wǎng)站和基于Web的應(yīng)用大量涌現(xiàn)，這些都需要用網(wǎng)頁形式進(jìn)行呈現(xiàn)。網(wǎng)頁布局設(shè)計(jì)指的是根據(jù)網(wǎng)站內(nèi)容和建站目的等基本要素，運(yùn)用版面設(shè)計(jì)原理，將網(wǎng)頁上的視覺元素進(jìn)行合理配置與表現(xiàn)的過程。[1]在網(wǎng)站規(guī)劃建設(shè)中，網(wǎng)頁布局設(shè)計(jì)是至關(guān)重要的環(huán)節(jié)，網(wǎng)頁布局設(shè)計(jì)是否美觀、規(guī)范、合理，關(guān)系到網(wǎng)站能否吸引更多人的眼球，直接反映網(wǎng)站的點(diǎn)擊率正是網(wǎng)站的生命所在。所以網(wǎng)頁布局越來越受到重視。

一、網(wǎng)頁浮動(dòng)布局方式和伸縮盒布局方式的比較

網(wǎng)頁浮動(dòng)布局是目前常用的網(wǎng)頁布局方式，許多主流網(wǎng)站都采用浮動(dòng)布局的方式實(shí)現(xiàn)布局。伸縮盒布局方式是較新的技術(shù)，目前主要在移動(dòng)web中使用。下面對(duì)兩種布局方式進(jìn)行比較。

1.浮動(dòng)布局

浮動(dòng)（float）是基于CSS的現(xiàn)代Web設(shè)計(jì)用到的主要功能之一，可以用它來創(chuàng)建多列的網(wǎng)頁布局，如無序列表創(chuàng)建導(dǎo)航工具條，不是用table而又可創(chuàng)建類似表格的對(duì)其方式等。實(shí)現(xiàn)方法主要是：使用float屬性。float屬性的取值是：none（不浮動(dòng)），left（向左浮動(dòng)），right（向右浮動(dòng)），使元素浮動(dòng)到左邊或者右邊而成為一排。浮動(dòng)可以應(yīng)用于任何元素。使用float屬性后，浮動(dòng)的元素從正常文檔流中脫離出來，同時(shí)對(duì)布局中的其他元素造成一定的影響。

浮動(dòng)布局的局限：1）浮動(dòng)成行的每個(gè)塊元素的高度必須要一致，否則就會(huì)出現(xiàn)“鋸齒相錯(cuò)”，例如一個(gè)左浮動(dòng)列表布局，如果第一行有個(gè)列表高度高于其他列表，那就在第二行，第一個(gè)元素會(huì)沿著最高元素的右側(cè)對(duì)齊。2）浮動(dòng)會(huì)使當(dāng)前標(biāo)簽產(chǎn)生向上浮的效果，同時(shí)會(huì)影響到前后標(biāo)簽、父級(jí)標(biāo)簽的位置及width、height屬性，會(huì)出現(xiàn)高度塌陷、換行等問題，需要修復(fù)其帶來的副作用。

浮動(dòng)布局簡(jiǎn)單易學(xué)，容易掌握，由于網(wǎng)站總體布局改動(dòng)的幾率較小，所以目前PC網(wǎng)站大多仍然使用浮動(dòng)布局方式。

2.伸縮盒布局

Flexbox（伸縮盒布局）是CSS3中一個(gè)新的布局模式，為了現(xiàn)代網(wǎng)絡(luò)中更為復(fù)雜的網(wǎng)頁需求而設(shè)計(jì)。Flexbox由伸縮容器和伸縮項(xiàng)目組成，通過設(shè)置元素的display屬性為flex可以得到一個(gè)伸縮容器。設(shè)置為flex的容器被渲染為一個(gè)塊級(jí)元素，同時(shí)可以在不使用浮動(dòng)（float）和定位（position）的情況下實(shí)現(xiàn)塊級(jí)（block）元素的水平排列，并且可以把父元素的寬度按照比例分配子元素且子元素自適應(yīng)高度。[2]

Flexbox（伸縮盒布局）的優(yōu)勢(shì)：輕松實(shí)現(xiàn)自適應(yīng)、獨(dú)立的高度控制與對(duì)齊、獨(dú)立的元素順序、指定元素之間的關(guān)系、靈活的尺寸與對(duì)齊方式等。這些功能在以前的實(shí)現(xiàn)方式是使用表格、浮動(dòng)、行內(nèi)塊元素和其他CSS屬性來配合完成。Flexbox（伸縮盒布局）使得這些布局工作變得輕松起來。同時(shí)，PC瀏覽器網(wǎng)頁必須優(yōu)化以適應(yīng)于智能手機(jī)屏幕的場(chǎng)景。不僅僅需要元素減小尺寸，它們排列的順序方式也必須改變。Flexbox（伸縮盒布局）很容易實(shí)現(xiàn)這種需求。

Flexbox（伸縮盒布局）的不足：Flexbox（伸縮盒布局）規(guī)范的相關(guān)工作從2009發(fā)布到2012年9月最終定下來，W3C認(rèn)為當(dāng)前的語法是穩(wěn)定的，并鼓勵(lì)瀏覽器開發(fā)商去實(shí)現(xiàn)它。最新版本2012年版，除了Safari瀏覽器不支持外，其他最新瀏覽器都支持這個(gè)版本。但很多瀏覽器廠商都擁有一個(gè)私有前綴，增加了使用時(shí)的麻煩。

二、布局網(wǎng)頁實(shí)例比較

網(wǎng)頁設(shè)計(jì)中，橫向三列布局在網(wǎng)頁布局中經(jīng)常會(huì)使用，下面通過用兩種方式實(shí)現(xiàn)橫向三列布局來進(jìn)行比較。

網(wǎng)頁主體結(jié)構(gòu)代碼如下：

代碼說明：主體部分主要分為三塊，標(biāo)準(zhǔn)文檔流下三塊默認(rèn)為垂直排列。如圖1所示。

圖1 默認(rèn)文檔流布局

1.浮動(dòng)布局

浮動(dòng)布局代碼如下：

實(shí)現(xiàn)效果如圖2所示：

圖2 浮動(dòng)布局效果

當(dāng)去掉/*padding:10px;*/行的注釋，即增加文本的填充距離時(shí)，會(huì)出現(xiàn)錯(cuò)位和換行的情況，如圖3。

圖3 增加文本填充距離的效果

2.伸縮盒布局

伸縮盒布局實(shí)現(xiàn)代碼如下：