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

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

HTML標準流12.3結構元素12.4浮動布局12.5定位布局12.6彈性盒布局12.7案例：綜合應用布局方式思考與練習題

12.1盒子模型

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

圖12-1展示了W3C標準的盒子模型。圖12-1CSS盒子模型

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

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

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

1.width和height屬性

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

【例12-1】設置元素的寬與高。

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

2.overflow屬性

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

overflow:關鍵字;

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

【例12-2】內(nèi)容溢出處理。

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

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

12.1.2?內(nèi)邊距

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

說明：padding的取值可以是1～4個，代表的含義如下：

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

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

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

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

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

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

12.1.3?外邊距

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

margin-left，它們的語法格式如下：

【例12-4】設置外邊距。

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

本例中，設置了盒子的外邊距為：上下10px，左右30px?？梢钥闯?，“盒子1”與“盒子2”之間的間距并不是“盒子1”的下邊距加“盒子2”的上邊距，而是只有10px，這是因為塊級元素的垂直相鄰外邊距會合并。

12.2HTML標準流

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

例如，下面這段HTML代碼：

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

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

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

12.3結構元素

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

2.行內(nèi)元素

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

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

12.3.1?元素類型的轉換

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

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

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

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

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

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

12.3.2?HTML5新增結構元素

1.header元素

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

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

2.nav元素

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

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

3.article元素

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

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

4.aside元素

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

5.section元素

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

6.footer元素

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

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

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

12.4浮動布局

12.4.1?浮動float在CSS中，float屬性會使元素脫離標準流，向左或向右排列，其周圍的元素也會重新排列。float屬性一般用于圖像的排版，但它在布局時一樣非常有用。float的語法格式如下：float:關鍵字;說明：float屬性的取值如表12-2所示。

【例12-5】設置圖像浮動。

上述代碼在瀏覽器中的預覽效果如圖12-7所示。圖12-7設置圖像浮動

【例12-6】浮動在布局中的應用。

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

圖12-9float布局后

12.4.2?清除浮動clear

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

clear的語法格式如下：

clear:關鍵字;

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

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

則在瀏覽器中的預覽效果如圖12-10所示。圖12-10清除浮動

【例12-7】使用overflow屬性清除浮動。

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

12.5定位布局

12.5.1?邊偏移屬性在CSS中，邊偏移通過top、right、bottom、left這4個屬性進行設置。它們的語法格式如下：

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

12.5.2?定位方式屬性

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

position:關鍵字;

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

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

當元素沒有設置position屬性時，并不說明該元素沒有定位，它會遵循默認值顯示為靜態(tài)定位(static)，始終根據(jù)頁面的正常流進行定位。在靜態(tài)定位狀態(tài)下，無法通過邊偏移

屬性(top、right、bottom、left)來改變元素的位置。

2.相對定位relative

當position屬性的取值為relative時，可以將元素定位于相對位置，其位置是相對于它的原始位置計算而來的。對元素設置相對定位后，可通過邊偏移屬性改變元素的位置。

【例12-8】相對定位。

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

圖12-11相對定位

3.固定定位fixed

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

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

【例12-9】固定定位。

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

4.絕對定位absolute

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

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

設置了絕對定位的元素完全脫離了標準流的控制，其前后元素會認為該元素不存在，這個元素浮于其他元素之上，互不干擾，就如同處于不同的平面。

【例12-10】絕對定位。

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

5.粘性定位sticky

粘性定位是基于用戶的滾動位置來定位的。定義了粘性定位的元素，它的行為就像相對定位；而當頁面滾動超出目標區(qū)域時，它的表現(xiàn)就像固定定位，它會固定在目標位置。

【例12-11】粘性定位。

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

12.5.3?層疊屬性

當對多個元素同時設置定位時，定位元素之間有可能會發(fā)生重疊，如圖12-15所示。圖12-15元素重疊

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

z-index的語法格式如下：

z-index:數(shù)值;

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

注意：z-index屬性僅對定位元素生效。

12.6彈性盒布局

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

1.彈性容器的屬性

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

12-6所示。

【例12-12】設置彈性容器。

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

2.彈性子元素的屬性

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

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

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

12.7案例：綜合應用布局方式

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

【案例源代碼】

(1)html結構代碼如下：

【運行結果】

源代碼的運行結果如圖12-18所示。

圖12-18頁面運行結果

【案例分析】

本案例布局結構為常見的上中下結構：

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

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

(3)頁面中部為側邊欄模塊和詩詞推薦模塊，分別使用<aside>標簽和<article>標簽定義。側邊欄使用浮動布局“float:right;”實現(xiàn)右對齊，內(nèi)部包含分類標簽模塊和廣告位模塊，分類標簽使用表格定義。詩詞推薦模塊使用浮動布局“float:left;”實現(xiàn)左對齊，內(nèi)部使用“<divclass="tj">”標簽定義各詩詞小模塊。