BTC-CS-HTML-01-第6章-CSS樣式高級(jí)應(yīng)用課件

1、第6章 CSS樣式高級(jí)應(yīng)用本章目標(biāo)熟悉頁(yè)面布局概念掌握盒子模型和盒子的浮動(dòng)與定位掌握使用CSS+DIV布局2CSS盒子模型CSS盒子模型概述盒模型，又稱(chēng)框模型(Box Model)。顧名思義，就是一個(gè)盒子。在盒子模型中，頁(yè)面中所有的HTML元素都被看作成一個(gè)個(gè)盒子。元素的外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content）就構(gòu)成了CSS盒模型。3盒子模型屬性border邊框?qū)傩裕涸O(shè)置邊框的顏色（border-color）、寬度（border-width）以及樣式（border-style）。4屬性描述border-color規(guī)定邊框的顏色border-

2、width規(guī)定邊框的寬度border-style規(guī)定邊框的樣式盒子模型屬性border-color：邊框顏色。語(yǔ)法：邊框也可以設(shè)置單邊顏色，CSS提供了4個(gè)單邊邊框顏色屬性，分別用來(lái)設(shè)置上、右、下、左邊框的顏色：border-top-color:顏色值border-right-color:顏色值border-bottom-color:顏色值border-left-color:顏色值5border-color：color盒子模型屬性border-width：邊框?qū)挾?。語(yǔ)法：與border-color相似，同樣提供了4個(gè)單邊邊框?qū)挾葘傩裕篵order-top-width:寬度值border-rig

3、ht-width:寬度值border-bottom-width:寬度值border-left-width:寬度值6border-width：medium | thin| thick | length盒子模型屬性border-style：邊框樣式。語(yǔ)法：與border-color相似，同樣提供了4個(gè)單邊邊框?qū)挾葘傩裕篵order-top-style：樣式值;border-bottom-style：樣式值;border-left-style：樣式值;border-right-style: 樣式值;7border-style：none | hidden | dotted | dashed | sol

4、id |double;盒子模型屬性border-style屬性取值8取值含義none默認(rèn)值，無(wú)邊框hidden與“none”相同。應(yīng)用于表時(shí)例外，用于解決邊框沖突dotted點(diǎn)線邊框dashed虛線邊框solid實(shí)線邊框double雙實(shí)線邊框groove邊框具有立體感的溝槽ridge邊框成脊形Inset使整個(gè)邊框凹陷，即在邊框內(nèi)嵌入一個(gè)立體邊框。效果顯示取決于border-color的值outset使整個(gè)邊框凸起，即在邊框內(nèi)嵌入一個(gè)立體邊框。效果顯示取決于border-color的值盒子模型屬性border邊框?qū)傩允纠? h4 text-align:center; background:#CF

5、F; #p1 background:#9CF; border:5px double #333; #p2 border-style:dashed solid; #p3 border-style:dotted; border-width:10px 15px; #p4 border-width:20px; border-style:groove; border-color:#0F0; 設(shè)置邊框 人生若只如初見(jiàn)，何事秋風(fēng)悲畫(huà)扇。 等閑變卻故人心，卻道故人心易變。 驪山語(yǔ)罷清宵半，淚雨霖鈴終不怨。 何如薄幸錦衣郎，比翼連枝當(dāng)日愿。盒子模型屬性padding屬性：是盒子的內(nèi)邊距，也稱(chēng)為內(nèi)邊界，表示邊框和內(nèi)

6、容之間的距離。語(yǔ)法：說(shuō)明與屬性border類(lèi)似padding，也可以設(shè)置1、2、3、4個(gè)屬性值。 如果需要單獨(dú)設(shè)置某一個(gè)方向的內(nèi)邊距，使用padding-top、padding-right、padding-bottom、padding-left來(lái)設(shè)置。10padding ：長(zhǎng)度| 百分比padding-top: 10px; /*設(shè)置上內(nèi)邊界*/padding-right: 1em; /*設(shè)置右內(nèi)邊界*/padding-bottom:50px; /*設(shè)置下內(nèi)邊界*/padding-left: 20%; /*設(shè)置左內(nèi)邊界*/padding:10px 20px 30px 40px; /*設(shè)置上下左右

7、內(nèi)邊界*/盒子模型屬性margin屬性：盒子的外邊距。外邊距的屬性有五種，即margin-top、margin-right、margin-bottom、margin-left以及綜合了以上四種方法的快捷外邊距屬性margin。語(yǔ)法：11margin-（top|right| bottom | left:長(zhǎng)度單位|百分比單位|automargin：5px 10px 15px 20px;/*分別設(shè)置上下左右四個(gè)邊界為5、10、15、20px */margin：5px; /*四個(gè)邊界均設(shè)置為5px*/margin：5px 10px；/*上下邊界設(shè)置為5px,左右邊界設(shè)置為10px*/margin：5p

8、x 10px 15px /*上邊界設(shè)置為5px,左右邊界設(shè)置為10px, 下邊界設(shè)置為15px*/盒子之間的關(guān)系標(biāo)準(zhǔn)文檔流“標(biāo)準(zhǔn)文檔流”（Normal Document Stream），簡(jiǎn)稱(chēng)“標(biāo)準(zhǔn)流”，是指在不使用其他與排列和定位相關(guān)的特殊CSS規(guī)則時(shí)，各種元素默認(rèn)的排列規(guī)則。HTML元素基本分為兩類(lèi)：塊級(jí)元素（block level）：每個(gè)塊級(jí)元素都是獨(dú)自占一行，其后的元素也只能另起一行，并不能兩個(gè)元素共用一行。行內(nèi)元素（inline）：行內(nèi)元素可以和其他元素處于一行，不用必須另起一行。12盒子之間的關(guān)系定位CSS 提供了三種基本的定位機(jī)制：標(biāo)準(zhǔn)文檔流（標(biāo)準(zhǔn)流）浮動(dòng)定位絕對(duì)定位除非專(zhuān)門(mén)指定，

9、否則所有框都在普通流中定位。標(biāo)準(zhǔn)流中的元素的位置由元素在 (X)HTML 中的位置決定。13盒子之間的關(guān)系定位position 屬性：定位的方式基本語(yǔ)法屬性值14position：static | absolute | fixed | relative取值 說(shuō)明 參照物static 靜態(tài)定位默認(rèn)值。元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。relative 相對(duì)定位 自己原來(lái)的位置absolute 絕對(duì)定位 已定位的祖先元素 / 瀏覽器視口fixed 固定定位 瀏覽器視口（并不是所有的瀏覽器都支持）盒子之間的關(guān)系定位static

10、：靜態(tài)定位，默認(rèn)值，沒(méi)有定位。語(yǔ)法：元素的位置由元素在 (X)HTML 中的位置決定。元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。15position:static;盒子之間的關(guān)系定位relative：相對(duì)定位，是指相對(duì)于它原來(lái)的位置進(jìn)行定位。語(yǔ)法：相對(duì)定位的元素沒(méi)有脫離文檔流，只是按照 left、right、top、bottom 值進(jìn)行了位置的偏移。 元素相對(duì)定位后，仍然在文檔流中占據(jù)原來(lái)的空間。16position:relative;盒子之間的關(guān)系定位absolute：絕對(duì)定位。相對(duì)于最近的已定位的祖先元素進(jìn)行定位。語(yǔ)法：如果

11、不存在已定位的祖先元素，則相對(duì)于瀏覽器窗口進(jìn)行定位。元素絕對(duì)定位后，將脫離文檔流，不再占據(jù)原來(lái)的空間。17position:absolute;盒子之間的關(guān)系定位fixed：固定定位。語(yǔ)法：類(lèi)似于absolute（絕對(duì)定位），不同的是其定位相對(duì)于視窗。18position:fixed;p.oneposition:fixed;left:5px;top:5px;p.twoposition:fixed;top:30px;right:5px;一些文本。更多的文本。盒子之間的關(guān)系浮動(dòng)把一個(gè)網(wǎng)頁(yè)元素移動(dòng)到網(wǎng)頁(yè)（或者其他包含塊）的一邊，脫離常規(guī)文檔流而表現(xiàn)為向右或向左浮動(dòng)。在 CSS 中，任何元素都可以浮動(dòng)。

12、浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素；且要指明一個(gè)寬度，否則它會(huì)盡可能地窄。另外當(dāng)可供浮動(dòng)的空間小于浮動(dòng)元素時(shí)，它會(huì)跑到下一行，直到擁有足夠放下它的空間。19盒子之間的關(guān)系浮動(dòng)float語(yǔ)法：說(shuō)明：浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。20float:right | left | none盒子之間的關(guān)系浮動(dòng)右浮動(dòng)示例：21盒子之間的關(guān)系浮動(dòng)左浮動(dòng)示例：22盒子之間的關(guān)系浮動(dòng)多個(gè)框左浮動(dòng)示例：23盒子之間的關(guān)系浮動(dòng)多個(gè)框左浮動(dòng)示例（容納不下框3）：24盒子之間的關(guān)

13、系浮動(dòng)多個(gè)框左浮動(dòng)示例（高度不一，卡住框3）：25盒子之間的關(guān)系浮動(dòng)清除浮動(dòng)：使用clear屬性可以讓元素邊上不出現(xiàn)其它浮動(dòng)元素。語(yǔ)法：屬性值：left 不允許元素左邊有浮動(dòng)的元素right 不允許元素的右邊有浮動(dòng)的元素both 元素的兩邊都不允許有浮動(dòng)的元素none 允許元素兩邊都有浮動(dòng)的元素26clear:right | left |both| none盒子之間的關(guān)系浮動(dòng)示例27清理浮動(dòng)案例#fruit float: left;#coat float: right; 這是一個(gè)例子 一個(gè)服裝圖片 一個(gè)水果圖片 這是一個(gè)例子 一個(gè)服裝圖片 一個(gè)水果圖片 DIV+CSS布局DIV+CSS布局的步

14、驟大致4步：第一步：在整體上對(duì)頁(yè)面進(jìn)行分塊。第二步：使用標(biāo)記進(jìn)行分塊設(shè)計(jì)，清理標(biāo)記的嵌套以及層疊關(guān)系。第三步：對(duì)標(biāo)記進(jìn)行CSS定位。第四步：在各個(gè)塊中填充相應(yīng)的內(nèi)容。28DIV+CSS布局常用的布局效果：29DIV+CSS布局常用頁(yè)面布局三行（列）模式：是把整個(gè)頁(yè)面水平（垂直）分成三個(gè)區(qū)域，三行模式包含頁(yè)面頭部、主題、頁(yè)腳三部分，三列模式包含左、中、右三部分。30三行模式 #header, #footer height: 100px; background:#9FF; #content height: 200px; background:#FCF; 頁(yè)面頭部 主體 頁(yè)腳DIV+CSS布局常用頁(yè)面布局三行二列、三行三列模式：將整個(gè)頁(yè)面水平分成三個(gè)區(qū)域即將頁(yè)面分成三行，然后將中間區(qū)域分成兩列或三列。31三行兩列模式 #header, #footer height: 50px; width:100%; background:#FCF; #content height: 100px; width:100%; #left height: 99px; width:30%; float:left; background:#CCC; #main height: 99px; width:70%; float:left; backgr