《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第12章

模塊12CSS實(shí)現(xiàn)頁(yè)面布局12.1盒子模型12.2

HTML標(biāo)準(zhǔn)流12.3結(jié)構(gòu)元素12.4浮動(dòng)布局12.5定位布局12.6彈性盒布局12.7案例：綜合應(yīng)用布局方式思考與練習(xí)題

12.1盒子模型

在CSS中，當(dāng)談?wù)撛O(shè)計(jì)和布局時(shí)，會(huì)使用“BoxModel(盒子模型)”這一術(shù)語(yǔ)。CSS盒子模型實(shí)質(zhì)上是一個(gè)包圍每個(gè)HTML元素的框，它包括外邊距(間距)、邊框、內(nèi)邊距(填充)以及內(nèi)容區(qū)。所有的HTML元素都可以被視為盒子。

圖12-1展示了W3C標(biāo)準(zhǔn)的盒子模型。圖12-1CSS盒子模型

12.1.1?內(nèi)容區(qū)

內(nèi)容區(qū)(content)是盒子的中心部分，呈現(xiàn)了盒子的主要信息內(nèi)容，這些內(nèi)容可以是文本、圖片、視頻等多媒體。

內(nèi)容區(qū)有3個(gè)相關(guān)屬性：width、height和overflow。width和height屬性用于指定盒子內(nèi)容區(qū)的寬度和高度，注意這里的寬與高不包含內(nèi)邊距padding部分。但是如果設(shè)置了盒子的box-sizing屬性為“border-box”，此時(shí)的width與height值會(huì)包括內(nèi)容區(qū)、內(nèi)邊距和邊框。

1.width和height屬性

width和height屬性默認(rèn)情況下是指內(nèi)容區(qū)的寬與高，它們的語(yǔ)法格式如下：

【例12-1】設(shè)置元素的寬與高。

上述代碼在瀏覽器中的預(yù)覽效果如圖12-2所示。圖12-2設(shè)置元素的寬與高

2.overflow屬性

在CSS中，可以使用overflow屬性來(lái)控制元素內(nèi)容溢出內(nèi)容區(qū)時(shí)的顯示方式，其語(yǔ)法格式如下：

overflow:關(guān)鍵字;

說(shuō)明：overflow的屬性取值如表12-1所示。

【例12-2】?jī)?nèi)容溢出處理。

上述代碼在瀏覽器中的預(yù)覽效果如圖12-3所示。

圖12-3內(nèi)容溢出處理

12.1.2?內(nèi)邊距

內(nèi)邊距padding又被稱(chēng)為“填充”，它是指內(nèi)容區(qū)邊界到邊框之間的部分。padding是內(nèi)邊距的簡(jiǎn)寫(xiě)屬性。內(nèi)邊距有4個(gè)方向的屬性：padding-top、padding-right、padding_x0002_bottom、padding-left，它們的語(yǔ)法格式如下：

說(shuō)明：padding的取值可以是1～4個(gè)，代表的含義如下：

(1)1個(gè)值(如：padding:20px)，表示所有的填充都是20px。

(2)2個(gè)值(如：padding:20px5px;)，表示上下填充為20px，左右填充為5px。

(3)3個(gè)值(如：padding:5px10px7px;)，表示上填充為5px，左右填充為10px，下填充為7px。

(4)4個(gè)值(如：padding:2px5px7px10px;)，表示上填充為2px，右填充為5px，下填充為7px，左填充為10px。按順時(shí)針順序從上到左。

【例12-3】設(shè)置內(nèi)邊距。

上述代碼在瀏覽器中的預(yù)覽效果如圖12-4所示。圖12-4設(shè)置內(nèi)邊距

12.1.3?外邊距

外邊距margin是指盒子邊框以外的空間，是與其他盒子之間的距離。margin是外邊距的簡(jiǎn)寫(xiě)屬性。外邊距也有4個(gè)方向的屬性：margin-top、margin-right、margin-bottom、

margin-left，它們的語(yǔ)法格式如下：

【例12-4】設(shè)置外邊距。

上述代碼在瀏覽器中的預(yù)覽效果如圖12-5所示。圖12-5設(shè)置外邊距

本例中，設(shè)置了盒子的外邊距為：上下10px，左右30px?？梢钥闯觯昂凶?”與“盒子2”之間的間距并不是“盒子1”的下邊距加“盒子2”的上邊距，而是只有10px，這是因?yàn)閴K級(jí)元素的垂直相鄰?fù)膺吘鄷?huì)合并。

12.2HTML標(biāo)準(zhǔn)流

默認(rèn)情況下，網(wǎng)頁(yè)中的元素會(huì)按照定義的順序從上到下、從左往右排列，這種排列方式就是HTML標(biāo)準(zhǔn)流。HTML元素按照定義的先后順序顯示在頁(yè)面中，自上而下、自左而右排列。塊狀元素獨(dú)占一行，相鄰塊狀元素上下排列，相鄰行內(nèi)元素在一行中從左到右依次排列。

例如，下面這段HTML代碼：

在瀏覽器中的顯示效果如圖12-6所示，為了能看清楚它們的輪廓，為它們統(tǒng)一設(shè)置了邊框樣式。圖12-6HTML標(biāo)準(zhǔn)流

從圖12-6中可以看出，這些元素按照定義的先后順序顯示在頁(yè)面中，塊狀元素獨(dú)占一行，行內(nèi)元素在一行中從左往右排列。列表元素、p元素在標(biāo)準(zhǔn)流中自帶邊距，這些都

是在布局中需要考慮到的因素。

12.3結(jié)構(gòu)元素

1.塊元素塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，常用于網(wǎng)頁(yè)布局和網(wǎng)頁(yè)結(jié)構(gòu)的搭建。常見(jiàn)的塊元素有h1～h6、p、div、ul、li、form、table等，其中div是最典型的塊元素，也是常用的頁(yè)面布局元素。

2.行內(nèi)元素

行內(nèi)元素也稱(chēng)內(nèi)聯(lián)元素，不占有獨(dú)立的一行區(qū)域。一個(gè)行內(nèi)元素通常會(huì)和它前后的其他行內(nèi)元素顯示在同一行中，它們僅靠自身的字體大小和圖像尺寸來(lái)決定自身的寬高，一

般不可以設(shè)置寬度、高度、對(duì)齊等屬性，常用于控制頁(yè)面中文本的樣式。常見(jiàn)的行內(nèi)元素有span、strong、em、a、img、input等，其中span是最典型的行內(nèi)元素。

12.3.1?元素類(lèi)型的轉(zhuǎn)換

如果希望行內(nèi)元素具有塊元素的某些特性，例如可以設(shè)置寬高，或者需要塊元素具有行內(nèi)元素的某些特性，例如不獨(dú)占一行排列，可以使用display屬性對(duì)元素的類(lèi)型進(jìn)行轉(zhuǎn)換。

display屬性常用的屬性值及含義如下：

(1)inline：元素將顯示為行內(nèi)元素；

(2)block：元素將顯示為塊元素；

(3)inline-block：元素將顯示為行內(nèi)塊元素，可以對(duì)其設(shè)置寬高和對(duì)齊等屬性，但是該元素不會(huì)獨(dú)占一行；

(4)none：元素將被隱藏，不顯示，也不占用頁(yè)面空間，相當(dāng)于該元素不存在。

12.3.2?HTML5新增結(jié)構(gòu)元素

1.header元素

header元素通常定義在頁(yè)面頭部，一般包含網(wǎng)站的標(biāo)題、Logo圖片、banner圖片等內(nèi)容。例如：

注意：header元素是結(jié)構(gòu)元素，不是頭部元素head。一個(gè)HTML網(wǎng)頁(yè)中可以包含多個(gè)header元素。

2.nav元素

nav元素一般用于將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中，可使頁(yè)面的語(yǔ)義更加明確。例如：

通常一個(gè)HTML頁(yè)面中可以包含多個(gè)nav元素，作為主導(dǎo)航或側(cè)邊欄導(dǎo)航區(qū)域的定義。

3.article元素

article元素代表一個(gè)獨(dú)立的、完整的內(nèi)容塊，經(jīng)常用于定義論壇帖子、博客文章、新聞、評(píng)論等。例如：

article元素定義的內(nèi)容本身必須是有意義的且獨(dú)立于文檔的其余部分。一個(gè)HTML頁(yè)面中可以包含多個(gè)article元素。

4.aside元素

aside元素一般用于定義頁(yè)面的側(cè)邊欄、廣告區(qū)域、友情鏈接等頁(yè)面主要內(nèi)容的附屬信息。例如：

5.section元素

section元素一般用于定義文章的某個(gè)區(qū)域，如章節(jié)、頁(yè)眉、頁(yè)腳或者文章的其他區(qū)域。例如：

6.footer元素

footer元素一般用于定義一個(gè)頁(yè)面或區(qū)域的底部。例如：

上例中，使用了兩對(duì)footer元素，其中第一對(duì)footer元素應(yīng)用于article元素內(nèi)部，用于定義文章區(qū)域底部信息；第二對(duì)footer元素用于定義頁(yè)面底部的區(qū)域，一般包含版權(quán)信

息、網(wǎng)站的聯(lián)系方式等。

12.4浮動(dòng)布局

12.4.1?浮動(dòng)float在CSS中，float屬性會(huì)使元素脫離標(biāo)準(zhǔn)流，向左或向右排列，其周?chē)脑匾矔?huì)重新排列。float屬性一般用于圖像的排版，但它在布局時(shí)一樣非常有用。float的語(yǔ)法格式如下：float:關(guān)鍵字;說(shuō)明：float屬性的取值如表12-2所示。

【例12-5】設(shè)置圖像浮動(dòng)。

上述代碼在瀏覽器中的預(yù)覽效果如圖12-7所示。圖12-7設(shè)置圖像浮動(dòng)

【例12-6】浮動(dòng)在布局中的應(yīng)用。

設(shè)置float布局前后的效果分別如圖12-8和圖12-9所示。圖12-8float布局前

圖12-9float布局后

12.4.2?清除浮動(dòng)clear

在CSS中，clear屬性一般是在定義了浮動(dòng)元素之后設(shè)置的，用于指定元素的左側(cè)或右側(cè)不允許有浮動(dòng)的元素。

clear的語(yǔ)法格式如下：

clear:關(guān)鍵字;

說(shuō)明：clear屬性的取值如表12-3所示。

修改例12-6的CSS代碼，為選擇器div添加clear樣式，代碼如下：

則在瀏覽器中的預(yù)覽效果如圖12-10所示。圖12-10清除浮動(dòng)

【例12-7】使用overflow屬性清除浮動(dòng)。

本例中，元素section內(nèi)僅有的兩個(gè)子元素aside和article都設(shè)置為浮動(dòng)，這就導(dǎo)致section的高度顯示為0。為避免這種情況，為section設(shè)置了overflow屬性，這樣section的高度顯示就正常了。

12.5定位布局

12.5.1?邊偏移屬性在CSS中，邊偏移通過(guò)top、right、bottom、left這4個(gè)屬性進(jìn)行設(shè)置。它們的語(yǔ)法格式如下：

說(shuō)明：邊偏移屬性的取值為不同單位的數(shù)值或百分比，可以是負(fù)值。各屬性的含義如表12-4所示。

12.5.2?定位方式屬性

在CSS中，position屬性用于定義元素的定位方式。其語(yǔ)法格式如下：

position:關(guān)鍵字;

說(shuō)明：position屬性的取值如表12-5所示。

1.靜態(tài)定位static

當(dāng)元素沒(méi)有設(shè)置position屬性時(shí)，并不說(shuō)明該元素沒(méi)有定位，它會(huì)遵循默認(rèn)值顯示為靜態(tài)定位(static)，始終根據(jù)頁(yè)面的正常流進(jìn)行定位。在靜態(tài)定位狀態(tài)下，無(wú)法通過(guò)邊偏移

屬性(top、right、bottom、left)來(lái)改變?cè)氐奈恢谩?/p>

2.相對(duì)定位relative

當(dāng)position屬性的取值為relative時(shí)，可以將元素定位于相對(duì)位置，其位置是相對(duì)于它的原始位置計(jì)算而來(lái)的。對(duì)元素設(shè)置相對(duì)定位后，可通過(guò)邊偏移屬性改變?cè)氐奈恢谩?/p>

【例12-8】相對(duì)定位。

上述代碼在瀏覽器中的預(yù)覽效果如圖12-11所示。

圖12-11相對(duì)定位

3.固定定位fixed

固定定位以瀏覽器窗口作為參照物來(lái)定位網(wǎng)頁(yè)元素。設(shè)置了固定定位的元素將脫離標(biāo)準(zhǔn)流的控制，始終依據(jù)瀏覽器窗口來(lái)定義自己的顯示位置。不管瀏覽器滾動(dòng)條如何滾動(dòng)，

也不管瀏覽器窗口的大小如何變化，該元素都會(huì)始終顯示在瀏覽器窗口的固定位置。

【例12-9】固定定位。

上述代碼在瀏覽器中的預(yù)覽效果如圖12-12所示。圖12-12固定定位

4.絕對(duì)定位absolute

絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位(相對(duì)、固定或絕對(duì)定位)的父元素進(jìn)行定位，如果所有父元素都沒(méi)有定位，則依據(jù)瀏覽器窗口進(jìn)行定位。絕對(duì)定位是使用最廣泛的定位

方式，這種方法能夠很精準(zhǔn)地把元素定位到頁(yè)面中任何你想要的位置。

設(shè)置了絕對(duì)定位的元素完全脫離了標(biāo)準(zhǔn)流的控制，其前后元素會(huì)認(rèn)為該元素不存在，這個(gè)元素浮于其他元素之上，互不干擾，就如同處于不同的平面。

【例12-10】絕對(duì)定位。

上述代碼在瀏覽器中的預(yù)覽效果如圖12-13所示。圖12-13絕對(duì)定位

5.粘性定位sticky

粘性定位是基于用戶(hù)的滾動(dòng)位置來(lái)定位的。定義了粘性定位的元素，它的行為就像相對(duì)定位；而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像固定定位，它會(huì)固定在目標(biāo)位置。

【例12-11】粘性定位。

上述代碼在瀏覽器中的預(yù)覽效果如圖12-14所示。圖12-14粘性定位

12.5.3?層疊屬性

當(dāng)對(duì)多個(gè)元素同時(shí)設(shè)置定位時(shí)，定位元素之間有可能會(huì)發(fā)生重疊，如圖12-15所示。圖12-15元素重疊

默認(rèn)情況下，后定義元素的堆疊順序在先定義元素的前方，若要改變它們的堆疊順序，可以通過(guò)z-index屬性來(lái)實(shí)現(xiàn)。

z-index的語(yǔ)法格式如下：

z-index:數(shù)值;

說(shuō)明：z-index取值可以為正整數(shù)、負(fù)整數(shù)和0，數(shù)值越大堆疊順序越靠前。

注意：z-index屬性?xún)H對(duì)定位元素生效。

12.6彈性盒布局

彈性盒(FlexBox)布局是CSS3規(guī)范中提出的一種新的布局方式。引入彈性盒布局的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的條目進(jìn)行布局、對(duì)齊和分配空間。這種布局模式已被主流瀏覽器所支持，可以在Web應(yīng)用開(kāi)發(fā)中使用。設(shè)置了彈性屬性的元素，稱(chēng)為彈性容器(Flexcontainer)，它里面的所有子元素為容器成員，稱(chēng)為彈性項(xiàng)目(Flexitem)或彈性子元素。

1.彈性容器的屬性

要設(shè)置元素為彈性容器，通過(guò)“display:flex”屬性，可以選擇設(shè)置flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content屬性。各屬性的含義如表

12-6所示。

【例12-12】設(shè)置彈性容器。

上述代碼在瀏覽器中的預(yù)覽效果如圖12-16所示。圖12-16彈性容器

2.彈性子元素的屬性

彈性子元素的屬性及說(shuō)明如表12-7所示。

【例12-13】彈性盒布局。

上述代碼在瀏覽器中的預(yù)覽效果如圖12-17所示。圖12-17彈性盒布局

12.7案例：綜合應(yīng)用布局方式

【案例描述】本案例綜合應(yīng)用CSS布局方式實(shí)現(xiàn)詩(shī)詞欣賞網(wǎng)站首頁(yè)面的布局。案例源文件參考“模塊12案例”。【考核知識(shí)點(diǎn)】CSS頁(yè)面樣式、CSS頁(yè)面布局?！揪毩?xí)目標(biāo)】(1)掌握CSS頁(yè)面樣式設(shè)置。(2)掌握CSS頁(yè)面布局。

【案例源代碼】

(1)html結(jié)構(gòu)代碼如下：

【運(yùn)行結(jié)果】

源代碼的運(yùn)行結(jié)果如圖12-18所示。

圖12-18頁(yè)面運(yùn)行結(jié)果

【案例分析】

本案例布局結(jié)構(gòu)為常見(jiàn)的上中下結(jié)構(gòu)：

(1)頁(yè)面最外圍的容器為“<divid="container">”，它包裹了頁(yè)面中所有的元素，為它設(shè)置“margin:0auto;”樣式，使其水平居于瀏覽器中部。

(2)頭部使用<header>標(biāo)簽定義，內(nèi)部包含banner圖、導(dǎo)航及搜索欄，搜索欄使用絕對(duì)定位方式居于header元素右上方。

(3)頁(yè)面中部為側(cè)邊欄模塊和詩(shī)詞推薦模塊，分別使用<aside>標(biāo)簽和<article>標(biāo)簽定義。側(cè)邊欄使用浮動(dòng)布局“float:right;”實(shí)現(xiàn)右對(duì)齊，內(nèi)部包含分類(lèi)標(biāo)簽?zāi)K和廣告位模塊，分類(lèi)標(biāo)簽使用表格定義。詩(shī)詞推薦模塊使用浮動(dòng)布局“float:left;”實(shí)現(xiàn)左對(duì)齊，內(nèi)部使用“<divclass="tj">”標(biāo)簽定義各詩(shī)詞小模塊。