3.2 CSS布局定位

CSS排版是一種比較新的排版理念，完全有別于傳統(tǒng)的排版方式。它首先從整體上對(duì)頁(yè)面使用Div標(biāo)記進(jìn)行分塊，其次對(duì)各個(gè)塊進(jìn)行CSS定位，最后在各個(gè)塊中添加相應(yīng)的內(nèi)容。通過(guò)CSS排版的頁(yè)面，更新十分容易，甚至頁(yè)面的拓?fù)浣Y(jié)構(gòu)都可以通過(guò)修改CSS屬性來(lái)重新定位。

提示

拓?fù)浣Y(jié)構(gòu)是指網(wǎng)絡(luò)中各個(gè)站點(diǎn)相互連接的形式，明確一點(diǎn)講就是指局域網(wǎng)中文件服務(wù)器、工作站和電纜等的連接形式。

3.2.1 浮動(dòng)定位

浮動(dòng)定位是CSS排版中非常重要的概念。浮動(dòng)的框可以左右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊緣。因?yàn)楦?dòng)框不在普通文檔流中，所以普通文檔流中的塊級(jí)框表現(xiàn)的就像浮動(dòng)框不存在一樣。float可選參數(shù)如表3-1所示。

· left：文本或圖像會(huì)移至父元素中的左側(cè)。

· right：文本或圖像會(huì)移至父元素中的右側(cè)。

· none：默認(rèn)值，文本或圖像會(huì)顯示于它在文檔中出現(xiàn)的位置。

下面介紹浮動(dòng)的幾種形式，普通文檔流的CSS代碼如下，頁(yè)面效果如圖3-4所示。

當(dāng)令left框向右浮動(dòng)時(shí)，它脫離普通文檔流并向右移動(dòng)，直到它的邊緣碰到包含框box的右邊框。left框向右浮動(dòng)的CSS代碼如下，頁(yè)面效果如圖3-5所示。

當(dāng)令left框向左浮動(dòng)時(shí)，它脫離普通文檔流并向左移動(dòng)，直到它的邊緣碰到包含框box的左邊框。因?yàn)樗辉偬幱谄胀ㄎ臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了main框，使main框從視圖中消失。left框向左浮動(dòng)的CSS代碼如下，頁(yè)面效果如圖3-6所示。

如果令三個(gè)框均向左浮動(dòng)，那么left框向左浮動(dòng)直到碰到包含框box框的左邊框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框，三個(gè)框均向左浮動(dòng)的CSS代碼如下，頁(yè)面效果如圖3-7所示。

如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)框，那么其他浮動(dòng)框向下移動(dòng)，直到有足夠空間的地方，其CSS代碼如下，頁(yè)面效果如圖3-8所示。

如果浮動(dòng)框的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被其他浮動(dòng)框卡住，其CSS代碼如下，頁(yè)面效果如圖3-9所示。

3.2.2 position定位

position定位與浮動(dòng)定位一樣，也是CSS排版中非常重要的概念。從字面意思上看position就是指定元素的位置，即指定元素相對(duì)于其父元素的位置和相對(duì)于它自身的位置。position可選參數(shù)如表3-2所示。

1．相對(duì)定位

對(duì)一個(gè)元素進(jìn)行相對(duì)定位，可在它所在的位置上，通過(guò)設(shè)置其垂直或水平位置，讓這個(gè)元素相對(duì)于原位置進(jìn)行移動(dòng)。如果將top值設(shè)置為40px，那么元素將向下移動(dòng)40px；如果將left值設(shè)置為40px，那么元素將向右移動(dòng)40px。設(shè)置相對(duì)定位的CSS代碼如下，頁(yè)面效果如圖3-10所示。

提示

在設(shè)置相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)與原來(lái)大小相同的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他元素。

2．絕對(duì)定位

相對(duì)定位被看作普通文檔流定位模型的一部分，因?yàn)樵氐奈恢檬窍鄬?duì)于它在普通文檔流中的位置的。與之相反，絕對(duì)定位使元素的位置與普通文檔流無(wú)關(guān)，因此不占據(jù)空間，普通文檔流中其他元素的布局就像絕對(duì)定位的元素不存在一樣。簡(jiǎn)單來(lái)說(shuō)，設(shè)置了絕對(duì)定位之后，元素就浮在網(wǎng)頁(yè)上面了。設(shè)置絕對(duì)定位的CSS代碼如下，頁(yè)面效果如圖3-11所示。

與相對(duì)定位的元素一樣，絕對(duì)定位的元素也可以在它的包含框中向上、向下、向左、向右移動(dòng)，這提供了很大的靈活性，可以直接將元素定位在頁(yè)面上的任何位置。

提示

關(guān)于定位，主要是要記住每種定位的意義。相對(duì)定位是相對(duì)于元素在普通文檔流中的初始位置進(jìn)行定位，而絕對(duì)定位是相對(duì)于最近的、已定位的父元素進(jìn)行定位，如果不存在已定位的父元素，那就相對(duì)于最初的包含框進(jìn)行定位。

因?yàn)榻^對(duì)定位的元素與普通文檔流無(wú)關(guān)，所以其可以覆蓋頁(yè)面上的其他元素?？梢酝ㄟ^(guò)設(shè)置z-index屬性來(lái)控制這些元素的堆放次序。z-index屬性的值越大，元素的堆放位置就越高。

技巧

相對(duì)于相對(duì)定位的父元素對(duì)元素進(jìn)行絕對(duì)定位，在大多數(shù)瀏覽器中實(shí)現(xiàn)得很好，但在IE5.X和IE6版本的IE瀏覽器中有一個(gè)問(wèn)題，如果試圖相對(duì)于相對(duì)定位的父元素設(shè)置元素的絕對(duì)定位，IE瀏覽器會(huì)相對(duì)于文檔定位這個(gè)元素。解決的方法是，設(shè)置相對(duì)定位元素的定位方式為相對(duì)（position:relative;），并設(shè)置相對(duì)定位元素的尺寸。

3．懸浮定位

當(dāng)將元素的position參數(shù)設(shè)置為fixed時(shí)，可定位于相對(duì)于瀏覽器窗口的指定坐標(biāo)。此可用值的位置通過(guò)left、top、right及bottom屬性來(lái)規(guī)定。不論窗口是否滾動(dòng)，元素都會(huì)留在那個(gè)位置。IE 6以下版本的IE瀏覽器不支持該屬性值。

4．默認(rèn)值

fixed可用值為默認(rèn)值。無(wú)特殊定位，元素出現(xiàn)在普通文檔流中（忽略top、bottom、left、right或z-index聲明）。

5．繼承

設(shè)置inherit可用值，子元素將會(huì)從其父元素那里繼承position屬性的值。