2.6.1盒模型

網(wǎng)頁中的任何元素都可以看作一個盒子，有自己的大小占據(jù)一定的空間。盒模型就是描述這個盒子是如何組成的以及各部分的作用是什么。網(wǎng)頁元素的盒子模型是由內(nèi)容、內(nèi)邊距、邊框和外邊距4個部分組成，如圖2-5[6]所示。圖2-5元素盒模型結(jié)構(gòu)圖從圖2-5可以看出一個HTML網(wǎng)頁元素從內(nèi)到外由4個部分組成，分別是：●元素內(nèi)容——即HTML標(biāo)記中實際顯示的內(nèi)容。

●內(nèi)邊距padding——指元素內(nèi)容到邊框的距離。

●邊框border——即盒子包圍內(nèi)邊距的部分。

●外邊距margin——指盒子邊框外面的部分。這一部分默認(rèn)是透明的，不會遮擋后面的元素內(nèi)容，但占據(jù)一定的位置空間。背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域，外邊距不顯示元素的背景。如果對元素應(yīng)用背景時，應(yīng)特別注意。盒子模型就如同釘在墻上的兩幅畫，如圖2-6[7]所示。內(nèi)容部分就是畫作內(nèi)容，內(nèi)邊距就是畫作邊緣到畫框的距離，邊框就相當(dāng)于畫框，外邊距就相當(dāng)于兩幅畫之間的距離。圖2-6盒模型實例由圖2-6可以看出一個盒子，即網(wǎng)頁元素的實際大小等于元素內(nèi)容的大小與內(nèi)邊距、邊框和外邊距大小的和，即◆元素實際寬度=內(nèi)容寬度width+左右內(nèi)邊距+左右邊框+左右外邊距

◆元素實際高度=內(nèi)容高度height+上下內(nèi)邊距+上下邊框+上下外邊距*注意：IE6及以下瀏覽器對元素大小的計算，與此不同。width=內(nèi)容寬度+左右內(nèi)邊距+左右邊框+左右外邊距；同樣地，height=內(nèi)容高度+上下內(nèi)邊距+上下邊框+上下外邊距，使用時要特別注意。在制作位置精準(zhǔn)的網(wǎng)頁時，計算元素大小一定要加上內(nèi)邊距、邊框和外邊距的大小。但在網(wǎng)頁中元素不是獨立的，與其他元素混排在一起，它們之間的位置除了和自身大小有關(guān)之外，還與元素間的排列規(guī)則有關(guān)，說到排列規(guī)則，就不得不提到網(wǎng)頁元素的分類。網(wǎng)頁元素分為兩類：◆塊元素——所有塊元素以及塊元素與行內(nèi)元素在網(wǎng)頁中都豎直排列，一個塊元素占據(jù)網(wǎng)頁中的一行。兩個塊級元素不能在同一行上。

◆行內(nèi)元素——也稱之為內(nèi)聯(lián)元素，只占據(jù)自身元素大小的空間，多個行內(nèi)元素可以在一行上。一行排滿可以折到下一行重新排列。常見的塊元素有div和p，行內(nèi)元素有span。兩種元素可以互換，通過display屬性進行控制。若將display設(shè)置為inline，則元素顯示為行內(nèi)元素；若將display設(shè)置為block，則顯示為塊元素。1、行內(nèi)元素間的水平距離兩行內(nèi)元素之間的水平距離是左右兩個元素外邊距之和，即左邊元素的右外邊距加右邊元素的左外邊距。如圖2-7所示。圖2-7行內(nèi)元素間的水平距離2、塊元素間的垂直距離兩塊元素間的垂直距離，是上元素下外邊距和下元素上外邊距二者之間較小的，而不兩者之和。如圖2-8所示。圖2-8塊元素之間的垂直距離3、內(nèi)嵌元素間的距離

如果兩個元素是嵌套關(guān)系，則二者之間的距離是父元素的內(nèi)邊距加上子元素的外邊距之和，如圖2-9所示。圖2-9內(nèi)嵌元素之間距離4、盒模型樣式指定

我們可以控制盒模型的外邊距、邊框和內(nèi)邊距，來改變元素占有空間的大小。通過設(shè)置元素的margin屬性控制外邊距，設(shè)置border屬性控制邊框，設(shè)置padding設(shè)置內(nèi)邊距。設(shè)置方法有4種，以margin外邊距為例：格式1：margin:10px15px15px20px;設(shè)置元素的外邊距為：上外邊距10px，右外邊距15px，下外邊距15px和左外邊距20px，即依次是“上右下左”的順序設(shè)計四個邊距。格式2：margin:10px15px20px;分別是上外邊距10px，左右外邊距15px，下外邊距為20px。格式3：margin:10px15px;分別是上下外邊距寬10px，左右外邊距寬15px。格式4：margin:10px;上下左右四個外邊距都是10px寬度。除以上4種格式外，還可以分別指定上下左右四個邊距，如下所示。margin-top:20px;margin-right:15px;margin-bottom:10px;margin-left:15px;分別對應(yīng)margin-top上外邊距，margin-right右外邊距，margin-bottom下外邊距，和margin-left左外邊距。需要說明的是，外邊距margin可以設(shè)置為負值。不但可以設(shè)置內(nèi)外邊距的寬度，還可以設(shè)置邊框的樣式，如：border:10pxsolidgreen;設(shè)置邊框?qū)挾葹?0px，實線，顏色為綠色。在學(xué)習(xí)了排列元素的盒模型之后，我們再來介紹一下排列元素很重要的另一方面：CSS定位。2.6.2CSS定位元素在網(wǎng)頁中的排列布局稱為文檔流。正常情況下，即沒有進行任何設(shè)計置的情況下，元素按照標(biāo)記在網(wǎng)頁中出現(xiàn)的順序排列，每個塊元素占一行，一行中從左向右順序擺放若干個行內(nèi)元素，這種排列方式稱為標(biāo)準(zhǔn)流[8]。CSS定位允許指定元素之間的相對位置和絕對位置，可以改變默認(rèn)的文檔流。1、CSS定位CSS定位由position元素進行控制。position屬性的值可以是以下4種之一：（1）static——也稱為靜態(tài)定位，為默認(rèn)值。靜態(tài)定位情況下，元素按照標(biāo)準(zhǔn)流的方式排列在文檔中。（2）relative——也稱為相對定位，相對定位以標(biāo)準(zhǔn)流為基礎(chǔ)，并使元素盒子相對于它在標(biāo)準(zhǔn)流中的位置偏移指定的距離（3）absolute——這種方式稱為絕對定位。絕對定位的元素盒子從標(biāo)準(zhǔn)流中脫離，以包含它的父元素為基準(zhǔn)進行定位，對排在它后的元素?zé)o影響，也就是說，后面的元素就如同它不存在一樣。（4）fixed——這稱為固定定位，與絕對定位類似，但是以窗口為基準(zhǔn)進行定位。除靜態(tài)定位外，其他三種定位方式都需要使用四個屬性指定偏移位置：（1）left——指定元素與其父元素左邊界的距離。（2）right——指定元素與其父元素右邊界的距離。（3）top——指定元素與其父元素上邊界的距離。（4）bottom——指定元素與其元素下邊界的距離。下面通過一個實際的例子說明定位的用法。為了說明各位定位的不同，我們采用分步的方式，每一步設(shè)置一種元素定位，觀察顯示效果以及對后繼元素的影響。第1步定義元素結(jié)構(gòu)如下：<divid="father"> <div>第1個div</div><div>第2個div</div> <div>第3個div</div> <div>第4個div</div> <div>第5個div</div></div>即一個id為fatherdiv中包含5個子div。我們分別指定這5個div的定位方式，觀察顯示效果。第2步定義全部div的樣式。這里我們采用了CSS的繼承和疊加特性，在這里統(tǒng)一定義div的公共特性，以后再定義各個div各自的樣式。div{ margin:20px; padding:5px; border:2pxdashedgreen; background:darkgray;}定義div的公共樣式后，顯示效果如圖2-10所示。圖2-10div的公共樣式顯示效果第3步定義第1個div的樣式，讓它采用相對定位的方式，left屬性設(shè)置為50px，top屬性設(shè)置為30px，CSS樣式如下：#fatherdiv:first-child{ position:relative; top:30px; left:50px;}增加第1個div樣式后的顯示效果如圖2-11所示：圖2-11第1個div采用相對定位的效果對比圖2-10和圖2-11，可以看到第1個div相對于標(biāo)準(zhǔn)流的位置向下偏移了30px(top:30px)，向右(left:50px)偏移了50px。而與它相鄰的第2個div的位置沒有受到影響，由此可以得到以下結(jié)論：（1）相對定位以標(biāo)準(zhǔn)流中的位置為基準(zhǔn)，按照指定的偏移量進行偏移。（2）相對定位對于其前后的兄弟元素沒有影響，就好像相對定位的元素仍然在標(biāo)準(zhǔn)流中一樣。第4步定義第3個div的樣式，采用絕對定位，樣式定義如下：div:nth-child(3){ position:absolute; top:260px; left:130px; }顯示效果如圖2-12所示。圖2-12第3個div采用絕對定位的效果對比圖2-12和圖2-11，可以發(fā)現(xiàn)第3個div變小了，變得和內(nèi)容一樣的大小，而且完全脫離了其父元素（id為father的div）的區(qū)域，第4個div占據(jù)了原來第3個div的位置。由此可以得到如下結(jié)論：（1）采用絕對定位的元素會變成行內(nèi)元素。（2）采用絕對定位元素完全從標(biāo)準(zhǔn)流中脫離，就好像它在標(biāo)準(zhǔn)流中不存在一樣，后面的元素會占據(jù)它的位置。（3）絕對定位的參照基準(zhǔn)是父元素（如圖2-12中標(biāo)的參考線所示），而不是網(wǎng)頁窗口。第5步對最后一個div，即第5個div采用固定定位，樣式如下：div:nth-child(5){ position:fixed; left:0px; top:120px;}顯示效果如圖2-13所示。圖2-13第5個div采用固定定位的效果對比圖2-12和2-13可以看出，第5個div也超出了父div（即id=”father”的div）之外，它的結(jié)論與絕對定位一致，唯一不同的是定位基準(zhǔn)以網(wǎng)頁窗口為基礎(chǔ)，而不是它的父元素。固定定位有一個優(yōu)良的特性，那就是無論如何移動網(wǎng)頁，它的位置都不會改變。所以常常利用它來制作側(cè)邊欄廣告，無論用戶如何上下移動網(wǎng)頁，它都會顯示！為了觀察這一效果，可以再進行第6步實驗，對于父元素div增加以下樣式：#father{ height:1280px;}即將父容器的高度改為1280px，讓它超出窗口的大小。用鼠標(biāo)拖動滾動條或者用滾輪上下移動網(wǎng)頁，觀察第5個div的位置變化。你會發(fā)現(xiàn)無論怎樣上下移動網(wǎng)頁，它的位置都不會變化，就像釘在了指定的位置一樣。以上完整的代碼見隨書源碼的Listing2-12.html。關(guān)于定位問題還有許多細節(jié)沒有討論，因為這畢竟不是一本專門學(xué)習(xí)CSS的書。如果讀者想進一步了解有關(guān)定位的細節(jié)，可以參考文獻[8]，也可以參考其他專門介紹CSS的書籍。對于標(biāo)準(zhǔn)流中的元素來說，它們總是從左邊開始排列，依次向右，排到最右端再折回左側(cè)從下一行重新開始排列，那我們?nèi)绾胃淖冞@種默認(rèn)的排列行為呢？那就要用到浮動，下面我們就討論關(guān)于浮動的話題。2.6.3CSS浮動浮動一詞相當(dāng)形象，就像是元素漂浮在標(biāo)準(zhǔn)流上一樣，不影響標(biāo)準(zhǔn)流中的其他元素，其他元素就好似浮動的元素不存在一樣?？梢愿淖儤?biāo)準(zhǔn)流默認(rèn)的元素排列方式，在網(wǎng)頁制作中具有十分重要的應(yīng)用。CSS采用float屬性控制元素的浮動，它的可能值如下：◆Left——向左浮動。◆right

——向右浮動。◆none——沒有浮動，為默認(rèn)值。◆inherit——從父元素繼承float屬性的值。1、浮動元素的性質(zhì)下面我們通過一個例子觀察一個浮動元素的行為。先來看一下網(wǎng)頁結(jié)構(gòu)，由4個div組成，id為father的div嵌套3個div，div的樣式已定義如下：<style> div{ margin:20px; padding:5px; border:2pxdashedgreen; background:darkgray; } </style><divid="father"> <div>div1</div> <div>div2</div> <div>div3</div> </div>顯示效果如圖2-14所示。

圖2-14沒有浮動的默認(rèn)效果為了能夠看到浮動的效果，我們?nèi)匀徊捎梅植降姆绞?。首先，我們讓div1向右浮動。樣式定義如下：#fatherdiv:first-child{ float:right;}Div1向右浮動后的效果如圖2-15所示。圖2-15div1向右浮動時的效果對比圖2-14和2-15進行分析，發(fā)現(xiàn)div2向上替代了div1的位置，div1的大小由原來的占據(jù)整行，變成了僅包含內(nèi)容的大小，而且排在了父div的右邊，由此可以得到如下結(jié)論：◆浮動的元素不在標(biāo)準(zhǔn)流中，其他標(biāo)準(zhǔn)流中的元素不受其影響。

◆浮動元素會生成一個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄[9]，塊級元素表現(xiàn)的像行內(nèi)元素。第二，為了觀察浮動元素之間的關(guān)系，我們給三個子div定義大小，樣式代碼如下：div>div{ width:36px; height:36px;}添加大小樣式后，顯示效果如圖2-16所示。

圖2-16三個子div添加大小后的效果第三，我們修改div1的浮動方向，由原來的向右改為向左，即將#fatherdiv:first-child的float屬性修改為left，代碼如下：#fatherdiv:first-child{ float:left;}顯示效果如圖2-17所示?？梢钥吹絛iv1緊靠父div的左側(cè)，取代了圖2-16中div2的位置，div2被div1覆蓋，div2中的文字“div2”被“擠”到div3中包圍div1。第四，我們把三個子div都向左浮動。修改后的樣式表如下所示：<style> div{ margin:20px; padding:5px; border:2pxdashedgreen; background:darkgray; } div>div{ width:36px; height:36px; float:left; } </style>顯示效果如圖2-18所示。圖2-18三個子div全向左浮動時的效果可以看出三個子div由于全部向左浮動，所以全部脫離了標(biāo)準(zhǔn)流，父元素再也“感覺”不到它們的存在，所以父div只有上下內(nèi)邊距決定的大小了，高度上不再包含子div。浮動性質(zhì)表露無疑！圖2-18是Chrome瀏覽器中的效果，在Firefox瀏覽器中，繼續(xù)縮小窗口，顯示效果如圖2-19所示。圖2-19Firefox繼續(xù)縮小窗口時的效果從2-19可以看出，浮動的元素如果水平方向上沒有足夠的空間，則會到下一行排列，如果下一行也沒有足夠的空間，則繼續(xù)到下一行，直到有足夠的空間為止。圖2-18顯示的效果顯然不是我們想要的效果，我們要父div在視覺上包含子div，這該怎么辦呢？這有兩種方式：（1）將父元素設(shè)置為浮動的；（2）消除浮動。下面我們來討論這兩種方法。2、浮動元素的混排

我們在上面第四步的基礎(chǔ)上，添加一個父div的樣式：#father{ float:left;}再觀察瀏覽器中的效果如下：從圖中可以看出，這確實是我們想要的效果了。但是這樣存在一個問題：那就是父div浮動后會影響后續(xù)元素的排列！以上討論的源碼在Listing2-13.html中，由于代碼是在不會的修改過程中，所以最終源碼可能與全部過程疊加的總體代碼稍有不同。第二種方法就是消除浮動，消除CSS浮動使用clear屬性，它可能的取值為：◆left——清除左側(cè)浮動，即左側(cè)不允許浮動元素。◆right

——清除右側(cè)浮動，即右側(cè)不允許浮動元素。◆both

——清除左右兩側(cè)浮動，即左右兩側(cè)均不允許浮動元素?！鬾one——不清除浮動，為默認(rèn)值。◆inherit——規(guī)定應(yīng)該從父元素繼承clear屬性的值。為了便于理解代碼，不再對上面的例子的源碼Listing2-13.html進行修改，轉(zhuǎn)到Listing2-14.html繼續(xù)討論。在Lising2-14.html中父div中再添加一個div，這個div不是內(nèi)容元素，它的唯一作用就是消除浮動。網(wǎng)頁結(jié)構(gòu)如下：<divid="father"> <divclass="left">div1</div> <divclass="left">div2</div> <divclass="left">div3</div> <divclass="clear"></div>我們刪除#fatherID選擇器定義的樣式，即不采用浮動的方式解決問題。并定義.clear類別選擇器，修改后的樣式表如下：<style> div{ margin:20px; padding:5px; border:2pxdashedgreen; background:darkgray; } div>div{ width:36px; height:36px; float:left; } .clear{ clear:both;/*清除兩側(cè)浮動*/width:0px; height:0px; padding:0px; border:0px; }</style>修改后打開瀏覽器觀察效果如下：很遺憾，這種方法不起作用！難道是瀏覽器搞錯了？不會的，所有瀏覽器都會忠實的解釋這一clear屬性。那問題出在哪里呢？讓我們的目光從clear類別選擇器向上看，上面有兩個選擇器，一個是div>div子標(biāo)識選擇器，一個是標(biāo)記選擇器div。標(biāo)記div只是定義了盒屬性和背景，并不涉及浮動的屬性，問題不應(yīng)該出在這里。那問題就是div>div這個子選擇器上，我們試著修改一下。根據(jù)網(wǎng)頁結(jié)構(gòu)，我們可以采用.left類別選擇器定義3個子div的樣式。把div>div換成.left，其他不需要做任何修改。再在瀏覽器中觀察效果如下：非常好，達到了我們預(yù)期的效果！值得慶祝一下。等等，好像有哪個地方不對？這里顛覆了我們對CSS樣式?jīng)_突的理解?？闯鰜砹藛?？讓我們來分析一下。div>div{ width:36px; height:36px; float:left;} .clear{ clear:both;/*清除兩側(cè)浮動*/width:0px; height:0px; padding:0px; border:0px;}根據(jù)CSS解決沖突（見