網(wǎng)頁(yè)布局簡(jiǎn)史
時(shí)間：2023-10-03 13:36:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-03 13:36:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
網(wǎng)頁(yè)布局簡(jiǎn)史：（譯自http://grid-layout.com/histor.html，已取得原作者Steven D. Anderson授權(quán)）
Tim Berners-Lee
萬(wàn)維網(wǎng)（HTML和HTTP）的發(fā)明是Tim Berners-Lee的功勞。然而，Berners-Lee不是個(gè)設(shè)計(jì)師，他當(dāng)時(shí)在位于瑞士日內(nèi)瓦的歐洲核子研究組織（CERN）工作，是一名工程師、計(jì)算機(jī)科學(xué)家。他想開(kāi)發(fā)一個(gè)能夠在同事之間方便地分享研究成果的系統(tǒng)。研究成果往往是文字、圖表、圖片等多種形式，但當(dāng)時(shí)并沒(méi)有什么好辦法來(lái)分享這些東西。畢竟，那時(shí)的互聯(lián)網(wǎng)基本還只有文字。
Tim Berners-LeeEnrique Dans from Madrid, Spain [CC BY 2.0 (https://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons1989年，Berners-Lee提出了一個(gè)基于互聯(lián)網(wǎng)的超文本/超媒體系統(tǒng)。到了1990年，他又提出了第一份HTML規(guī)范。此外，他還編寫(xiě)了第一份web服務(wù)器規(guī)范（HTTP）和瀏覽器。
不過(guò)，Berners-Lee對(duì)排版興趣不大。因此，HTML最初的規(guī)范當(dāng)中沒(méi)有包含任何有關(guān)精確調(diào)整頁(yè)面布局的內(nèi)容。
這個(gè)鏈接包含了一個(gè)早期（1992年）的網(wǎng)頁(yè)：
http://info.cern.ch/hypertext/WWW/TheProject.html用于展示的HTML標(biāo)簽
1990年代中期，主流瀏覽器廠商（網(wǎng)景和微軟）添加了一些標(biāo)簽（tag），從而使得設(shè)計(jì)者可以用“展示類”的標(biāo)簽來(lái)控制頁(yè)面的外觀，例如
<b>讓文字成為粗體，
<i>則是斜體。還有一些其他標(biāo)簽，包括改變字號(hào)（如
<font size="+2">）、改變字體（如
<font face="verdana">）、改變?cè)仡伾ㄈ?code><font color="blue">和
<body bgcolor="#e6e6fa">），甚至連圖片對(duì)齊都能一定程度上利用
<img>標(biāo)簽的屬性進(jìn)行調(diào)整（如
<img src="smiley.gif" align="left">）。
然而，從web開(kāi)發(fā)者進(jìn)行網(wǎng)頁(yè)維護(hù)的角度來(lái)看，用HTML直接控制頁(yè)面布局很快就暴露出了巨大的問(wèn)題。每當(dāng)需要改動(dòng)時(shí)，就必須在多個(gè)網(wǎng)頁(yè)、多個(gè)位置進(jìn)行修改。此外，Tim Berners-Lee等web的創(chuàng)始人們最初的計(jì)劃中，HTML也是用來(lái)定義文章結(jié)構(gòu)的，而非外觀展示。
單像素GIF
當(dāng)時(shí)很流行的一個(gè)hack就是利用單像素透明圖片（gif）來(lái)控制元素間隔。由于圖片是透明的，所有被這個(gè)像素覆蓋的東西（如背景圖片或顏色）都可以顯示出來(lái)。
單像素圖片下載很快。設(shè)計(jì)者可以通過(guò)添加間隔屬性（如
<img src="smiley.gif" hspace=75">）或?qū)捀邔傩裕ㄈ?code><img src="single.gif" width="150">）來(lái)直接改變水平和豎直間隔。這在當(dāng)時(shí)常常被用來(lái)手工制造空白，或者在段落開(kāi)頭生成縮進(jìn)。
例子（譯者注：由于本站不能直接寫(xiě)html，這個(gè)例子無(wú)法正常顯示）：這里的空白...
...是用寬度為150px的單像素圖片創(chuàng)建的。
表格布局
展示標(biāo)簽和單像素圖片的用法終究都還比較局限。后來(lái)人們發(fā)現(xiàn)，對(duì)于頁(yè)面布局來(lái)說(shuō)，表格是一個(gè)有力的工具。到了1996年，表格布局流行了起來(lái)。最初的HTML規(guī)范當(dāng)中，表格的初衷其實(shí)是用來(lái)組織表狀（以行列劃分）數(shù)據(jù)的，但很快大家就意識(shí)到，單元格里面可以放各種HTML元素，于是整個(gè)表格就成了一個(gè)二維的頁(yè)面布局。
下圖的代碼展示了一個(gè)簡(jiǎn)單的表格布局。不難設(shè)想，頂行可以是頁(yè)眉，左邊欄是導(dǎo)航區(qū)，頁(yè)面的主要內(nèi)容則是在右邊。
Netscape網(wǎng)站早期也使用了表格布局。
幀（Frames）
在表格布局大行其道的同一時(shí)間，在HTML里分幀布局也很流行。通過(guò)使用
<frameset>和
<frame src>標(biāo)簽，一個(gè)HTML頁(yè)面中的一些區(qū)域可以包含另外的HTML文件。幀甚至還可以嵌套使用。下圖展示了如何用
<frameset>在一個(gè)頁(yè)面中包含5個(gè)不同的頁(yè)面。
顯然，這種方式意味著對(duì)于同一個(gè)頁(yè)面布局，開(kāi)發(fā)者需要同時(shí)維護(hù)多個(gè)文件。幀也還有其他問(wèn)題：有幀的頁(yè)面不方便收藏，給別人發(fā)鏈接的時(shí)候不知道該發(fā)哪個(gè)，對(duì)搜索引擎的檢索很不友好，等等。此外，跟表格布局類似，用分幀布局和web將結(jié)構(gòu)與展示相分離的初衷也是背道而馳的。
客戶端分區(qū)響應(yīng)圖（Image Map）
客戶端分區(qū)響應(yīng)圖是一種特殊的圖片，面積往往比較大，上面有一些區(qū)域可以直接點(diǎn)擊（即所謂的熱點(diǎn)），鏈接到其他頁(yè)面。圖像設(shè)計(jì)師很喜歡分區(qū)響應(yīng)圖，因?yàn)樗麄兛梢栽赑hotoshop中設(shè)計(jì)好非常復(fù)雜的圖片拿到瀏覽器中使用，視覺(jué)上仍然一模一樣。分區(qū)響應(yīng)圖中的熱點(diǎn)區(qū)域是用HTML代碼實(shí)現(xiàn)的，一般是矩形、圓形、或多邊形的坐標(biāo)。
下圖的例子中，一個(gè)矩形（旗子）、一個(gè)圓形（球）、以及一個(gè)多邊形（房子）分別被設(shè)置為了熱點(diǎn)區(qū)域。這些熱點(diǎn)區(qū)域可以通過(guò)類似下面的代碼鏈接到其他頁(yè)面。
坐標(biāo)計(jì)算以左上角為原點(diǎn)，單位是像素。所以，矩形區(qū)域參數(shù)中前兩個(gè)數(shù)是76和99，代表矩形區(qū)域的左上角距離圖片左邊界76像素，上邊界99像素。后兩個(gè)數(shù)（180和156）代表矩形右下角的坐標(biāo)，即距離圖片左邊界180像素，上邊界156像素。圓形坐標(biāo)的前兩個(gè)數(shù)代表圓心（310，239），然后是半徑（41）。多邊形坐標(biāo)由數(shù)對(duì)組成，每一對(duì)都代表一個(gè)點(diǎn)。
使用分區(qū)響應(yīng)圖就不需要再考慮頁(yè)面布局的事了，整個(gè)頁(yè)面就是一張大的圖片。不過(guò)，這也意味著下載時(shí)間變長(zhǎng)、修改起來(lái)非常麻煩。另外，跟表格和分幀布局類似，這也違反了web將內(nèi)容和展示分開(kāi)的目標(biāo)。
CASCADING STYLE SHEETS
1990年代末的一波進(jìn)展終于讓HTML不再那么混亂了。瀏覽器戰(zhàn)爭(zhēng)中的對(duì)手們（網(wǎng)景和微軟）達(dá)成了共識(shí)，決定逐漸淘汰展示類標(biāo)簽。與此同時(shí)，CSS（Cascading Style Sheet）的廣泛使用大大促進(jìn)了結(jié)構(gòu)和展示的分離。
CSS使得樣式信息可以獨(dú)立于頁(yè)面結(jié)構(gòu)（HTML），保存在一個(gè)單獨(dú)的文件中。對(duì)樣式的改動(dòng)則可以影響網(wǎng)站中多個(gè)甚至所有頁(yè)面的外觀。有需要的話，針對(duì)單個(gè)頁(yè)面，這些樣式又可以通過(guò)內(nèi)部樣式（在
<head>中的樣式）和內(nèi)聯(lián)樣式（在HTML標(biāo)簽中）被覆蓋。
W3C于1996年發(fā)布了第一版CSS推薦標(biāo)準(zhǔn)（見(jiàn)
https://www.w3.org/TR/REC-CSS1/）。更新后的CSS Level 2發(fā)布于1998年，支持了一些新的頁(yè)面布局技術(shù)，例如固定位置（
position: fixed）、絕對(duì)位置（
position: absolute）、相對(duì)位置（
position: relative）、z-index等。然而，CSS的普及很緩慢。直到世紀(jì)之交，才有瀏覽器完整地支持了CSS。
1999年，CSS 3的草稿也發(fā)布了。與CSS 1和CSS 2不同，CSS 3不是一個(gè)大規(guī)范，而是分成了若干個(gè)獨(dú)立的模塊。每個(gè)模塊各自定義了一些可以單獨(dú)發(fā)布和更新的特性。CSS 3是目前最新的CSS規(guī)范，而且還在持續(xù)不斷更新，其中包含了類似Flexbox和Grid之類的新布局工具。
DIV和“盒模型”
<div>元素起初是作為CSS的一部分被發(fā)明的，用來(lái)把頁(yè)面組織成邏輯上獨(dú)立的幾個(gè)部分。它的設(shè)計(jì)初衷其實(shí)是替代當(dāng)時(shí)最常用的表格布局。
<div>標(biāo)簽內(nèi)可以包含文字和圖片，（從而形成“盒子”）。這些“盒子”可以設(shè)置寬度和/或長(zhǎng)度，甚至還能有外邊距（margin）和內(nèi)邊距（padding）。
CSS 定位（Position）屬性
<div>默認(rèn)是塊級(jí)元素，如果不專門設(shè)置的話，多個(gè)
<div>會(huì)一個(gè)個(gè)地上下層疊排列。而最早能夠?qū)ｉT設(shè)置元素對(duì)齊的就是定位屬性（即
position:fixed）。定位屬性至今仍然是CSS規(guī)范的一部分，而且非常常用。定位屬性可以有5個(gè)不同的值：
- static
- relative
- fixed
- absolute
- sticky
position: static就是把元素仍然放在默認(rèn)的位置。
position: relative是相對(duì)于默認(rèn)位置來(lái)定位。
position: fixed是相對(duì)于可視區(qū)域（瀏覽器窗口）來(lái)定位，也就是說(shuō)即便滑動(dòng)了滾動(dòng)條，元素仍然在原來(lái)的位置。
position: absolute是相對(duì)于最近的非
static祖先元素來(lái)定位。
position: sticky則是根據(jù)滾動(dòng)條的位置定位。
有時(shí)候我們還希望元素重疊覆蓋。z-index就是用來(lái)解決疊放順序的。例如
z-index:2的元素會(huì)覆蓋在
z-index:1的元素上面。
絕對(duì)（
absolute）和相對(duì)（
relative）對(duì)于局部對(duì)齊一些元素很有用，但對(duì)于設(shè)置整個(gè)頁(yè)面的布局來(lái)說(shuō)還是不太適合。
浮動(dòng)布局
float浮動(dòng)屬性最早是為了實(shí)現(xiàn)圖片的文字環(huán)繞效果，允許的值包括
left、
right、
none、
inherit，但最常用的是
left和
right。下圖展示了浮動(dòng)的設(shè)計(jì)意圖：圖中的圖片被設(shè)置了
float:left，于是向左浮動(dòng)。
后來(lái)人們發(fā)現(xiàn)，浮動(dòng)
<div>元素可以用來(lái)有效地控制頁(yè)面上元素的位置。把
<div>設(shè)置成浮動(dòng)會(huì)使得對(duì)應(yīng)的盒子有一定的自適應(yīng)效果，多個(gè)浮動(dòng)元素一一排列，如果超出了容器元素寬度，一行放不下時(shí)還會(huì)自動(dòng)換行。
從CSS早期以來(lái)，浮動(dòng)布局一直都是最常用的定位方法。浮動(dòng)技術(shù)可以讓元素自動(dòng)跑到其他元素旁的空白，并根據(jù)容器元素的大小進(jìn)行調(diào)整。
浮動(dòng)例子
下圖是一個(gè)浮動(dòng)的例子，容器元素是900px寬。容器內(nèi)的所有盒子都設(shè)置成
float: left。盒子1也是900px寬，所以占滿了一行，盒子2只能從第二行開(kāi)始。盒子2是200px寬，盒子3是400px，盒子4是300px，加起來(lái)又占滿一行。盒子5放不下去了，于是換到了第三行，占200px。盒子6是700px寬，把第三行剩下的空間正好占滿。
懸置浮動(dòng)
浮動(dòng)布局常見(jiàn)的一個(gè)問(wèn)題就是懸置浮動(dòng)。假設(shè)都向左漂，當(dāng)某個(gè)盒子比它右邊的盒子還高時(shí)，右邊的盒子就可能被懸掛起來(lái)。在下圖中，盒子5本應(yīng)當(dāng)換行排列，但是卻被盒子3懸掛了起來(lái)。
清除浮動(dòng)
解決懸掛浮動(dòng)的辦法是對(duì)被掛起來(lái)的元素設(shè)置清除浮動(dòng)。對(duì)于上圖的盒子5，我們需要添加
clear: left或
clear: both，它就會(huì)跑到下一行，從最左邊開(kāi)始排列了。
反復(fù)清除浮動(dòng)是多年以來(lái)web開(kāi)發(fā)者的標(biāo)準(zhǔn)做法，但其實(shí)很痛苦。開(kāi)發(fā)者們一直在尋找更好的布局方法。
移動(dòng)和響應(yīng)式網(wǎng)站
2007年，iPhone上市了。到了2010年，智能手機(jī)在美國(guó)已經(jīng)占有27%的市場(chǎng)份額。2016年，這個(gè)數(shù)字更是達(dá)到了80%。在年輕、富有的群體中，智能手機(jī)的普及率還要更高一些：在18-29歲的人群中，92%的人都擁有智能手機(jī)。今天，用智能手機(jī)瀏覽網(wǎng)頁(yè)的人已經(jīng)比用電腦的還多了。
在智能手機(jī)普及之前，設(shè)計(jì)網(wǎng)頁(yè)時(shí)我們只需要考慮臺(tái)式機(jī)顯示器的分辨率。然而，移動(dòng)設(shè)備改變了這一切。web開(kāi)發(fā)者起初的辦法是為他們的網(wǎng)站設(shè)計(jì)移動(dòng)和臺(tái)式兩個(gè)版本，但同時(shí)維護(hù)兩個(gè)網(wǎng)站顯然非常困難。
現(xiàn)在的趨勢(shì)是設(shè)計(jì)一個(gè)能夠自適應(yīng)設(shè)備屏幕大小的網(wǎng)站。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design）力求讓頁(yè)面在不同大小的屏幕上都能很好地渲染，提供友好易用的體驗(yàn)。
下圖展示了網(wǎng)頁(yè)需要如何在不同大小的屏幕上自動(dòng)調(diào)整布局。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)依靠媒體查詢（media query）來(lái)決定什么時(shí)候改變布局。媒體查詢是用來(lái)確定設(shè)備分辨率的CSS代碼。根據(jù)媒體查詢結(jié)果，可以應(yīng)用不同的CSS布局。在下面的例子當(dāng)中，如果屏幕寬度不小于768px，header元素的文字就會(huì)以1.2em的字號(hào)來(lái)顯示。
@media only screen and (min-width: 768px) {header {font-size: 1.2em;}}CSS Grid尤其適合設(shè)計(jì)響應(yīng)式網(wǎng)頁(yè)。
CSS框架
隨著對(duì)響應(yīng)式網(wǎng)站需求的增長(zhǎng)，頁(yè)面布局的復(fù)雜性也與日俱增。這最終導(dǎo)致了一系列簡(jiǎn)化響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的CSS框架誕生。
框架其實(shí)就是一些預(yù)先寫(xiě)好的CSS，使得web開(kāi)發(fā)者可以直接使用這些CSS來(lái)輕松的設(shè)計(jì)網(wǎng)格布局。最廣為流傳的兩個(gè)框架是Foundation和Bootstrap，另外還有為數(shù)眾多的其他框架。
多數(shù)框架內(nèi)部都采用了12欄布局系統(tǒng)。12欄使得開(kāi)發(fā)者在一行中可以創(chuàng)建出多種類型的等寬欄。下圖展示了利用12欄布局系統(tǒng)在創(chuàng)建的1、2、3、4、6、12個(gè)等寬欄。
除了12之外，其他任何數(shù)字都不能給出這么多的布局選擇。另外，即便并不要求等寬，12欄布局也依然可以提供多樣化的選擇。
Bootstrap還提供了一系列其他組件，包括表單、按鈕、導(dǎo)航、以及相關(guān)的JavaScript擴(kuò)展。Bootstrap 3的布局系統(tǒng)是用浮動(dòng)（float）實(shí)現(xiàn)的。Bootstrap 4則是用Flexbox。Bootstrap預(yù)先寫(xiě)好的CSS文件可以幫助開(kāi)發(fā)者輕松地創(chuàng)建各種布局。
對(duì)于不同的屏幕大小，Bootstrap提供了四種（lg、md、sm、xs）寬度后綴?！發(fā)g”用于1170px的屏幕，“md”用于970px，“sm“用于750px，”xs“用于比750px小的屏幕。
舉個(gè)例子，如果想讓一個(gè)元素在臺(tái)式機(jī)屏幕（1170px或更寬）上占據(jù)8欄、在移動(dòng)設(shè)備上占據(jù)12欄的話，可以這么寫(xiě)：
<div class="col-lg-8 col-xs-12">Bootstrap的內(nèi)置類已經(jīng)預(yù)先寫(xiě)好了CSS樣式，會(huì)自動(dòng)地創(chuàng)建出對(duì)應(yīng)的布局。你只需要設(shè)置HTML元素的類，剩下的Bootstrap都會(huì)自動(dòng)處理。
下面是一個(gè)更貼近真實(shí)世界的例子和對(duì)應(yīng)的代碼。
Flexbox
Flexbox是一維的布局技術(shù)，用來(lái)在一個(gè)方向（行或列）上對(duì)元素進(jìn)行布局。它的設(shè)計(jì)初衷就是為了解決定位布局和浮動(dòng)布局的許多問(wèn)題。Flexbox的第一版工作草案于2009年發(fā)布，又經(jīng)歷的一些改動(dòng)，直到2013年才正式發(fā)布了工作草案。
圣杯布局
Flexbox（和CSS Grid）解決的問(wèn)題之一就是圣杯布局。（對(duì)于傳統(tǒng)的布局技術(shù)來(lái)說(shuō)，這種布局簡(jiǎn)直就像尋找傳說(shuō)中的圣杯一樣困難，因此而得名。）在同一行中創(chuàng)建出內(nèi)容多少不一、但高度一樣的幾欄多年來(lái)一直在困擾著web開(kāi)發(fā)者。使用原始的表格實(shí)現(xiàn)這種圣杯布局還簡(jiǎn)單些，但表格難以維護(hù)，語(yǔ)義上來(lái)說(shuō)也不是用來(lái)布局的。在Flexbox技術(shù)之前，所有的解決方案，包括給
div添加
table-property屬性、絕對(duì)定位、JavaScript輔助等等，都有各自的問(wèn)題。
下圖中，第二行共有三欄。中間一欄內(nèi)容最多，因而占滿了頁(yè)眉頁(yè)腳之間的所有空間。但第一和第三欄內(nèi)容較少，想在不添加內(nèi)容的前提下讓他們也占滿剩余空間就非常困難了。
下圖中展示了傳說(shuō)中的圣杯布局——三欄都一樣高。
Flexbox是一個(gè)巨大的進(jìn)步，大大簡(jiǎn)化了對(duì)齊和居中，可以不依賴內(nèi)容多少而直接創(chuàng)建出等高的列。
Flexbox是由flex容器組成的，容器內(nèi)則是flex項(xiàng)。容器既可以沿水平方向（行）布局，也可以沿豎直防線（列）布局。所選擇的布局方向（一般是行）被稱為主軸（main axis），另外一個(gè)方向則叫做交叉軸或橫軸（cross axis）。flex項(xiàng)沿主軸排布，填滿可用空間。通過(guò)嵌套使用flex容器，還可以在豎直和水平方向同時(shí)控制對(duì)齊。不過(guò)Flexbox本質(zhì)上還是一維的。
Flexbox是網(wǎng)頁(yè)布局的有力工具。
CSS Grid
基于CSS來(lái)實(shí)現(xiàn)某種網(wǎng)格（grid）布局的想法已經(jīng)存在多年了。CSS的兩位聯(lián)合發(fā)明人Bert Bos和H?kon Wium Lie都有相關(guān)的想法。
突破來(lái)自微軟。一些微軟員工一直在為他們的瀏覽器探索更好的布局工具，慢慢形成了一份提案。事實(shí)上，2011年的時(shí)候，微軟發(fā)布的IE 10中甚至用
-ms-的廠商前綴實(shí)現(xiàn)了一個(gè)grid布局草案。隨后的2012年，他們將規(guī)范的草案提交給了W3C。微軟還為他們的grid系統(tǒng)申請(qǐng)了一份專利，并通過(guò)了審批。在專利文檔中，這項(xiàng)技術(shù)被稱為基于樣式法則的內(nèi)容無(wú)關(guān)網(wǎng)格布局。
微軟的實(shí)現(xiàn)發(fā)布之后，一些web設(shè)計(jì)者開(kāi)始各種了嘗試。其中的一個(gè)，Rachel Andrew，認(rèn)為這種思路很有前途，于是開(kāi)發(fā)了一些演示和范例，用來(lái)說(shuō)明grid可以解決許多一直以來(lái)的布局難題。后來(lái)，一位Mozilla的設(shè)計(jì)者，Jen Simmons，創(chuàng)建了一個(gè)叫做Labs的網(wǎng)站，也來(lái)展示CSS Grid的強(qiáng)大。類似的努力推動(dòng)了W3C開(kāi)展進(jìn)一步的工作，最終將CSS Grid發(fā)布為一個(gè)規(guī)范。第一份規(guī)范的網(wǎng)址是：
https://www.w3.org/TR/css-grid-1瀏覽器對(duì)于CSS Grid的支持在2017年向前進(jìn)了一大步。Chrome、Firefox、Safari、Opera都在三月份發(fā)布了支持CSS Grid的版本，微軟則在十月份發(fā)布了支持CSS Grid的Edge。如下圖所示，通過(guò)caniuse.com可以查詢到，現(xiàn)在所有的主流瀏覽器全都支持CSS Grid了。
CSS Grid是第一個(gè)基于網(wǎng)格的二維布局系統(tǒng)，可以同時(shí)處理行和列。它解決了過(guò)去的許多布局問(wèn)題，還使一些想象中的設(shè)計(jì)成為現(xiàn)實(shí)。現(xiàn)在，我們?cè)僖膊恍枰?dòng)、各種hack、甚至是框架了，CSS Grid才是網(wǎng)頁(yè)布局的最強(qiáng)大工具。它終于來(lái)到了我們面前。
在線咨詢
