WEB入門.六盒子模型

學習內容

CSS盒子模型
盒子之間的關係
頁面元素定位

能力目標

理解盒子模型
理解內容與表現分離的優點
理解並掌握盒子之間的關係
理解並掌握絕對定位與相對定位的用法

本章簡介

上一章節中已經講解了頁面佈局的基礎知識，瞭解了設計一個標準的 XHTML頁面需要遵循的規範，例如：標籤需要關閉、使用 id 屬性代替 name 屬性、屬性值需要使用雙引號等。另外，上一章內容講解了 XHTML 基本標籤的用法。

頁面是 Web 站點與用戶交互的接口，它能夠引起用戶對 Web 的興趣並且加入自己電腦的收藏夾。爲達到這一目的，頁面設計需要注意兩點：頁面佈局設計和頁面的內容設計。頁面佈局的效果將直接影響用戶瀏覽的視覺體驗。

本章內容將詳細講解佈局設計的基本原理，包括佈局設計模型、背景特效、元素定位、導航欄等。其次，本章內容涉及網頁佈局設計的基礎模型——盒子模型。盒子模型的概念來源於生活中的物品裝箱原理，可以通過盒子模型劃分頁面中的板塊，重點在於講解盒子模型中常用的定位方式：絕對定位、相對定位、靜態定位、浮動定位。最後，本章將講解頁面中如果存在多個盒子，應該如何理解它們之間的關係。

核心技能部分

2.1 盒子模型概述

傳統的網頁一般採用table佈局，將內容與頁面效果混雜在一起，導致頁面代碼冗餘，佈局結構不清晰，不易於網站版面修改。基於div + css 佈局技術的盒子模型的出現替代了傳統的 table表格嵌套，它不但彌補了table佈局的缺陷，而且在頁面加載速度和搜索引擎的支持方面有顯著的改善。

2.1.1 內容與表現的分離

1. 什麼是內容與表現

網頁設計的一個重要概念是保證頁面內容和表現分離。其中內容是頁面實際要傳達給用戶的信息 (包含數據、文檔、圖片等)，指純粹的數據信息，不包含任何輔助信息 (如顏色、字體大小、背景等)；表現是指內容的修飾性部分，例如標題字體的大小、背景、顏色等。

2. 如何實現內容與表現分離

假設p是塊狀標籤，現在須使某段落右縮進2個字高的大小，很多人通常在段落前加空格，而後不斷重複該動作。如果給p標籤指定一個CSS樣式：p {text-indent：2em;}，在沒有外加任何表現控制標籤的情況下，body內容部分顯示如下：

<p>憶江南作者唐.白居易江南好，風景舊曾諳。日出江花紅勝火，春來江水綠如藍，能不憶江南。</p>

如果該段落另需修飾字體、字號、背景、行距等，只需要將對應 CSS樣式屬性加進p樣式中。

以上代碼將內容和表現混合在一起。DIV + CSS設計佈局的思路遵循內容與表現分離的原則。

實現步驟如下：

（1）使用DIV定義語義結構，其中只添加網頁的內容，如文字、圖片等。

（2）使用 CSS美化網頁，如加入背景、線條邊框、對齊屬性等。

3. 內容與表現分離的優勢

（1）網頁文件代碼量小，可被快速下載。

（2）數據顯示多樣化，不同的樣式表適應不同的設備，其內容與設備無關。

（3）整個站點的視覺效果一致，修改樣式表即可輕鬆實現網站改版。

（4）頁面結構簡潔，數據的集成、更新和處理更爲方便靈活。

（5）便於搜索引擎的搜索。

2.1.2 盒子的結構

在CSS中，所有的網頁元素都被看作一個矩形框，或者是元素框。盒子模型描述了元素在網頁佈局中所佔的空間和位置。現實生活中的盒子是一個常見物品，如我們到商場買禮品，售貨員會先用一個箱子將禮品裝好。爲防止禮品在運輸過程中損壞，再用一些泡沫型材料隔在禮品與箱子之間。這就是一個最典型的盒子，如圖 2.1.1 所示。

圖2.1.1 生活中的盒子

網頁設計將生活中裝箱子的做法抽象成頁面設計模型——盒子模型。在CSS 中，一個獨立的盒子模型由 content (內容)、border (邊框)、padding (內邊距)、margin (外邊距)四部分構成，如圖 2.1.2所示。

圖2.1.2 盒子模型

盒子模型是CSS 中一個重要的概念，理解了盒子模型才能更好地排版。盒子模型分爲標準W3C盒子模型和IE 盒子模型兩種。

1. 標準W3C盒子

標準W3C 盒子模型的範圍包括 margin、border、padding、content，且 content部分不包含 border和 padding，如圖 2.1.3所示。

圖2.1.3 標準W3C盒子

2. IE盒子

IE 盒子模型的範圍同樣包括margin、border、padding、content，它與標準 W3C 盒子模型的區別在於，IE 盒子模型的 content部分包含了 border 和 padding，如圖 2.1.4所示。

2.1

一個盒子的 margin 爲20px，border 爲1px，padding 爲 10px，content 的寬度爲200px、高爲 50px。

標準W3C 盒子模型，盒子需要佔據的位置爲：

寬：20*2 + 1*2 +10*2 + 200 = 262px

高：20*2 + 1*2 +10*2 + 50=112px;

盒子的實際大小爲：

寬：1*2 + 10*2 + 200= 222px

高：1*2 + 10*2 + 50=72px;

IE盒子模型，盒子佔據的位置爲：

寬：20*2 + 200 =240px

高：20*2 + 50 =90px;

盒子的實際大小爲：寬 200px、高 50px。

設計師設計頁面時，如果在頁面頂部沒有加 DOCTYPE 聲明，那麼瀏覽器會根據自己的行爲理解網頁，即 IE 瀏覽器會採用 IE 盒子模型解釋設計師的盒子。而 Firefox採用標準 W3C 盒子模型解釋盒子，所以網頁在不同瀏覽器中的顯示效果不一致。反之，如果添加 DOCTYPE 聲明，那麼所有瀏覽器都會採用標準W3C 盒子模型去解釋盒子，網頁在各瀏覽器中顯示效果將變得一致。

2.1.3 盒子之間的關係

在設計網頁時，如果只針對一個盒子，可以很輕鬆地運用上述知識。但實際網頁設計中會遇到大量的盒子，所以只有理解盒子之間的關係才能適應各種複雜的佈局需求。

1. 水平盒子

當兩個盒子同行顯示時，其距離爲 BOXI 的 margin-right和 BOX2 的 margin-left之和，如圖 2.1.5所示。

圖2.1.5 水平盒子的距離

2. 垂直盒子

當兩個盒子在垂直顯示時，其距離爲 BOXI 的margin-bottom和 BOX2 的 margin-top 中較大者，而不是兩者之和。

2.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">div{height:100px;width:200px;font-size:24px;color:#3C6;border:1pxsolid #006;}#box1{margin-bottom:50px;padding-bottom:30px;text-align:center;}#box2{margin-top:30px;padding-top:30px;text-align:center;}</style></head><body><div id="box1">上面盒子</div><div id="box2">下面盒子</div></body></html>

如圖 2.1.6所示。

圖 2.1.6 垂直盒子的距離-1 圖2.1.6 垂直盒子的距離-2

3. 重疊盒子

盒子重疊時，可以將其中一個盒子的margin屬性值設置爲負值，下面代碼演示負值的用法。

2.3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=gb2312" /><title>無標題文檔</title><style type="text/css">div{position:absolute;left:100px;top:50px;width:300px;height:100px;border:1pxsolid red;font-size:30px;}#box1{background-color:#FF0000;z-index:2;}#box2{background-color:#00FF00;margin-left:-50px;margin-top:-30px;}</style></head><body><div id="box1">BOX1</div><div id="box2">BOX2</div></body></html>

2.2 盒子定位

在頁面佈局設計中，盒子定位是十分重要的內容。定位是將某個元素放到某個指定位置上。在 CSS中控制盒子的位置有多種方式，如盒子的浮動定位、盒子的流動定位等。另外還可以通過 position屬性控制盒子的位置。本章將介紹如何通過position屬性定位盒子。

position：static/absolute/relative;

2.4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=gb2312" /><title>無標題文檔</title><style type="text/css">div{width:100px;height:100px;position:absolute;left:120px;/*與包含塊左側邊框距離爲120個像素*/top:50px;/*與包含塊頂部邊框距離爲50個像素*/border:1pxsolid gray;}</style></head><body><div id="box1">BOX1</div></body></html>

圖2.1.8 position 用法

2.2.1 靜態定位(static)

靜態定位是position屬性的默認值，它表示塊狀元素保持在標準文檔流中原有的位置，不做任何移動。

2.5

CSS樣式代碼：<style type="text/css">body{margin:20px;font :Arial 12px;}#father{background-color:#0C3;border:1pxdashed #000000;padding:15px;}#son{background-color:#FFFFFF;border:1pxdashed #FFFFFF;padding:10px;}</style>XHTML代碼片段：<body><divid="father"><divid="son">BOX2</div></div></body>

2.2.2 絕對定位(absolute)

絕對定位是指以某一個點爲基準進行偏移。最典型的絕對定位是以瀏覽器窗口的左上角(0.0)點爲基準偏移盒子。使用絕對定位時，需要設水平方向和垂直方向的偏移量，分別是 left、top、right、bottom。

2.6

CSS樣式代碼：<style type="text/css">body{margin:0px;font-family:Arial;font-size:12px;}#father{background-color:#a0c8ff;border:1pxdashed #000000;width:300px;height:100px;position:absolute;/*絕對定位*/left:50px;top:50px;}</style>XHTML代碼片段：<body><divid="father"></div></body>

另一種情況是包含元素的定位問題，它是以已經定位的父級元素爲基準進行偏移。已經定位的元素是指將元素的 postion屬性值設置爲除靜態定位之外的任意一值。

2.7

CSS樣式代碼：<style type="text/css">body{margin:20px;font-family:Arial;font-size:12px;}#father{background-color:#a0c8ff;border:1pxdashed #000000;padding:15px;position:relative;/*相對定位*/}#father div{background-color:#fff0ac;border:1pxdashed #000000;padding:10px;}#father #son2{position:absolute;top:0px;right:0px;}</style>XHTML代碼片段：<body><divid="father"><div>Box-son1</div><divid="son2">Box-son2</div><div>Box-son3</div></div></body>

如果去掉father 中的position：relative；

使用盒子絕對定位時需要注意以下幾點：

（1）盒子的絕對定位以最近的一個已定位的父級元素爲基準；如果父級元素沒有定位或沒有父級元素，則以瀏覽器窗口爲基準。

（2）絕對定位的盒子會脫離標準文檔流，不影響同一級的盒子元素位置。

2.2.3 相對定位(relative)

相對定位是相對於盒子元素的自身原有位置進行偏移，需要設定垂直方向和水平方向的偏移量，分別是left、top、right、bottom。

2.8

CSS代碼：

<style type="text/css">body{margin:20px;font :Arial 12px;}#father{background-color:#a0c8ff;border:1pxdashed #000000;padding:15px;width:300px;}#son1{background-color:#fff0ac;border:1pxdashed #000000;padding:10px;position:relative;/*relative相對定位 */left:50px;top:30px;}#son2{background-color:#fff0ac;border:1pxdashed #000000;padding:10px;}</style>XHTML代碼片段：<body><divid="father"><divid="son1">SonBox-1</div><divid="son2">SonBox-2</div></div></body>

在瀏覽器中瀏覽的效果如圖 2.1.12所示。

圖2.1.12 相對定位

修改Son1的樣式，去除position:relative;/*relative相對定位 */

#son1{

background-color:#fff0ac;

border:1pxdashed #000000;

padding:10px;

left:50px;

top:30px;

}

由此可以看出，相對定位是相對於盒子元素的自身原有位置進行偏移。

2.2.4 CSS包含塊(include)

CSS包含塊是標準佈局中的一個重要概念，是絕對定位的基礎。包含塊不同於父級元素，它們之間存在本質的區別。

什麼是包含塊呢？包含塊是指爲絕對定位元素提供座標偏移和顯示範圍的參照物，是確定絕對定位元素偏移起始位置和百分比長度的參考。默認狀態下 body元素是一個大的包含塊，所有絕對定位的元素都根據窗口確定自己所處的位置和百分比大小來顯示的。但是如果定義了包含元素爲包含塊後，對於被包含的絕對定位元素來說，會根據最接近的、具有定位功能的上級包含元素來決定其顯示位置。

那麼怎麼定義一個包含塊？在 CSS 中可以用 position 屬性定義包含塊。使用包含塊，設計師可以靈活設置絕對定位的座標原點和參考值。

爲了能夠更直觀地明白什麼是包含塊，以及以上闡述的內容，下面通過一個XHTML頁面來說明。

2.9

CSS代碼：

#a,#b {/* 定義包含元素的共同屬性 */

width:200px;

height:200px;

float:left;

font-size:24px;

margin-top:50px; /* 拉開與窗口頂部的距離 */

border:solid 1px red; /* 定義紅色邊框線，便於識別 */

}

#b {

position:relative;/* 定義包含元素b爲相對定位，確定它爲包含塊 */

margin-left:50px; /* 拉開與b包含元素的距離 */

}

#c,#d {/* 定義被包含元素絕對定位，並進行偏移 */

width:50%;

height:50%;

position:absolute;

left:50%; /* 與包含塊左側邊框距離爲50% */

top:50%;/* 與包含塊頂部邊框距離爲50% */

border:1pxsolid gray;

}

</style>

XHTML代碼片段：

<body>

<div id="a">Box_a

<divid="c">Box_c</div>

</div>

Box_b

<divid="d">Box_d</div>

</div>

</body>

在瀏覽器中瀏覽的效果如圖 2.1.14所示。

圖2.1.14 CSS包含塊

上述代碼中，Box_b 被定義爲包含塊，Box_d 相對於其包含塊進行位置偏移和範圍大小的取值，Box_a未設置成包含塊，所以 Box_c 相對於body進行位置偏移和範圍大小的取值。由此可以看出只有自身是包含塊的時候纔可以影響其他元素的定位，元素要想成爲包含塊則要定義 position屬性；居無定所怎麼包含別人。position 的取值 absolute 絕對定位，譬如：家庭住址大學路158號；relative 則是相對定位，譬如：家庭住址大學路客運總站對面。

2.3 綜合應用

在衆多的網站上，我們經常可以見到這樣一些頁面，多張祝福卡片被疊加在同一個頁面上通過點擊鼠標查看祝福留言，效果如圖2.1.15所示。卡片需要被定義爲不同的樣式，如背景、邊框、字體大小，而且還需要靈活控制其位置，可以採用 DIV標籤進行定義並使用疊加特性實現卡片的疊加定位排列。定義一個包含塊，將所有的卡片放在其中，卡片採用絕對定位。

2.10

<style type="text/css">div{padding:2px;}h1{text-align:center;}#card{border:2px  solid yellow;width:60%;height:600px;position:relative;left:5%;top:5%;}#card1{border:2px  dashed yellow;width:150px;height:200px;position:absolute;left:20px;top:20px;}#card2{border:2px  dashed yellow;width:150px;height:200px;position:absolute;left:40px;top:40px;}#card3{border:2px  dashed yellow;width:150px;height:200px;position:absolute;left:60px;top:60px;}#card4{border:2px  dashed yellow;width:150px;height:200px;position:absolute;right:100px;top:120px;}#card5{border:2px  dashed yellow;width:150px;height:200px;position:absolute;right:80px;top:100px;}#card1{background-color:#0099FF;}#card2{background-color:#CCFF66;}#card3{background-color:#CCCC99;}#card4{background-color:#FFCCCC;}#card5{background-color:#6699CC;}</style>XHTML代碼片段：<div id="card"><h1>祝福牆</h1><divid="card1"><h5>To:maomao</h5>在我心靈的百花園裏，採集金色的鮮花，我把最鮮豔的一朵給你，作爲我對你的問候。</div><divid="card2"><h5>To:xiaozhang</h5>一句問安 一聲祝福 道不盡懷念的思緒 且祝福… 快樂健康 永遠永遠</div><divid="card3"><h5>To:anny</h5>願一個問候帶給你一個新的心情，願一個祝福帶給你一個新的起點。 </div><divid="card4"><h5>To:jack</h5>將心底最衷誠的祝福送給你，祝你心想事成，春風得意。</div><divid="card5"><h5>To:anny</h5>打開心靈，卸下你的包裝；指尖飛舞，打破冬的沉默；融融的暖意帶着深情的問候，那麼快讓我們擁抱、擁抱、擁抱彼此的夢想！</div></div></div>

在瀏覽器中瀏覽的效果如圖 2.1.15所示。

圖2.1.15 祝福牆

任務實訓部分

實訓任務1：搭建博客網站的頁面結構

訓練技能點

Ø 內容與表現相分離的實現

Ø 採用DIV+CSS佈局搭建頁面結構

需求說明

搭建頁面佈局結構，結構關係如圖2.2.1所示。

實現步驟

（1）採用DIV作爲盒子，利用DIV的嵌套搭建佈局框架。

（2）使用CSS樣式表中的ID選擇符定義盒子的樣式規則。

關鍵代碼

CSS代碼：

<style>body{margin:0px;padding:0px;font-family:arial;background-color:#f8e5a9;   /*設置成跟#right塊一樣 */}#container{margin:0px;padding:0px;background:url(bg2.jpg)repeat-y;/* 用背景圖片填補#left的空白，又不影響#right */}#left{position:absolute;top:0px;left:0px;margin:0px;background:#afdcff;width:190px;height:600px;}#middle{position:relative;padding:1px15px 10px 15px;margin:-10px 190px 0px 190px;font-size:13px;background:#e9fbff url(bg1.jpg) no-repeatbottom right;height:600px;}#right{position:absolute;top:0px;right:0px;margin:0px;background:#f8e5a9;width:190px;padding:20px0px 20px 0px;font-size:12px;height:600px;}#footer{text-align:center;}</style>XHTML代碼片段：<body><div id="container"><divid="mainbox"><divid="left"></div><divid="middle"></div><divid="right"></div></div><divid="footer">版權所有2011.2.7 </div></div></body>

實訓任務2：製作博客網站頁面的左欄內容

訓練技能點

Ø 使用position:absolute;設置左側盒子爲絕對定位，並通過top、left屬性指定座標

Ø 使用width、height設置左側盒子寬度和高度

Ø 使用border屬性設置盒子的邊框

Ø CSS樣式規則的編寫

需求說明

將盒子定位佈局容器的最左側，並添加內容，效果如圖2.2.2所示。

實現思路

（1）在上一階段的基礎上添加左側盒子的內容，包括標題、鏈接、列表：

<div id="left"><ul><li><ahref="#">首頁</a></li><li><ahref="#">精華區</a></li><li><ahref="#">收藏夾</a></li><li><ahref="#">討論區</a></li><li><ahref="#">心情日誌</a></li></ul><h2>經典推薦</h2><ul><li><ahref="#">拉薩旅行記</a></li><li><ahref="#">回到昨天</a></li><li><ahref="#">情爲何物</a></li><li><ahref="#">讀書筆記</a></li></ul></div>（2）       編寫樣式規則控制盒子的位置及其內容的外觀：#left ul{list-style:none;/*去除列表樣式*/margin:1em20px 0px 0px;padding:0px0px 15px 22px;}#left li{font-size:80%;border-bottom:1pxdotted #B2BCC6;/*li底部帶邊框*/margin-bottom:0.3em;}#left a:link, #nav a:visited{text-decoration:none;/*無下劃線的超鏈接*/color:#2A4F6F;background-color:transparent;}#left a:hover{color:#778899;}#left h2{font:110%Georgia,"Times New Roman", Times, serif;font-weight:bold;color:#2A4F6F;padding:0px5px 0px 12px;text-decoration:underline;}

實訓任務3：製作博客網站網頁的中間內容

訓練技能點

Ø 相對定位的用法

Ø margin屬性與padding屬性的用法

Ø border屬性的用法

需求說明

參考上一階段，完成博客網站頁面中間內容的設計，效果如圖2.2.3所示。

圖2.2.3 中間內容

實現思路

（1）使用position:relative 將盒子設置成相對定位

（2）左側盒子的定位方式是絕對定位，脫離了文檔流，不會擠壓其他盒子。所以通過margin來設置中間盒子與佈局容器的左側補丁，左側補丁的大小大於或等於左側盒子的寬度，這樣纔可以保證中間盒子處於左側盒子的右邊。

#middle{position:relative;padding:1px15px 10px 15px;margin:-10px 190px 0px 190px;font-size:13px;background:#e9fbff url(bg1.jpg) no-repeatbottom right;}#middle h4{text-decoration:underline;color:#0078aa;padding-top:15px;font-size:16px;}

（3）盒子中的每一段內容可以繼續採用盒子進行組織，並設置盒子的下邊框爲虛線

border-bottom:1px dashed #5b97b1;

（4）添加內容包括標題、段落、鏈接等

（5）設置內容的樣式規則，標題大小爲16px，帶下劃線，段落文本補丁：左右15px，上下0px。

代碼

<div id="middle"><h4>團購</h4><p>團購就是團體購物，指的是認識的或者不認識的消費者聯合起來，來加大與商家的談判能力，以求得最優價格的一種購物方式。根據薄利多銷、量大價優的原理，商家可以給出低於零售價格的團購折扣和單獨購買得不到的優質服務。團購作爲一種新興的電子商務模式，通過消費者自行組團、專業團購網站、商家組織團購等形式，提升用戶與商家的議價能力，並極大程度地獲得商品讓利，引起消費者及業內廠商、甚至是資本市場關注。……</p><h4>旅程</h4><p>夕陽 染紅藍天<br>帶走 美好的一天<br>風 吹過大地<br>炫美的世界<br><br>霞光 點亮星辰<br>燃起 遼遠的夢幻<br>流星 劃過夜空<br>憶起 逝夜的歌聲<br><br>是誰昨夜背上行囊<br>唱一首滿載風塵的歌<br>今夜才又想起擁抱的時刻<br><br>獨自走的一段旅程<br>是否還裝滿苦澀<br>一路風雨飄搖 那坎坷對誰說<br><br>來吧看這遠處亮起的點點星火<br>伸手觸摸那寫在匆匆旅程的歌<br>誰在轉過的街口從容揮手<br>誰用歡笑和擁抱<br>記住這一刻</p></div>

實訓任務4：製作博客網站網頁的右欄內容

需求說明

參考上一階段，完成博客網站頁面右欄內容的設計，效果如圖2.2.4所示。

提示：

Ø 使用position:absolute;設置左側盒子爲絕對定位，並通過top、right屬性指定座標

Ø 添加內容包括標題、段落、鏈接等

Ø 設置內容的樣式規則，標題大小爲16px，帶下劃線，段落字體大小爲12px

本章總結

（1）本章主要講解盒子模型padding和margin屬性，盒子之間關係，（1）水平盒子（2）垂直盒子（3）重疊盒子

（2）盒子定位position，絕對定位，靜態定位，相對定位。

（3）盒子模型的CSS控制頁面的基礎。學習本章之後，讀者應該能夠清楚在這裏“盒子”的含義是什麼，以及盒子的組成。

(4)本章的重點和難點是深刻地理解“浮動”和“定位”這兩個重要屬性，它們對於複雜頁面的排版至關重要。
鞏固練習

一、選擇題

1．在網頁設計中，盒子關係共有（）種。

A.1

B.2

C.3

D.4

2. 以下盒子模型中，可以被所有瀏覽器兼容的是（）。

A. IE盒子

B. WEB盒子

C. 文檔盒子

D. 標準W3C盒子

3. 以下屬於position定位盒子方式的是（）。

A. 絕對定位

B. 相對定位

C. 直接定位

D. 靜態定位

4. 以下說法中正確的有（）。

A. 內容與表現分離，加重了瀏覽器的負載

B. 內容與表現分離，導致頁面結構不完整

C. 內容與表現分離，使得頁面設計更加的簡潔

D. 內容與表現分離是現代頁面設計的標準

5. 以下CSS樣式代碼片斷中，屬於絕對定位的是（）。

A. #content {width: 200px; height: 150px ;}

B. #content {width: 200px; height: 150px;position: absolute ;}

C. #content {width: 200px; height: 150px;position: static ;}

D. #content {width: 200px; height: 150px;position: relative ;}

二、上機練習

完善理論課祝福牆製作，在其基礎上實現如圖 2.3.1所示的效果。

圖2.3.1 頁面元素定位

當鼠標移至某一張卡片上時，卡片顯示在最頂層，鼠標移走後卡片復位。

提示：定義卡片的懸停狀態並設置疊加次序，以突出顯示。

#card：hover{z-index：10;}

WEB入門.六盒子模型

2.1 盒子模型概述

2.1.1 內容與表現的分離

2.1.2 盒子的結構

2.1.3 盒子之間的關係

2.2 盒子定位

2.2.1 靜態定位(static)

2.2.2 絕對定位(absolute)

2.2.3 相對定位(relative)

2.2.4 CSS包含塊(include)

2.3 綜合應用

實訓任務1：搭建博客網站的頁面結構

實訓任務2：製作博客網站頁面的左欄內容

實訓任務3：製作博客網站網頁的中間內容

實訓任務4：製作博客網站網頁的右欄內容

Python 潮流週刊#50：我最喜歡的 Python 3.13 新特性！

C語言系統化精講重塑你的編程思想打造堅實的開發基礎

無人機直播解決方案

數據庫實驗七事務管理與數據庫備份、恢復和安全實驗

用t-io從零寫一個像微信的IM（03）：網絡框架選擇

面向對象的三大特徵——（面試題）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

WEB入門.六 盒子模型

2.2.4 CSS包含塊(include)

實訓任務1：搭建博客網站的頁面結構

實訓任務2：製作博客網站頁面的左欄內容

實訓任務3：製作博客網站網頁的中間內容

實訓任務4：製作博客網站網頁的右欄內容

WEB入門.六盒子模型