第三章 CSS網(wǎng)頁(yè)布局與定位

3.1 div

幾乎XHTML中的任何標(biāo)簽都可以用于浮動(dòng)與定位，而div首當(dāng)其沖。對(duì)于其他標(biāo)簽而言，往往有它自身存在的目的，而div元素存在的目的就是為了浮動(dòng)與定位。

3.1.1 div是什么

div是XHTML中制定的、專門(mén)用于布局設(shè)計(jì)的容器對(duì)象。在傳統(tǒng)表格式布局中，之所以能夠進(jìn)行頁(yè)面的排版布局設(shè)計(jì)，完全依賴于表格對(duì)象table。如今，接觸另一種布局方式——CSS布局。div正是這種布局方式的核心對(duì)象。僅從div的使用上說(shuō)，做一個(gè)簡(jiǎn)單的布局只需要依賴兩樣?xùn)|西：div與CSS。因此有人稱CSS布局為div+css布局。

3.1.2 如何使用div

只需要應(yīng)用<div></div>標(biāo)簽，將內(nèi)容放置其中，便可以應(yīng)用div標(biāo)簽。但是，div標(biāo)簽之聲一個(gè)標(biāo)識(shí)，作用是把內(nèi)容標(biāo)識(shí)成一個(gè)塊區(qū)域，并不負(fù)責(zé)其他事情。

div標(biāo)簽中除了直接放入文本外，也可以放入其他標(biāo)簽，還可以多個(gè)div進(jìn)行嵌套使用，最終目的是合理地標(biāo)識(shí)出內(nèi)容區(qū)域。

在使用div標(biāo)簽時(shí)，可以加入一些屬性，比如id、class、align、style等。在CSS布局方法，為了實(shí)現(xiàn)內(nèi)容與表現(xiàn)的分離，不應(yīng)當(dāng)將align、style兩個(gè)屬性編寫(xiě)在XHTML頁(yè)面的div標(biāo)簽中，因此，最終的div代碼只能擁有以下兩種形式：

3.1.3 理解div

在一個(gè)沒(méi)有任何CSS應(yīng)用的頁(yè)面中，即使應(yīng)用了div，也沒(méi)有任何實(shí)際效果。那又如何理解div在布局上的重大潛能呢？嘗試編寫(xiě)兩個(gè)div，用于左分欄與右分欄，代碼如下：

此時(shí)瀏覽器能夠看到的僅僅是上下兩行文字，并沒(méi)有看出div的任何特征。

要記住一點(diǎn)，div是一個(gè)block對(duì)象——塊對(duì)象（或者塊級(jí)元素）。XHTML中的所有對(duì)象，幾乎都默認(rèn)為兩種對(duì)象類型：

block塊狀對(duì)象：塊對(duì)象指的是當(dāng)前對(duì)象顯示為一個(gè)方塊。默認(rèn)顯示狀態(tài)下，它將占據(jù)整行，其他的對(duì)象只能在下一行顯示。
in-line行間對(duì)象（或者稱內(nèi)聯(lián)元素）：與block對(duì)象相反，它允許下一個(gè)對(duì)象與之共享一行進(jìn)行顯示。
塊狀div說(shuō)明，它在頁(yè)面中并非用于類似于文本那樣的行間排版，而是用于大面積，大區(qū)域的塊狀排版。

從頁(yè)面效果發(fā)現(xiàn)，網(wǎng)頁(yè)中除了文字之外，沒(méi)有任何其他效果。兩個(gè)div之間的關(guān)系只是前后關(guān)系，并沒(méi)有出現(xiàn)類似于表格的田字型，因此，div本身與樣式?jīng)]有任何關(guān)系。樣式是需要編寫(xiě)CSS來(lái)實(shí)現(xiàn)的。

在CSS布局中，所要做的工作可以簡(jiǎn)單歸集為兩件事：一是使用div將內(nèi)容標(biāo)記出來(lái)，二是為了這個(gè)div編寫(xiě)所需的CSS樣式。

3.1.4 并列與嵌套div結(jié)構(gòu)

div可以多層進(jìn)行嵌套使用，嵌套的目的是為了實(shí)現(xiàn)更為復(fù)雜的頁(yè)面排版。比如：

上述代碼中，為每個(gè)div定義了一個(gè)id名以供識(shí)別。可以看到id名為header、center和footer的3個(gè)div對(duì)象，它們之間屬于并列關(guān)系，在網(wǎng)頁(yè)布局結(jié)構(gòu)中以垂直方向布局而至上而下。

在center中，為了內(nèi)容的需要，又使用了一個(gè)左右分欄的布局，這兩個(gè)div本身是并列關(guān)系，而它們都處于center之中，因此它們與center形成了一種嵌套關(guān)系。

注：在適當(dāng)情況下，應(yīng)當(dāng)盡可能少地使用嵌套，以保證瀏覽器不用過(guò)分消耗資源來(lái)對(duì)嵌套關(guān)系進(jìn)行解析，簡(jiǎn)單的嵌套結(jié)構(gòu)更有利于對(duì)版式的理解與控制。

3.1.5 使用合適對(duì)象來(lái)布局

Web標(biāo)準(zhǔn)推薦使用盡可能符合頁(yè)面中元素意義的標(biāo)簽來(lái)標(biāo)識(shí)元素。在CSS布局中，要求盡可能多地使用XHTML所支持的各種標(biāo)簽，最終網(wǎng)頁(yè)對(duì)象都將擁有良好的可讀性。再通過(guò)進(jìn)一步的CSS定義，其樣式表現(xiàn)能力絲毫不比表格差，而且擁有比表格更多的樣式控制方法，這正體現(xiàn)了CSS布局的基本優(yōu)勢(shì)。

XHTML標(biāo)簽與功能簡(jiǎn)述：

上述列舉了全部的XHTML標(biāo)簽對(duì)象，但并非所有對(duì)象都會(huì)經(jīng)常使用到。

3.2 一列固定寬度

使用div設(shè)置一個(gè)帶有header、center和footer三個(gè)并列的布局，這3個(gè)div的基本表現(xiàn)形式正是：一列式布局。

一列式布局是所有布局的基礎(chǔ)，也是最簡(jiǎn)單的布局形式。一列式布局是一種固定寬度的布局樣式。

注：默認(rèn)狀態(tài)下，即在未設(shè)定div寬度的情況下，div將占據(jù)整行空間。

3.3 一列寬度自適應(yīng)

自適應(yīng)布局是一種非常靈活的布局形式，它能夠根據(jù)瀏覽器窗口的大小，自動(dòng)改變其寬度或高度值。

實(shí)際上，默認(rèn)狀態(tài)下的div將占據(jù)整行空間，即是寬度為100%的自適應(yīng)布局。一列適應(yīng)布局需要改變這個(gè)設(shè)置，將寬度由固定值改為百分比值的形式便可以完成。

 一列固定寬度居中

頁(yè)面整體居中是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的形式。在傳統(tǒng)表格式布局中，使用表格的align="center"屬性來(lái)實(shí)現(xiàn)表格居中，再在其單元格中裝內(nèi)容，實(shí)現(xiàn)整個(gè)頁(yè)面居中。

而div本身也支持align="center"屬性，同樣可以讓div呈現(xiàn)居中狀態(tài)。但是，CSS布局是為了實(shí)現(xiàn)表現(xiàn)與內(nèi)容的分離，align對(duì)齊屬性是一種樣式代碼，書(shū)寫(xiě)在XHTML的div屬性中，有違于分離原則，因此應(yīng)當(dāng)使用CSS的方法來(lái)實(shí)現(xiàn)內(nèi)容居中。居中的CSS樣式：margin: 0px auto;

除了直接使用數(shù)值外，margin還支持一個(gè)值叫auto的屬性值，auto值是讓瀏覽器自動(dòng)判斷邊距。在這里，給當(dāng)前的div左右邊距設(shè)置為auto，瀏覽器就會(huì)將div的左右邊距設(shè)為相同，從而呈現(xiàn)出居中的狀態(tài)。

注：margin屬性用于控制對(duì)象的上、右、下、左（順時(shí)針旋轉(zhuǎn)）4個(gè)方向的外邊距。當(dāng)margin使用兩個(gè)參數(shù)時(shí)，第一個(gè)參數(shù)表示上下邊距，第二個(gè)參數(shù)則表示左右邊距。

3.4 二列固定寬度

對(duì)于二列布局自然需要用到兩個(gè)div。分別使用兩個(gè)id為left和right的div。為了實(shí)現(xiàn)二列式布局，必須使用另一個(gè)屬性——float。

float屬性是CSS布局中非常重要的一個(gè)屬性，用于控制對(duì)象的浮動(dòng)布局。float的可選參數(shù)分別為：none/left/right。float使用none值時(shí)表示對(duì)象不浮動(dòng)，使用left時(shí)對(duì)象將向左浮動(dòng)，而使用right時(shí)對(duì)象將向右浮動(dòng)。

3.5 二列寬度自適應(yīng)

與一列自適應(yīng)寬度布局設(shè)置一樣，是通過(guò)對(duì)百分比寬度值進(jìn)行指派。比如：設(shè)置左欄寬度為20%，右欄寬度為70%。為什么沒(méi)有將右欄設(shè)置為80%？

這是因?yàn)椋贑SS布局中，一個(gè)對(duì)象的寬度不僅僅由width值來(lái)決定。對(duì)象的真實(shí)寬度是由對(duì)象本身的寬(width)、對(duì)象的左右外邊距(margin)以及左右邊框(border)，還有內(nèi)邊距(padding)等屬性相加而成。

3.6 兩列右列寬度自適應(yīng)

在實(shí)際應(yīng)用中，有時(shí)候需要左欄固定寬度，而右欄根據(jù)瀏覽器窗口大小自適應(yīng)。這只需要設(shè)置左欄的寬度值，右欄不設(shè)置任何寬度值，并且右欄不浮動(dòng)即可。

3.7 二列固定寬度居中

對(duì)于二列分類居中問(wèn)題，再使用margin: 0px auto；似乎不能達(dá)到效果，這時(shí)就需要進(jìn)行div的嵌套設(shè)計(jì)來(lái)完成。可以使用一個(gè)居中的div作為容器，將二列分欄的兩個(gè)div放置在容器中，從而實(shí)現(xiàn)二列居中顯示的效果。XHTML代碼結(jié)構(gòu)如下：　

CSS代碼如下：

3.8 三列浮動(dòng)中間列寬度自適應(yīng)

如果希望有一個(gè)三列式布局中的左欄要求固定寬度并居左顯示，右欄要求固定寬度并居右顯示，而中間欄需要在左欄和右欄的中央，并根據(jù)左右欄的間距自動(dòng)適應(yīng)。這個(gè)布局單純使用float屬性與百分比值并不能夠?qū)崿F(xiàn)。因此需要尋找新的思路來(lái)解決。

絕對(duì)定位

絕對(duì)定位是通過(guò)position屬性來(lái)實(shí)現(xiàn)的。position的可選參數(shù)分別為：static/absolute/relative。

對(duì)頁(yè)面中的每個(gè)對(duì)象而言，默認(rèn)的position屬性都是static。使用position: absolute;將會(huì)變?yōu)榻^對(duì)定位模式。當(dāng)使用此屬性時(shí)，可以使用top、right、bottom、left即上右下左4個(gè)方向的距離值，以確定對(duì)象的具體位置。CSS代碼如下：

設(shè)置top: 20px;時(shí)，它將永遠(yuǎn)離瀏覽器窗口的上邊20px，而left: 0px;將保證它離瀏覽器左邊為0px。

注：如果一個(gè)對(duì)象被設(shè)置了position: absolute;，它將從本質(zhì)上與其他對(duì)象分離出來(lái)。它的定位模式不會(huì)影響其他對(duì)象，也不會(huì)被其他對(duì)象的浮動(dòng)定位所影響。從某種意義上來(lái)講，使用絕對(duì)定位之后，對(duì)象就像一個(gè)圖層一樣漂浮在網(wǎng)頁(yè)之上。使用絕對(duì)定位之后的對(duì)象，不需要再考慮它的浮動(dòng)關(guān)系，只要設(shè)置對(duì)象的top、right、bottom及l(fā)eft4個(gè)方向的值即可。

3.9 高度自適應(yīng)

有些時(shí)候設(shè)置對(duì)象的height: 100%;并不能實(shí)現(xiàn)高度自適應(yīng)的效果。CSS代碼如下：

如上述代碼，對(duì)#left對(duì)象設(shè)置了height: 100%，然而，同時(shí)又設(shè)置了html與body的height: 100%，這就是高度自適應(yīng)問(wèn)題的關(guān)鍵所在。一個(gè)對(duì)象的高度是否可以使用百分比顯示，取決于對(duì)象的父級(jí)對(duì)象。

在頁(yè)面中，#left的父級(jí)對(duì)象是body，而在默認(rèn)情況下，瀏覽器并沒(méi)有給body一個(gè)高度屬性，因此設(shè)置#left為height: 100%;并不會(huì)產(chǎn)生任何效果。但是，一旦給body設(shè)置了height: 100%之后，它的子級(jí)對(duì)象#left的height: 100%;便發(fā)生了作用，這便是瀏覽器解析規(guī)則引發(fā)的高度自適應(yīng)問(wèn)題。

3.10 盒模型詳解(Box Model)

盒模型是CSS中的一個(gè)核心概念。由于瀏覽器設(shè)計(jì)的原因，在不同瀏覽器下面，盒模型的實(shí)際表現(xiàn)不一樣。

3.10.1 什么是盒模型

盒模型就是指CSS布局中的每一個(gè)元素，在瀏覽器的解釋中，都被當(dāng)作一個(gè)盒狀物。瀏覽器通過(guò)這些盒狀物的大小和浮動(dòng)方式來(lái)判斷下一個(gè)盒狀物是貼近顯示，還是下一行顯示，還是其他方式顯示。任何一個(gè)CSS布局的網(wǎng)頁(yè)，都是由許多不同大小的盒子所構(gòu)成的。

3.10.2 盒模型的細(xì)節(jié)

如上面所述，只需要理解盒模型的寬度或高度，就能理解他們?cè)诓季种兴紦?jù)的位置。

在CSS的盒模型設(shè)計(jì)中，它的寬度和高度不僅僅由值width或height來(lái)提供，而是由一組屬性值組合而成。除了寬度或高度值外，對(duì)于盒模型對(duì)象而言，CSS還提供了內(nèi)邊距(padding)、外邊距(margin)、邊框(border)三個(gè)屬性，用于控制一個(gè)對(duì)象的顯示細(xì)節(jié)。

總結(jié)：一個(gè)盒子（包含margin、border和padding）的實(shí)際占用的空間為：

豎直方向：height+border-top+border-bottom+margin-top+margin-bottom+padding-top+padding-bottom
水平方向：width+border-left+border-right+margin-left+margin-right+padding-left+padding-right
3.10.3 上下margin疊加問(wèn)題（margin重疊現(xiàn)象）

對(duì)象之間的間距是由兩個(gè)對(duì)象的盒模型的最終計(jì)算值得出的。理論上如此，但也有一種特殊情況，就是上下對(duì)象的間距問(wèn)題。當(dāng)兩個(gè)對(duì)象為上下關(guān)系時(shí)，而且都具備margin屬性的時(shí)候，此時(shí)由margin所造成的外邊距將出現(xiàn)疊加。比如：

也許會(huì)認(rèn)為，由于a對(duì)象有下邊距10px，b對(duì)象有上邊距10px，所以它們的上下距離應(yīng)該為20px。實(shí)際上，它們的上下距離都是10px。引發(fā)這種問(wèn)題的原因是由CSS設(shè)計(jì)所造成的。比如要對(duì)段落進(jìn)行控制，多個(gè)p標(biāo)簽形成段落，如果這些p標(biāo)簽都具備margin: 10px;屬性的話，那么它們中第一個(gè)段落的頂部外邊距是10px，而第一個(gè)段落與第二個(gè)段落之間的margin就成了20px，由此造成排序距離不一致，所以設(shè)計(jì)出這種空白邊疊加規(guī)則。

總結(jié)：空白邊疊加時(shí)，即上下相鄰的普通元素，上下邊距并非簡(jiǎn)單的相加，而是取其較大的margin值為準(zhǔn)。一旦把某個(gè)元素設(shè)定了float屬性，那么它們將不再進(jìn)行空白邊疊加。

3.10.4 左右margin加倍問(wèn)題

當(dāng)盒模型對(duì)象為浮動(dòng)狀態(tài)時(shí)，很對(duì)象的左右margin會(huì)加倍?？梢酝ㄟ^(guò)設(shè)置對(duì)象的display:inline;來(lái)解決。display屬性用于強(qiáng)制對(duì)象按一種顯示模式進(jìn)行解析。

3.11 深入浮動(dòng)(Float)

浮動(dòng)是CSS布局中重要的理論。CSS網(wǎng)頁(yè)布局只能以兩種方式存在：一種是浮動(dòng)式布局，另一種則是定位布局。這兩種定位方式的核心都脫離于文檔流的控制。

3.11.1 文檔流(Document Flow)

文檔流是瀏覽器解析網(wǎng)頁(yè)的一個(gè)重要概念，對(duì)于一個(gè)XHTML網(wǎng)頁(yè)，body元素下的任意元素，根據(jù)其前后順序，組成了一個(gè)個(gè)上下關(guān)系，這便是文檔流。文檔流是瀏覽器的默認(rèn)顯示規(guī)則。

3.11.2 浮動(dòng)定位

浮動(dòng)定位的目的就是打破默認(rèn)的按照文檔流的顯示規(guī)則，而按照布局要求進(jìn)行顯示。這就需要利用float屬性。

3.11.3 浮動(dòng)的清理(Clear)

清理是浮動(dòng)中的另一個(gè)有用的工具。這需要利用clear屬性來(lái)拒絕某個(gè)方向的浮動(dòng)。清理的一種方法就是清除某一側(cè)，比如：clear: left;來(lái)清理左側(cè)的浮動(dòng)對(duì)象；另一種用法是，當(dāng)浮動(dòng)了許多元素后，突然需要另起一行，這時(shí)可以制作一個(gè)空白的div標(biāo)簽，并使用clear: both;屬性來(lái)設(shè)置該div左右都拒絕浮動(dòng)。

3.11.4 何時(shí)選用浮動(dòng)定位

當(dāng)需要網(wǎng)站有較強(qiáng)的對(duì)分辨率及內(nèi)容大小的適應(yīng)能力時(shí)，就需要采用浮動(dòng)定位。浮動(dòng)定位能將布局浮在窗口之中，而不是固定在窗口的某個(gè)位置，所以其目的主要是針對(duì)非固定類型的網(wǎng)頁(yè)進(jìn)行設(shè)計(jì)。

1. 居中布局

對(duì)一個(gè)元素居中，是相對(duì)于它的左右兩個(gè)邊而言。如果瀏覽器窗口的寬度不固定，那么久需要用div，采用針對(duì)左右margin的auto設(shè)置，以便讓元素居中浮動(dòng)。

2. 橫向?qū)挾劝俜直瓤s放

如果有一個(gè)二列寬度自適應(yīng)布局，當(dāng)左列的寬度無(wú)法固定時(shí)，則右列的位置也就無(wú)法固定，因此右列必須浮動(dòng)到左列的右邊貼近，才可以適應(yīng)左列寬度的隨時(shí)變化。

3. 需要借助margin、padding、border等屬性

浮動(dòng)式布局能夠通過(guò)控制對(duì)象的邊框、間距等來(lái)精確地控制它們之間的位置關(guān)系，考慮到每個(gè)對(duì)象的外邊距不一樣，所以如果需要采用margin來(lái)控制對(duì)象占位，也需要使用浮動(dòng)定位。

3.12 絕對(duì)定位與相對(duì)定位

3.12.1 絕對(duì)定位

凡是采用position: absolute;后，對(duì)象便開(kāi)始進(jìn)行絕對(duì)定位，絕對(duì)定位主要通過(guò)設(shè)置對(duì)象的top、right、bottom和left四個(gè)方向的邊距值來(lái)實(shí)現(xiàn)。一旦對(duì)象被設(shè)置絕對(duì)定位，它就完全脫離了文檔流與浮動(dòng)模型，獨(dú)立于其他對(duì)象而存在。CSS代碼如下：

這時(shí)，b和d元素的位置由top值（上邊距）及l(fā)eft值（左邊距）而決定，他們已經(jīng)脫離了a和c的浮動(dòng)而自成一體，浮動(dòng)在畫(huà)面之上。

深度(z-index)

由于b和d元素的位置由自身的邊距而決定，因此會(huì)出現(xiàn)一個(gè)問(wèn)題，即元素的重疊。這種情況下，可以通過(guò)設(shè)置對(duì)象的z-index屬性，以設(shè)置其重疊的先后順序，也就是z軸的順序。CSS代碼如下：

一開(kāi)始沒(méi)有設(shè)置z-index屬性時(shí)，d元素位于b元素之上。當(dāng)使用z-index屬性后，可以重新設(shè)置他們的z軸順序。

注：以z-index的數(shù)值大小為準(zhǔn)，大值對(duì)象的層級(jí)位于小值對(duì)象之上。

3.12.2 相對(duì)定位

實(shí)際上，相對(duì)定位就是浮動(dòng)定位與絕對(duì)定位的擴(kuò)展方式。相對(duì)定位使得被設(shè)置元素保持與其原始位置相對(duì)，并不破壞其原始位置的信息。position: relative;

不占位的相對(duì)定位

當(dāng)對(duì)象采用position: relative;時(shí)，該對(duì)象雖然進(jìn)行了相對(duì)定位，但其原始的占位信息還存在于文檔流及浮動(dòng)對(duì)象中。要想做到絕對(duì)定位那樣，完全獨(dú)立于其他對(duì)象，自身又可以做到相對(duì)定位，可以通過(guò)一組定位組合。XHTML代碼如下：

CSS代碼如下：

可以看到，b已經(jīng)視線里相對(duì)定位，而且沒(méi)有占有空間，c和d也都順移到a的右邊。之所以能夠?qū)崿F(xiàn)這樣的效果，就在于相對(duì)定位與絕對(duì)定位的組合。在這里，對(duì)付對(duì)象divGroup設(shè)定position: relative;的絕對(duì)定位，但沒(méi)有設(shè)定它的top及l(fā)eft值，所以divGroup仍然可以當(dāng)做浮動(dòng)對(duì)象使用。同時(shí)，將b對(duì)象的定位方式由position: relative;改為position: absolute;絕對(duì)定位，盡管改為了絕對(duì)定位了，但由于其父級(jí)是相對(duì)定位，所以這里的絕對(duì)定位就變成了相對(duì)于父級(jí)的絕對(duì)，而不是針對(duì)瀏覽器進(jìn)行絕對(duì)定位。

3.12.3 何時(shí)選用絕對(duì)與相對(duì)定位

絕對(duì)與相對(duì)定位在實(shí)際應(yīng)用中并不常見(jiàn)，值存在于一些特殊情況下。

絕對(duì)定位用于網(wǎng)頁(yè)設(shè)置全部固定，而且不希望采用margin、padding、border等屬性進(jìn)行控制。一般有下面一些的設(shè)計(jì)會(huì)使用到。

不規(guī)則網(wǎng)頁(yè)設(shè)計(jì)
在畫(huà)面上的設(shè)計(jì)
交互式設(shè)計(jì)

最新評(píng)論