02_層疊樣式表cssppt課件

1、層疊樣式表CSS姓名: 王洪利微博: weibo/lampwanghongli郵箱: wanghonglilampbrother本章任務(wù)本章任務(wù)v1. CSS1. CSS簡(jiǎn)介簡(jiǎn)介 2. CSS 2. CSS規(guī)則的組成規(guī)則的組成v3. 3. 在在HTMLHTML文檔中放置文檔中放置CSSCSS的幾種方式的幾種方式 4. CSS 4. CSS選擇器選擇器v5. CSS5. CSS常見(jiàn)的樣式屬性和值常見(jiàn)的樣式屬性和值 6. DIV+CSS 6. DIV+CSS對(duì)頁(yè)面布局的優(yōu)勢(shì)對(duì)頁(yè)面布局的優(yōu)勢(shì)v7.div7.div和和spanspan 8. W3C 8. W3C盒子模型盒子模型v9. 9. 和頁(yè)面布局

2、有關(guān)的和頁(yè)面布局有關(guān)的CSSCSS屬性屬性10. 10. 盒子區(qū)塊框的定位盒子區(qū)塊框的定位v11. 11. 使用盒子模型的浮動(dòng)布局使用盒子模型的浮動(dòng)布局12. DIV+CSS12. DIV+CSS的兼容性問(wèn)題的兼容性問(wèn)題1. CSS1. CSS簡(jiǎn)介簡(jiǎn)介vCSSCSS是用于布局與美化網(wǎng)頁(yè)的是用于布局與美化網(wǎng)頁(yè)的. . vCSSCSS是是Cascading Style SheetsCascading Style Sheets的英文縮寫的英文縮寫, ,即層疊樣式表即層疊樣式表vCSSCSS語(yǔ)言是一種標(biāo)記語(yǔ)言語(yǔ)言是一種標(biāo)記語(yǔ)言, ,因此不需要編譯因此不需要編譯, ,可以直接由瀏覽器執(zhí)可以直接由瀏覽器執(zhí)

3、行行( (屬于瀏覽器解釋型語(yǔ)言屬于瀏覽器解釋型語(yǔ)言). ). vCSSCSS文件是一個(gè)文本文件文件是一個(gè)文本文件, ,它包含了一些它包含了一些CSSCSS標(biāo)記標(biāo)記,CSS,CSS文件必須使文件必須使用用.css.css為文件名后綴為文件名后綴. . vCSSCSS是大小寫不敏感的是大小寫不敏感的,CSS,CSS與與csscss是一樣的是一樣的. . vCSSCSS是由是由W3CW3C的的CSSCSS工作組產(chǎn)生和維護(hù)的工作組產(chǎn)生和維護(hù)的. .提示：可以通過(guò)簡(jiǎn)單的更改提示：可以通過(guò)簡(jiǎn)單的更改CSS文件文件,改變網(wǎng)頁(yè)的整體表現(xiàn)形式改變網(wǎng)頁(yè)的整體表現(xiàn)形式,可以減可以減少我們的工作量少我們的工作量,所以

4、她是每一個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員的必修課所以她是每一個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員的必修課. 2.CSS2.CSS規(guī)則的組成規(guī)則的組成v2.1 CSS2.1 CSS語(yǔ)法語(yǔ)法v2.2 2.2 長(zhǎng)度單位長(zhǎng)度單位v2.3 2.3 顏色單位顏色單位2.1 CSS2.1 CSS語(yǔ)法語(yǔ)法v基本語(yǔ)法：基本語(yǔ)法：vCSSCSS定義分別由：選擇符、屬性、屬性取值組定義分別由：選擇符、屬性、屬性取值組成成格式：格式：selectorproperty:valueselectorproperty:valuev選擇符可以是選擇符可以是HTMLHTML中的標(biāo)記名稱，具體下節(jié)講到中的標(biāo)記名稱，具體下節(jié)講到。v屬性和值之間用冒分開(kāi)，多個(gè)屬性之間加分號(hào)

5、屬性和值之間用冒分開(kāi)，多個(gè)屬性之間加分號(hào)vCSSCSS是大小寫不敏感的是大小寫不敏感的, ,在在CSSCSS語(yǔ)法中推薦使用小寫語(yǔ)法中推薦使用小寫v如：如：bodycolor:redbodycolor:red設(shè)置了頁(yè)面為紅色的文設(shè)置了頁(yè)面為紅色的文字字v例：例：ptext-align:center;color:red;font-ptext-align:center;color:red;font-family:family:宋體宋體 樣式規(guī)則樣式規(guī)則 p color:red; font-family: p color:red; font-family:隸書隸書; font-size:24px; f

6、ont-size:24px; 登鸛雀樓登鸛雀樓 白日依山盡，白日依山盡， 黃河入海流。黃河入海流。 欲窮千里目，欲窮千里目， 更上一層樓。更上一層樓。 選擇器選擇器用分號(hào)隔開(kāi)用分號(hào)隔開(kāi)本頁(yè)面中所有的本頁(yè)面中所有的P標(biāo)標(biāo)簽都應(yīng)用了此樣式簽都應(yīng)用了此樣式所有的段落所有的段落都采用都采用P樣樣式，保證風(fēng)式，保證風(fēng)格統(tǒng)一格統(tǒng)一2.2 2.2 長(zhǎng)度單位長(zhǎng)度單位v在在csscss樣式表中可以使用如下長(zhǎng)度單位：樣式表中可以使用如下長(zhǎng)度單位：v相對(duì)長(zhǎng)度單位：相對(duì)長(zhǎng)度單位：vpx px 像素像素PixelPixel）。）。 divfont-size:12px; divfont-size:12px; v% % 百

7、分比百分比 divfont-size:80%; divfont-size:80%; 2.3 2.3 顏色單位顏色單位vCSSCSS中的顏色值：中的顏色值：v#rrggbb (#rrggbb (如：如： #ffcc00) #ffcc00)v#rgb#rgb如：如：#fc0#fc0）vrgb(x,x,x) rgb(x,x,x) 其中其中x x是一個(gè)是一個(gè)0-2550-255的整數(shù)值的整數(shù)值, ,如如rgb(255,204,0)rgb(255,204,0)vrgb(x%,x%,x%) rgb(x%,x%,x%) 其中其中x x是一個(gè)是一個(gè)0-1000-100的整數(shù)值的整數(shù)值, ,如如rgb(100%

8、,80%,0)rgb(100%,80%,0)3. 3. 在在HTMLHTML文檔中放置文檔中放置CSSCSS的幾種方式的幾種方式v3.1 3.1 內(nèi)聯(lián)樣式表內(nèi)聯(lián)樣式表v3.2 3.2 內(nèi)嵌樣式表內(nèi)嵌樣式表v3.3 3.3 外部鏈接樣式表外部鏈接樣式表3.1 3.1 內(nèi)聯(lián)樣式表內(nèi)聯(lián)樣式表v在在HTMLHTML中使用中使用CSSCSS樣式的方式一般有三種：樣式的方式一般有三種：v內(nèi)聯(lián)引用、內(nèi)部引用和外部引用。內(nèi)聯(lián)引用、內(nèi)部引用和外部引用。v第一種：內(nèi)聯(lián)引用也叫行內(nèi)引用）第一種：內(nèi)聯(lián)引用也叫行內(nèi)引用）v就是把就是把CSSCSS樣式直接作用在樣式直接作用在HTMLHTML標(biāo)簽中。標(biāo)簽中。 使用CSS內(nèi)

9、聯(lián)引用表現(xiàn)段落. 特點(diǎn)：內(nèi)聯(lián)的樣式比其他方法更加靈活，但需要和展示的內(nèi)容混淆在一起，內(nèi)聯(lián)樣式會(huì)失去一些樣式表的優(yōu)點(diǎn)。v第二種：內(nèi)部引用也叫內(nèi)嵌式）第二種：內(nèi)部引用也叫內(nèi)嵌式）v使用使用stylestyle標(biāo)簽直接把標(biāo)簽直接把CSSCSS文件中的內(nèi)容加載到文件中的內(nèi)容加載到HTMLHTML文檔內(nèi)部的文檔內(nèi)部的標(biāo)簽里。標(biāo)簽里。 /* 設(shè)置本頁(yè)面p標(biāo)簽中的文字為以下樣式*/ p font-size: 10px; color: #FFFFFF; 文檔樣式表開(kāi)始，類型為CSS樣式樣式規(guī)則聲明文檔樣式表結(jié)束選擇器css注釋特點(diǎn)是適合用于一個(gè)HTML文檔具有獨(dú)一無(wú)二的樣式時(shí)。v第三種：外部引用第三種：外部引

10、用vCSSCSS外部引用使用了外接的外部引用使用了外接的CSSCSS文件文件, ,一般的瀏覽器一般的瀏覽器都帶有緩存功能都帶有緩存功能, ,所以用戶不用每次都下載此所以用戶不用每次都下載此CSSCSS文件文件. .v外部引用相對(duì)于內(nèi)部引用和內(nèi)聯(lián)引用來(lái)說(shuō)是高效外部引用相對(duì)于內(nèi)部引用和內(nèi)聯(lián)引用來(lái)說(shuō)是高效的是節(jié)省寬帶的的是節(jié)省寬帶的. .v外部引用是外部引用是W3CW3C推薦使用的推薦使用的v使用使用linklink標(biāo)簽引用標(biāo)簽引用CSSCSS 關(guān)系類型css文件名使用使用linklink標(biāo)簽標(biāo)簽應(yīng)用應(yīng)用CSSCSS多重樣式表的疊加多重樣式表的疊加v如果在同一個(gè)選擇器上使用幾個(gè)不同的樣式表時(shí)，這個(gè)屬

11、如果在同一個(gè)選擇器上使用幾個(gè)不同的樣式表時(shí)，這個(gè)屬性值將會(huì)疊加幾個(gè)樣式表，遇到?jīng)_突的地方會(huì)以最后定義性值將會(huì)疊加幾個(gè)樣式表，遇到?jīng)_突的地方會(huì)以最后定義的為準(zhǔn)。的為準(zhǔn)。v留意：依照后定義的優(yōu)先，所以優(yōu)先級(jí)最高的是內(nèi)聯(lián)樣式留意：依照后定義的優(yōu)先，所以優(yōu)先級(jí)最高的是內(nèi)聯(lián)樣式，內(nèi)部樣式表高于導(dǎo)入外部樣式表，鏈入的外部樣式表和，內(nèi)部樣式表高于導(dǎo)入外部樣式表，鏈入的外部樣式表和內(nèi)部樣式表之間是最后定義的優(yōu)先級(jí)高。內(nèi)部樣式表之間是最后定義的優(yōu)先級(jí)高。4. CSS4. CSS選擇器選擇符）選擇器選擇符）v4.1 HTML4.1 HTML選擇符選擇符v4.2 4.2 類選擇符類選擇符v4.3 ID4.3 ID選

12、擇符選擇符4.1 HTML4.1 HTML選擇符選擇符vHTML選擇符即是HTML標(biāo)簽，用來(lái)改變一個(gè)指定標(biāo)簽的樣式，任何HTML元素都可以是一個(gè)CSS的選擇符。v語(yǔ)法：HTML標(biāo)簽名屬性：值p text-indent:3em; /*當(dāng)中的選擇符是p*/h1 color:red; /*當(dāng)中的選擇符是h1*/ 4.2 4.2 類選擇符類選擇符vCSSCSS類選擇符類選擇符-匹配文檔中元素匹配文檔中元素E E的的classclass屬性的屬性值為屬性的屬性值為classnameclassname的元素的元素 v語(yǔ)法：標(biāo)記名語(yǔ)法：標(biāo)記名. .類名類名 屬性：值屬性：值 或或 . .類名類名 屬性：值屬

13、性：值 v類選擇符名稱的定義方式是類選擇符名稱的定義方式是,.,.符號(hào)，英文符號(hào)，英文dotdot，后加，后加類名稱類名稱classname classname v類選擇符的定義需要有類選擇符的定義需要有. .符號(hào)（符號(hào)（. .符號(hào)標(biāo)明是類選擇符），符號(hào)標(biāo)明是類選擇符），但是但是HTMLHTML文檔中的標(biāo)簽的文檔中的標(biāo)簽的classclass屬性名不能出現(xiàn)屬性名不能出現(xiàn). .符號(hào)，見(jiàn)符號(hào)，見(jiàn)下面示例：下面示例： p.dark-row background:#EAEAEA; /*設(shè)置p標(biāo)簽中class屬性為dark-row的*/.note font-size:small /*為note的類可以被

14、用于任何元素*/ 第一段 第二段 第三段 第四段 類選擇類選擇符定義符定義類選擇類選擇符應(yīng)用符應(yīng)用4.3 ID4.3 ID選擇符選擇符vCSS IDCSS ID選擇符選擇符 - - 匹配文檔中元素匹配文檔中元素E E的的idid屬性的屬性值為屬性的屬性值為idnameidname的元素的元素 v語(yǔ)法：語(yǔ)法：IDID名稱名稱 屬性：值屬性：值 vIDID選擇符名稱的定義方式是，選擇符名稱的定義方式是，# #符號(hào)，英文符號(hào)，英文poundpound，后加，后加IDID名稱名稱idname idname vIDID選擇符的定義需要有選擇符的定義需要有# #符號(hào)（符號(hào)（# #符號(hào)標(biāo)明是符號(hào)標(biāo)明是IDI

15、D選擇符），選擇符），但是但是HTMLHTML文檔中的標(biāo)簽的文檔中的標(biāo)簽的idid屬性名不能出現(xiàn)屬性名不能出現(xiàn)# #符號(hào)，見(jiàn)下符號(hào)，見(jiàn)下面示例面示例 vidid屬性的特殊之處在于，一個(gè)文檔中只能有一個(gè)元素使用屬性的特殊之處在于，一個(gè)文檔中只能有一個(gè)元素使用一個(gè)一個(gè)IDID選擇符與選擇符與classclass屬性正好相反），屬性正好相反），idid屬性可以用屬性可以用來(lái)單一地標(biāo)識(shí)一個(gè)元素來(lái)單一地標(biāo)識(shí)一個(gè)元素 。#main text-indent:3em; /*ID名稱main前加上一個(gè)#號(hào)*/ 文本縮進(jìn)3em ID選擇選擇符定義符定義ID選擇符在選擇符在HTML中的應(yīng)用中的應(yīng)用5. 5. 常見(jiàn)的

16、樣式屬性和值常見(jiàn)的樣式屬性和值v5.1 5.1 字體與顏色字體與顏色v5.2 5.2 背景屬性背景屬性v5.3 5.3 文本屬性文本屬性v5.4 5.4 邊框?qū)傩赃吙驅(qū)傩詖5.5 5.5 區(qū)塊屬性區(qū)塊屬性vCSSCSS中的樣式屬性比較多，經(jīng)常使用的屬性可以分為這么中的樣式屬性比較多，經(jīng)常使用的屬性可以分為這么幾類幾類: :字體、文本、背景、位置、邊框，以及其他一些樣字體、文本、背景、位置、邊框，以及其他一些樣式屬性。每個(gè)類中的屬性都可以單獨(dú)使用，如果同一類中式屬性。每個(gè)類中的屬性都可以單獨(dú)使用，如果同一類中多個(gè)屬性在一起使用，還可將它們合為一行解決。多個(gè)屬性在一起使用，還可將它們合為一行解決。

17、v如：如：font:font:|?/? v例：例：pfont:italic bold 12pt/14pt Times,serifpfont:italic bold 12pt/14pt Times,serifv闡明：闡明：p p標(biāo)簽中的字體為斜體加粗，字體大小為標(biāo)簽中的字體為斜體加粗，字體大小為1212點(diǎn)行高點(diǎn)行高為為1414點(diǎn)字體為點(diǎn)字體為TimesTimes，無(wú)效時(shí)用，無(wú)效時(shí)用serifserif。5.1 5.1 字體與顏色字體與顏色vCSS中修飾字體的屬性屬性描述font簡(jiǎn)寫屬性。作用是把所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中。 font-family 設(shè)置字體系列。比如：times、seri

18、ffont-size 設(shè)置字體的尺寸.可以使用絕對(duì)大小，相對(duì)大小、長(zhǎng)度和百分比f(wàn)ont-style 設(shè)置字體風(fēng)格。normal(標(biāo)準(zhǔn))、italic(斜體)、oblique傾斜font-weight 設(shè)置字體的粗細(xì)。body font: 12px Arial,宋體; /* 設(shè)置網(wǎng)頁(yè)文字大小12個(gè)像素Arial或宋體字 */ 5.2 5.2 背景屬性背景屬性vCSS中常用的控制背景的屬性屬性描述background簡(jiǎn)寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。 background-color 設(shè)置元素的背景顏色。transparent（透明色）background-image 把圖像設(shè)置為背景。

19、none(無(wú)) background-repeat 設(shè)置背景圖像是否及如何重復(fù)。repeat、repeat-x、repeat-y、no-repeatbackground-attachment 背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。scroll(滾動(dòng))或fixed(固定) background-position 背景圖像的起始位置。橫向(left,center,right),縱向(top,center,bottom),百分比和長(zhǎng)度。 v除了使用上表中提供的背景屬性，控制HTML元素的背景樣式，也可以將其簡(jiǎn)化使用一行代碼解決。通過(guò)背景類中的background屬性實(shí)現(xiàn)，語(yǔ)法格式如下：v ba

20、ckground:|bodybackground:white url(htmlhelp/foo.gif);/*設(shè)定body元素的背景顏色和圖片*/h1background:#7fffd4; /*設(shè)定h1元素的背景顏色*/pbackground:url(./backgrounds/pawn.png) #f0f8ff fixed; /*設(shè)定背景圖片、顏色和附件固定*/tablebackground:#0c0 url(leaves.jpg) no-repeat bottom right;/*使用全部的背景屬性*/5.3 5.3 文本屬性文本屬性vCSS文本屬性主要包括文字修飾、文字排列、文字縮進(jìn)、行

21、高，以及文字大小寫等。屬性描述text-decoration 向文本添加修飾。underline(下劃線),overline(上劃線),line-through(刪除線),blink(閃爍)默認(rèn)使用無(wú)text-align 對(duì)齊元素中的文本。left,right,center或justify text-indent 縮進(jìn)元素中文本的首行?？梢詾橐粋€(gè)長(zhǎng)度或百分比line-height 設(shè)置行高。 color設(shè)置文本顏色 5.4 5.4 邊框?qū)傩赃吙驅(qū)傩詖每個(gè)內(nèi)容或元素外面都可以有一個(gè)邊框. v邊框分上邊框(top),下邊框(bottom),左邊框(left),右邊框(right). v每種邊框有顏

22、色(color),款式(style),寬度(width)三種屬性. v如果上下左右的邊框表現(xiàn)不一樣,可以分別定義上下左右邊框,如果一樣可以統(tǒng)一使用border屬性定義.屬性描述border 簡(jiǎn)寫屬性，用于把針對(duì)四個(gè)邊的屬性設(shè)置在一個(gè)聲明。 border-style 用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。 border-width 簡(jiǎn)寫屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度。 border-color簡(jiǎn)寫屬性，設(shè)置元素的所有邊框中可見(jiàn)部分的顏色，或?yàn)?4 個(gè)邊分別設(shè)置顏色。 border-bottom 簡(jiǎn)寫屬性，用于把下邊框的所有屬性設(shè)置到一個(gè)聲明中

23、。 border-left簡(jiǎn)寫屬性，用于把左邊框的所有屬性設(shè)置到一個(gè)聲明中。 border-right簡(jiǎn)寫屬性，用于把右邊框的所有屬性設(shè)置到一個(gè)聲明中。 border-top 簡(jiǎn)寫屬性，用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中。 屬性描述border-bottom-color設(shè)置元素的下邊框的顏色。border-bottom-style設(shè)置元素的下邊框的樣式。border-bottom-width設(shè)置元素的下邊框的寬度。border-left-color設(shè)置元素的左邊框的顏色。border-left-style設(shè)置元素的左邊框的樣式。border-left-width設(shè)置元素的左邊框的寬度。bo

24、rder-right-color設(shè)置元素的右邊框的顏色。border-right-style設(shè)置元素的右邊框的樣式。border-right-width設(shè)置元素的右邊框的寬度。border-top-color設(shè)置元素的上邊框的顏色。border-top-style設(shè)置元素的上邊框的樣式。border-top-width設(shè)置元素的上邊框的寬度。border-style的取值的取值 ：none: 無(wú)樣式無(wú)樣式 hidden: 除了同表格的邊框發(fā)生沖突的時(shí)候除了同表格的邊框發(fā)生沖突的時(shí)候,其它同其它同none dotted: 點(diǎn)劃線、點(diǎn)劃線、dashed: 虛線、虛線、solid: 實(shí)線實(shí)線 、do

25、uble: 雙線雙線 、groove: 槽狀槽狀 ridge: 脊?fàn)罴範(fàn)?和和groove相反、相反、inset: 凹陷、凹陷、outset:凸出凸出,和和inset相反。相反。6. DIV+CSS6. DIV+CSS對(duì)頁(yè)面布局的優(yōu)勢(shì)對(duì)頁(yè)面布局的優(yōu)勢(shì)v采用DIV+CSS模式的網(wǎng)站具有以下優(yōu)勢(shì)：v表現(xiàn)和內(nèi)容相分離v代碼簡(jiǎn)潔，提高頁(yè)面瀏覽速度v易于維護(hù)和改版v提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率7.“7.“無(wú)意義的無(wú)意義的HTMLHTML元素元素divdiv和和spanspanvHTML只是賦予內(nèi)容的手段，大部分HTML標(biāo)簽都有其意義例如，標(biāo)簽p創(chuàng)建段落，h1標(biāo)簽創(chuàng)建標(biāo)題等等的，然而div和span標(biāo)簽似

26、乎沒(méi)有任何內(nèi)容上的意義，聽(tīng)起來(lái)就像一個(gè)泡沫做成的錘子一樣無(wú)用。但實(shí)際上，與CSS結(jié)合起來(lái)后，它們被用得十分廣泛。你所需要記住的是span和div是“無(wú)意義的標(biāo)簽。它們的存在純粹是應(yīng)用樣式，所以當(dāng)樣式表失效時(shí)它就沒(méi)有任何的作用v它們被用來(lái)組合成一大塊的HTML代碼并賦予一定的信息，大部分用類屬性class和標(biāo)識(shí)屬性id與元素聯(lián)系起來(lái)。span和div的不同之處在于span是內(nèi)聯(lián)的，用在一小塊的內(nèi)聯(lián)HTML中。而divdivision元素是塊級(jí)的簡(jiǎn)單地說(shuō)，它等同于其前后有斷行），用于組合一大塊的代碼，為HTML 文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的元素，可以包含段落、標(biāo)題、表格甚至其他部分，這使div

27、便于建立不同集成的類。vdiv的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由div標(biāo)簽的屬性來(lái)控制，或者是通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。8. W3C8. W3C盒子模型盒子模型v每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子，盒子具有寬度width和高度height），盒子里面的內(nèi)容到盒子的邊框之間的距離即填充padding），盒子本身有邊框border），而盒子邊框外和其他盒子之間，還有邊界margin）。聲明盒子模型的CSS屬性屬性描述margin是定義區(qū)塊外邊界與上級(jí)元素距離的屬性，用1到4個(gè)值來(lái)設(shè)置元素的邊界，每個(gè)值都是長(zhǎng)度、百分比或者auto，百

28、分比值參考上級(jí)元素的寬度，允許使用負(fù)邊界值。還可以使用margin-top/margin-right/margin-bottom/margin-leftpadding用于設(shè)置區(qū)域的內(nèi)邊距屬性，是邊框和元素內(nèi)容之間的間隔距離?？梢允褂茫簆adding-top/padding-right/padding-bottom/padding-left border邊框?qū)傩杂糜谠O(shè)置一個(gè)元素邊框風(fēng)格、邊框風(fēng)格、邊框顏色、可以一起設(shè)置4邊的邊框，也可對(duì)上邊框、有邊框、下邊框和右邊框進(jìn)行單獨(dú)設(shè)置，詳見(jiàn)上一次的課件內(nèi)容。width層的寬度，可以為一個(gè)長(zhǎng)度或“auto”值，不允許使用負(fù)值height層的高度，可以為一

29、個(gè)長(zhǎng)度或“auto”值，不允許使用負(fù)值 盒子模型 #box /* ID為box的盒子模型 */ width:200px; /* 盒子的寬度為200px */ height:200px; /* 盒子的高度為200px */ border:5px solid #ccc; /* 盒子邊框?qū)嵕€各邊寬5px */ padding:10px; /* 盒子的4個(gè)內(nèi)填充為10px */ margin:20px; /* 盒子的4個(gè)外邊距為10px */ 內(nèi)容區(qū) 9. 9. 和頁(yè)面布局有關(guān)的和頁(yè)面布局有關(guān)的CSSCSS屬性屬性屬 性描 述top層距離頂點(diǎn)縱坐標(biāo)的距離left層距離頂點(diǎn)橫坐標(biāo)的距離text-alig

30、n橫向排列，可以使用left(左對(duì)齊)、right(右對(duì)齊)和center局中l(wèi)ine-height指定行高，內(nèi)容都是在行的中間，所以可以使用這個(gè)屬性設(shè)置內(nèi)容垂直居中。這個(gè)屬性接受一個(gè)控制文本基線之間的間隔值，可以是數(shù)字，表示字體大小乘以該數(shù)所得。也可以使用百分比屬 性描 述padding用于設(shè)置區(qū)塊的內(nèi)邊距屬性，是邊框和元素內(nèi)容之間的間隔距離。與margin屬性相返，但使用的是相同屬性值。是上補(bǔ)白padding-top、右補(bǔ)白padding-right、下補(bǔ)白padding-bottom和左補(bǔ)白padding-left屬性的略寫float設(shè)置區(qū)塊漂浮屬性，允許網(wǎng)頁(yè)制作者將文本環(huán)繞在一個(gè)元素的

31、周圍，可以使用左漂浮left值，右漂浮right值clear清除屬性指定一個(gè)元素是否允許有元素漂浮在它的旁邊。值left移動(dòng)元素到在其左邊的漂浮的元素的下面；同樣的值right移動(dòng)到其右邊的漂浮的元素下面。其他的還有缺省的none值，和移動(dòng)元素到其兩邊的漂浮的元素的下面的both值1010、使用盒子模型的浮動(dòng)布局、使用盒子模型的浮動(dòng)布局 雖然使用絕對(duì)定位可以實(shí)現(xiàn)頁(yè)面布局，但由于調(diào)整某個(gè)區(qū)塊框時(shí)其它區(qū)塊的位置并不會(huì)跟隨著改變，所以并不是布局的首選方式。而使用浮動(dòng)的區(qū)塊框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含它區(qū)塊的邊框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂２⑶矣捎诟?dòng)框不在文檔的普通流中，所以文檔的普通流中的區(qū)塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。10.1 設(shè)置浮動(dòng)10.2 10.2 行框和清理行框和清理在進(jìn)行頁(yè)面布局時(shí)，經(jīng)常需要設(shè)置多個(gè)區(qū)塊框并列在一行中排列。最常見(jiàn)的方式就是使用float屬性，再通過(guò)left或right值移動(dòng)區(qū)塊框向左或向右浮動(dòng)。但當(dāng)前面并列的多個(gè)區(qū)塊框總寬度不足包含框的100%時(shí)，就會(huì)在行框中留出一定的寬度，而下面的某個(gè)區(qū)塊框又恰好滿足這個(gè)寬度，則很可能會(huì)向上提，和上