CSS選擇器類型總結(jié)

1、CSS所有的選擇器類型總結(jié)所有的選擇器類型總結(jié)復(fù)合選擇器的優(yōu)先級計算復(fù)合選擇器的優(yōu)先級計算p復(fù)合選擇器的優(yōu)先級比組成它的單個選擇器的復(fù)合選擇器的優(yōu)先級比組成它的單個選擇器的優(yōu)先級都要高。我們知道基本選擇器的優(yōu)先級優(yōu)先級都要高。我們知道基本選擇器的優(yōu)先級是是ID選擇器選擇器類選擇器類選擇器標(biāo)記選擇器標(biāo)記選擇器，那么不妨，那么不妨設(shè)設(shè)ID選擇器的優(yōu)先級是選擇器的優(yōu)先級是100，類選擇器的優(yōu)先級，類選擇器的優(yōu)先級是是10，標(biāo)記選擇器的優(yōu)先級是，標(biāo)記選擇器的優(yōu)先級是1，那么復(fù)合選擇，那么復(fù)合選擇器的優(yōu)先級就是組成它的各個基本選擇器優(yōu)先器的優(yōu)先級就是組成它的各個基本選擇器優(yōu)先級值的和。例如：級值的和。例

2、如：h1color:red;/* 特殊性特殊性=1 */p emcolor:blue; /* 特殊性特殊性=2 */.warningcolor:yellow; /* 特殊性特殊性=10 */p.note em.darkcolor:gray; /* 特殊性特殊性=22 */#maincolor:black; /* 特殊性特殊性=100 */復(fù)合選擇器的優(yōu)先級例題復(fù)合選擇器的優(yōu)先級例題 #aa ul li color:red.aa color:blueweb標(biāo)準(zhǔn)常見問題大全之標(biāo)準(zhǔn)常見問題大全之復(fù)合選復(fù)合選擇器擇器的優(yōu)先級的優(yōu)先級由于由于#aa ul li的特殊性為的特殊性為102，而，而.aa的特

3、殊性為的特殊性為10，所以，所以將應(yīng)用將應(yīng)用#aa ul li定義的規(guī)則，文字為紅色，如果希望文定義的規(guī)則，文字為紅色，如果希望文字顏色為藍(lán)色，可提高字顏色為藍(lán)色，可提高.aa的特殊性，如的特殊性，如#aa ul li.aa。p所以綜合來說，元素應(yīng)用所以綜合來說，元素應(yīng)用CSS樣式的優(yōu)先樣式的優(yōu)先級應(yīng)為級應(yīng)為 p在在ie中中div.red的優(yōu)先級大于的優(yōu)先級大于div .red!important 行內(nèi)樣式行內(nèi)樣式 id選擇選擇器器類選擇類選擇器器標(biāo)記選擇標(biāo)記選擇器器繼承樣繼承樣式式復(fù)合選擇器復(fù)合選擇器復(fù)雜選擇器名稱的分解復(fù)雜選擇器名稱的分解 p如果一個復(fù)雜的選擇器名稱中既有逗號，也有如果一個

4、復(fù)雜的選擇器名稱中既有逗號，也有空格，也有空格，也有.號，和：號，怎么將其分解呢？像號，和：號，怎么將其分解呢？像四則運算中的先乘除，后加減一樣，四則運算中的先乘除，后加減一樣，CSS選擇選擇器分解的原則是：先器分解的原則是：先逗號逗號，接著，接著空格空格。例如：。例如：#menu a.class :hover b, .special b.class 就可先分解為：就可先分解為：（#menu a.class :hover b），（），（.special b.class）p這樣就分解成了兩個三層包含選擇器，其中左這樣就分解成了兩個三層包含選擇器，其中左邊包含選擇器的中間是一個定義了類名的邊包含選

5、擇器的中間是一個定義了類名的a標(biāo)記標(biāo)記的偽類選擇器。的偽類選擇器。 CSS樣式的總體設(shè)計原則樣式的總體設(shè)計原則 p定義標(biāo)記選擇器最省事，它不需在元素的定義標(biāo)記選擇器最省事，它不需在元素的html標(biāo)記里添加標(biāo)記里添加class或或id屬性，因此初學(xué)者最喜歡定屬性，因此初學(xué)者最喜歡定義標(biāo)記選擇器或由標(biāo)記選擇器組成的包含選擇義標(biāo)記選擇器或由標(biāo)記選擇器組成的包含選擇器。但有些標(biāo)記（如器。但有些標(biāo)記（如a標(biāo)記）在網(wǎng)頁文檔的各部標(biāo)記）在網(wǎng)頁文檔的各部分都出現(xiàn)得很多，它們在各部分的樣式風(fēng)格往分都出現(xiàn)得很多，它們在各部分的樣式風(fēng)格往往不一樣。往不一樣。p例如導(dǎo)航條內(nèi)的例如導(dǎo)航條內(nèi)的a標(biāo)記就要求和文檔其他地方的

6、標(biāo)記就要求和文檔其他地方的a標(biāo)記樣式不同，我們當(dāng)然可以將導(dǎo)航條內(nèi)的各標(biāo)記樣式不同，我們當(dāng)然可以將導(dǎo)航條內(nèi)的各個個a標(biāo)記定義為一個類，但這就要將導(dǎo)航條內(nèi)的標(biāo)記定義為一個類，但這就要將導(dǎo)航條內(nèi)的各個各個a標(biāo)記都添加一個標(biāo)記都添加一個class屬性，實際上，可以屬性，實際上，可以將導(dǎo)航條內(nèi)將導(dǎo)航條內(nèi)a標(biāo)記的父標(biāo)記（如標(biāo)記的父標(biāo)記（如ul）添加一個）添加一個id屬性（屬性（#menu），然后用包含選擇器（），然后用包含選擇器（#menu a）就可以選中導(dǎo)航條內(nèi)的各個就可以選中導(dǎo)航條內(nèi)的各個a標(biāo)記了。標(biāo)記了。CSS樣式的總體設(shè)計原則樣式的總體設(shè)計原則2p對于幾個不同的選擇器，如果它們有一些對于幾個不同的

7、選擇器，如果它們有一些共同的樣式聲明，就可以先用并集選擇器共同的樣式聲明，就可以先用并集選擇器對它們先集體聲明，然后再單獨定義某些對它們先集體聲明，然后再單獨定義某些選擇器的特殊樣式。選擇器的特殊樣式。CSS屬性的值和單位屬性的值和單位 CSS屬性的值和屬性的值和html屬性值的比較屬性值的比較 pfont-size:12pxp值值是對屬性的具體描述，而單位是值的基是對屬性的具體描述，而單位是值的基礎(chǔ)。沒有單位，瀏覽器將不知道一個邊框礎(chǔ)。沒有單位，瀏覽器將不知道一個邊框是是10厘米還是厘米還是10象素。象素。CSS中較復(fù)雜的值中較復(fù)雜的值和單位有顏色取值和長度單位。和單位有顏色取值和長度單位。

8、 p注意：注意：HTML的屬性的值一般不要寫單位，的屬性的值一般不要寫單位，這是因為這是因為html屬性的取值可用的單位很少，屬性的取值可用的單位很少，要么是象素，要么是百分比要么是象素，要么是百分比pCSS長度單位長度單位 p為了正確顯示網(wǎng)頁中的元素，許多為了正確顯示網(wǎng)頁中的元素，許多CSS屬性都屬性都依賴于依賴于長度長度。所有長度都可以為正數(shù)或者負(fù)數(shù)。所有長度都可以為正數(shù)或者負(fù)數(shù)加上一個單位來表示，而長度單位大致可分為加上一個單位來表示，而長度單位大致可分為三類：絕對單位、相對單位和百分比。三類：絕對單位、相對單位和百分比。p絕對單位絕對單位絕對單位很簡單，包括英寸（絕對單位很簡單，包括英

9、寸（in）、厘米（）、厘米（cm）、）、毫米（毫米（mm）、磅（）、磅（pt）和）和pica（pc）。）。由于同一個長度在不同的顯示器或者相同顯示器由于同一個長度在不同的顯示器或者相同顯示器不同的分辨率中顯示并不相同，不會根據(jù)顯示不同的分辨率中顯示并不相同，不會根據(jù)顯示面積按比例調(diào)整大小。所以絕對單位很少用。面積按比例調(diào)整大小。所以絕對單位很少用。 相對單位相對單位顧名思義，相對單位的長短取決于某個參照物，顧名思義，相對單位的長短取決于某個參照物，如屏幕的分辨率，字體高度等。如屏幕的分辨率，字體高度等。有有3種相對長度單位，種相對長度單位，元素的字體高度（元素的字體高度（em）、字）、字母母x

10、的高度（的高度（ex）和象素（）和象素（px）。）。em就是元素原來給定的字體就是元素原來給定的字體font-size的值，如果的值，如果元素原來給定的元素原來給定的font-size值是值是14px，那么，那么1em就是就是14px。ex是以字體中小寫是以字體中小寫x字母為基準(zhǔn)的單位，不字母為基準(zhǔn)的單位，不同的字體有不同的同的字體有不同的x高度，因此即使高度，因此即使font-size相同相同而字體不同的話，而字體不同的話，1ex的高度也會不同。的高度也會不同。px(像素像素)：象素指顯示器按分辨率分割得到的小點，：象素指顯示器按分辨率分割得到的小點，因為顯示器由于分辨率或大小不同，象素點的

11、大因為顯示器由于分辨率或大小不同，象素點的大小是不同的，所以象素也是相對單位。目前大多小是不同的，所以象素也是相對單位。目前大多數(shù)設(shè)計者都傾向于使用象素作為單位。數(shù)設(shè)計者都傾向于使用象素作為單位。百分比百分比p百分比顯得非常簡單，也可看成是一個相百分比顯得非常簡單，也可看成是一個相對量。如：對量。如：tdfont-size:12px; line-height: 160%; /*設(shè)定段落的行高為字體高度的設(shè)定段落的行高為字體高度的160% */hr width: 80% /* 線段長度是相線段長度是相對于瀏覽器窗口的對于瀏覽器窗口的80% */顏色的值顏色的值 pCSS中定義顏色的值可使用中定義

12、顏色的值可使用命名顏色、命名顏色、RGB顏顏色和色和16進(jìn)制顏色進(jìn)制顏色三種方法三種方法pa. 命名顏色：命名顏色：pcolor: red; 其中其中“red”就是命名顏色，能夠被就是命名顏色，能夠被CSS識別的顏識別的顏色名大約有色名大約有140種。（參看種。（參看CSS樣式表中文手冊樣式表中文手冊附錄）。附錄）。pb. RGB顏色：顏色：顯示器的成像原理是紅、綠、藍(lán)三色光的疊顯示器的成像原理是紅、綠、藍(lán)三色光的疊加形成各種各樣的色彩，因此，通過設(shè)定加形成各種各樣的色彩，因此，通過設(shè)定RGB三色的值來描述顏色也是最直接的方法。三色的值來描述顏色也是最直接的方法。格式如下所示：格式如下所示：t

13、d color: rgb(139,31,185); td color: rgb(12%,201,50%); 其值可以取其值可以取0255之間的整數(shù)，也可以是之間的整數(shù)，也可以是0%100%的百分?jǐn)?shù)，不過的百分?jǐn)?shù)，不過Firefox瀏覽器不瀏覽器不支持百分?jǐn)?shù)值。支持百分?jǐn)?shù)值。pc. 16進(jìn)制顏色進(jìn)制顏色 16進(jìn)制顏色的使用最普遍，其原理同樣是進(jìn)制顏色的使用最普遍，其原理同樣是RGB色，不過將色，不過將RGB顏色的數(shù)值轉(zhuǎn)換成了顏色的數(shù)值轉(zhuǎn)換成了16進(jìn)制的進(jìn)制的數(shù)字，并用更加簡單的方式寫出來數(shù)字，并用更加簡單的方式寫出來#RRGGBB，如，如#ffcc33。其參數(shù)取值范圍為：其參數(shù)取值范圍為：00F

14、F（對應(yīng)十進(jìn)制仍為（對應(yīng)十進(jìn)制仍為0255），如果每個參數(shù)各自在兩位上的數(shù)值相），如果每個參數(shù)各自在兩位上的數(shù)值相同，那么該值也可縮寫成同，那么該值也可縮寫成“#RGB”的方式。例的方式。例如，如，#ffcc33可以縮寫為可以縮寫為#fc3。CSS的濾鏡屬性簡介的濾鏡屬性簡介 CSS的濾鏡的濾鏡pCSS濾鏡并不是瀏覽器的插件，也濾鏡并不是瀏覽器的插件，也不符合不符合CSS標(biāo)準(zhǔn)標(biāo)準(zhǔn)，而是微軟公司為增強瀏覽器功，而是微軟公司為增強瀏覽器功能而特意開發(fā)的并整合在能而特意開發(fā)的并整合在IE瀏覽器瀏覽器中的一中的一類功能的集合。由于瀏覽器中類功能的集合。由于瀏覽器中IE有著很廣有著很廣的使用范圍，因此的

15、使用范圍，因此CSS濾鏡也被廣大設(shè)計濾鏡也被廣大設(shè)計者所喜愛。者所喜愛。CSS的濾鏡的濾鏡p濾鏡濾鏡(filter)屬性是屬性是CSS的一個的一個擴展擴展部分，部分，它能夠渲染對象元素，創(chuàng)建出藝術(shù)效果。它能夠渲染對象元素，創(chuàng)建出藝術(shù)效果。Dreamweaver的的CSS樣式提供了豐富的濾樣式提供了豐富的濾鏡效果，使用這些濾鏡能夠創(chuàng)建出文本和鏡效果，使用這些濾鏡能夠創(chuàng)建出文本和圖像的圖像的3D、陰影和淡入淡出等效果，應(yīng)、陰影和淡入淡出等效果，應(yīng)用在頁面中，在一定程度上美化了頁面。用在頁面中，在一定程度上美化了頁面。但濾鏡屬性只被但濾鏡屬性只被IE6和和IE7支持，由于不符支持，由于不符合合CSS

16、標(biāo)準(zhǔn)，所以標(biāo)準(zhǔn)，所以Firefox和和IE8不支持。不支持。CSS濾鏡的用法濾鏡的用法pCSS濾鏡的標(biāo)識符是濾鏡的標(biāo)識符是“filter”，總體上跟，總體上跟其它其它CSS語句一樣，都十分簡單：語句一樣，都十分簡單：pfilter:filtername(parameters); palpha.alpha /*類選擇器類選擇器*/filter:alpha(opacity=50);濾鏡屬性可分為無參濾鏡和有參濾鏡濾鏡屬性可分為無參濾鏡和有參濾鏡CSS濾鏡屬性的分類濾鏡屬性的分類無參濾鏡無參濾鏡Gray：使對象產(chǎn)生灰度圖使對象產(chǎn)生灰度圖效果，僅對圖像有作用。效果，僅對圖像有作用。Invert：使對象

17、產(chǎn)生使對象產(chǎn)生“底片底片”效果。效果。Xray：使對象產(chǎn)生使對象產(chǎn)生“X光光片片”效果。效果。FlipH：使對象產(chǎn)生水平翻使對象產(chǎn)生水平翻轉(zhuǎn)效果。轉(zhuǎn)效果。FlipV：使對象產(chǎn)生垂直翻使對象產(chǎn)生垂直翻轉(zhuǎn)效果。轉(zhuǎn)效果。Light：使對象產(chǎn)生一種模使對象產(chǎn)生一種模擬光源的投射效果擬光源的投射效果 有參濾鏡有參濾鏡Alpha：設(shè)置對象的透明度。設(shè)置對象的透明度。Blur：使對象產(chǎn)生模糊效果。使對象產(chǎn)生模糊效果。Dropshadow：設(shè)置對象的陰設(shè)置對象的陰影效果。影效果。Chroma：將對象中指定的顏將對象中指定的顏色設(shè)置為透明色。色設(shè)置為透明色。Glow：在對象的邊緣產(chǎn)生類在對象的邊緣產(chǎn)生類似發(fā)光的

18、效果。似發(fā)光的效果。BlendTrans：設(shè)置對象的淡設(shè)置對象的淡入淡出效果。入淡出效果。RevealTrans：設(shè)置對象之間設(shè)置對象之間的切換效果的切換效果 濾鏡的應(yīng)用濾鏡的應(yīng)用1.使網(wǎng)頁變黑白使網(wǎng)頁變黑白由于由于gray濾鏡只能使圖像變黑白，要使網(wǎng)頁濾鏡只能使圖像變黑白，要使網(wǎng)頁整體變黑白需對整體變黑白需對html標(biāo)記使用如下濾鏡代標(biāo)記使用如下濾鏡代碼：碼：html filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 濾鏡的應(yīng)用濾鏡的應(yīng)用p用用Alpha屬性制作漸變的屬性制作漸變的hr分隔條分隔條hr filt

19、er: Alpha(opacity=10%, FinishOpacity=100%, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=8);color: #FF0033; 濾鏡的應(yīng)用濾鏡的應(yīng)用設(shè)置網(wǎng)頁之間的切換效果。設(shè)置網(wǎng)頁之間的切換效果。 CSS的盒子模型的盒子模型CSS的盒子模型的盒子模型p盒子模型是盒子模型是CSS的基石之一的基石之一，它指定元素它指定元素如何顯示以及如何顯示以及（在某種程度上）如何相互在某種程度上）如何相互交互交互p頁面上的每個元素都被瀏覽器看成是一個頁面上的每個元素都被瀏覽器看成是一個矩形的盒子矩形的盒子，這個盒子由

20、元素的，這個盒子由元素的內(nèi)容內(nèi)容、填填充充、邊框邊框和和邊界邊界組成。組成。p網(wǎng)頁就是由許多個盒子通過不同的排列方網(wǎng)頁就是由許多個盒子通過不同的排列方式（上下排列，并列排列，嵌套排列）堆式（上下排列，并列排列，嵌套排列）堆積而成。積而成。 CSS的盒子模型的盒子模型CSS的盒子模型的盒子模型p每個每個HTML元素都可以看作是一個裝了東元素都可以看作是一個裝了東西的盒子西的盒子p盒子里面的內(nèi)容到盒子的邊框之間的距離盒子里面的內(nèi)容到盒子的邊框之間的距離即即填充填充(padding),盒子本身有盒子本身有邊框邊框(border),而盒子邊框外和其它盒子之間，還有而盒子邊框外和其它盒子之間，還有邊界邊

21、界(magin),如圖所示如圖所示p默認(rèn)情況下盒子的邊框是無，背景色是透默認(rèn)情況下盒子的邊框是無，背景色是透明，所以我們在默認(rèn)情況下看不到盒子明，所以我們在默認(rèn)情況下看不到盒子contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的計算元素盒子大小的計算一個元素實際寬度一個元素實際寬度=左邊界左邊框左填左邊界左邊框左填充

22、內(nèi)容寬度右填充右邊框右邊界充內(nèi)容寬度右填充右邊框右邊界CSS盒子模型計算題盒子模型計算題p如果盒子里面嵌套有盒子，那么兩個盒子如果盒子里面嵌套有盒子，那么兩個盒子邊框之間的距離等于外面盒子的填充值邊框之間的距離等于外面盒子的填充值里面盒子的邊框值里面盒子的邊框值#box1 background-color: #ddd;margin:15px;padding:5px; #box2 color: black;background-color: #aaa;margin: 20px;padding: 10px 0px 10px 10px;width:100px;bodyborder:1px dotte

23、d #FF0000這是里面這是里面的盒子的盒子盒子模型的特性盒子模型的特性p邊界值邊界值margin可為負(fù)，填充可為負(fù)，填充padding不可不可為負(fù)為負(fù)p邊框邊框border默認(rèn)值為默認(rèn)值為0，即不顯示，即不顯示p行內(nèi)元素，如行內(nèi)元素，如a，定義上下邊界不影響行，定義上下邊界不影響行高高對盒子模型的思考對盒子模型的思考p邊框是實的，我們可以看到實實在在的邊邊框是實的，我們可以看到實實在在的邊框，而填充和邊界都是虛的，我們只能看框，而填充和邊界都是虛的，我們只能看到他們對元素的影響到他們對元素的影響p盒子模型中只能設(shè)置兩類顏色，即盒子模型中只能設(shè)置兩類顏色，即邊框顏邊框顏色色和和背景顏色背景顏

24、色p盒子模型可設(shè)置三類距離，即邊界距離盒子模型可設(shè)置三類距離，即邊界距離margin，填充距離，填充距離padding和邊框值和邊框值border屬性值的簡寫形式屬性值的簡寫形式 p方法是按照規(guī)定的順序，給出方法是按照規(guī)定的順序，給出2個、個、3個或者個或者4個個屬性值，它們的含義將有所區(qū)別，具體含義如屬性值，它們的含義將有所區(qū)別，具體含義如下：下： 如果給出如果給出2個屬性值，前者表示個屬性值，前者表示上下邊框上下邊框的屬性，的屬性，后者表示后者表示左右邊框左右邊框的屬性；的屬性； 如果給出如果給出3個屬性值，前者表示個屬性值，前者表示上邊框上邊框的屬性，的屬性，中間的數(shù)值表示中間的數(shù)值表示

25、左右邊框左右邊框的屬性，后者表示的屬性，后者表示下下邊框邊框的屬性；的屬性； 如果給出如果給出4個屬性值，依次表示個屬性值，依次表示上上、右右、下下、左左邊框的屬性，即順時針排序。邊框的屬性，即順時針排序。各種元素盒子屬性的默認(rèn)值各種元素盒子屬性的默認(rèn)值p大部分大部分html元素的盒子屬性元素的盒子屬性(margin, padding)默認(rèn)值都為默認(rèn)值都為0；p有少數(shù)有少數(shù)html元素的元素的(margin, padding)瀏覽瀏覽器默認(rèn)值不為器默認(rèn)值不為0，例如：，例如：body，p，ul，li，form標(biāo)記等，因此我們有時有必要先設(shè)置標(biāo)記等，因此我們有時有必要先設(shè)置它們的這些屬性為它們的

26、這些屬性為0。pInput元素的邊框?qū)傩阅J(rèn)不為元素的邊框?qū)傩阅J(rèn)不為0，我們可，我們可以設(shè)置為以設(shè)置為0達(dá)到美化表單中輸入框和按鈕達(dá)到美化表單中輸入框和按鈕的目的。的目的。用盒子美化表格用盒子美化表格p讓表格的外邊框為讓表格的外邊框為2象素象素p首先用間距制作首先用間距制作1像素邊框的表格，然后像素邊框的表格，然后用用css為為table元素加一個元素加一個1象素寬的象素寬的borderp制作制作1象素虛線邊框象素虛線邊框p首先將表格的邊框和間距設(shè)為首先將表格的邊框和間距設(shè)為0，然后設(shè)，然后設(shè)置置table的的CSS上邊框和左邊框為上邊框和左邊框為1象素虛象素虛線，再設(shè)置線，再設(shè)置td的的c

27、ss下邊框和右邊框為下邊框和右邊框為1象象素虛線素虛線用盒子美化表單用盒子美化表單p舉例舉例盒子的定位盒子的定位盒子的三種定位形式盒子的三種定位形式p在標(biāo)準(zhǔn)流下的定位在標(biāo)準(zhǔn)流下的定位p在浮動屬性下的定位在浮動屬性下的定位p在定位屬性下的定位在定位屬性下的定位標(biāo)準(zhǔn)流標(biāo)準(zhǔn)流pHTML元素在標(biāo)準(zhǔn)狀況下的定位方式元素在標(biāo)準(zhǔn)狀況下的定位方式p行內(nèi)元素在同一行內(nèi)橫向排列行內(nèi)元素在同一行內(nèi)橫向排列p塊級元素占滿整個一行，在頁面中豎向排塊級元素占滿整個一行，在頁面中豎向排列列p元素不會移動到其它地方去，各元素的盒元素不會移動到其它地方去，各元素的盒子之間不會發(fā)生重疊，對于嵌套的元素盒子之間不會發(fā)生重疊，對于嵌

28、套的元素盒子也是嵌套的關(guān)系子也是嵌套的關(guān)系標(biāo)準(zhǔn)流下的盒子排列分析標(biāo)準(zhǔn)流下的盒子排列分析* border: 2px dashed #FF0066;padding: 10px;margin: 2px;網(wǎng)頁的網(wǎng)頁的banner（塊級元素）（塊級元素）行內(nèi)元素行內(nèi)元素1行內(nèi)行內(nèi)2行內(nèi)行內(nèi)3這是無名塊這是無名塊這是盒子中的盒子這是盒子中的盒子display屬性屬性p通過通過display屬性可控制元素是以行內(nèi)元素屬性可控制元素是以行內(nèi)元素顯示還是以塊級元素顯示，或不顯示顯示還是以塊級元素顯示，或不顯示pdisplay:block | inline | none | list盒子在標(biāo)準(zhǔn)流中的定位原則盒子在

29、標(biāo)準(zhǔn)流中的定位原則實驗實驗1行內(nèi)元素之間的水平行內(nèi)元素之間的水平margin span.leftmargin-right:30px;background-color:#a9d6ff;span.rightmargin-left:40px;background-color:#eeb0b0;行內(nèi)元素之間的水平marginspan 2span 1margin-rightmargin-leftp盒子在標(biāo)準(zhǔn)流中的定位原則盒子在標(biāo)準(zhǔn)流中的定位原則實驗實驗2塊級元素之間的豎直塊級元素之間的豎直margin 塊元素1塊元素2塊元素1塊元素2塊元素1塊元素2margin-bottom:50pxmargin-top

30、:30pxmargin-bottom:50pxp盒子在標(biāo)準(zhǔn)流中的定位原則盒子在標(biāo)準(zhǔn)流中的定位原則實驗3嵌套盒子之間的margin 背景的應(yīng)用背景的應(yīng)用CSS的背景屬性的背景屬性p 背景（背景（background）是網(wǎng)頁中常用的一種表現(xiàn)方法，無）是網(wǎng)頁中常用的一種表現(xiàn)方法，無論是單純的背景顏色還是背景圖片，都能為網(wǎng)頁帶來豐論是單純的背景顏色還是背景圖片，都能為網(wǎng)頁帶來豐富的視覺效果，富的視覺效果，HTML的很多元素都具有的很多元素都具有bgcolor和和backgroud屬性，可以設(shè)置背景顏色和背景圖片，如屬性，可以設(shè)置背景顏色和背景圖片，如（table、td等），但形式比較單一，對背景圖片的設(shè)定，等），但形式比較單一，對背景圖片的設(shè)定，只支持在只支持在X軸和軸和Y軸都平鋪的方式，因此，如果同時設(shè)軸都平鋪的方式，因此，如果同時設(shè)置了背景顏色和背景圖片，那么背景顏色將被背景圖片置了背景顏色和背景圖片，那么背景顏色將被背景圖片擋住，以背景圖片來顯示。擋住，以背景圖片來顯示。p 而而CSS對元素的背景設(shè)置，則提供了更多的途徑，如背對元素的背景設(shè)置，則提供了更多的途徑，如背景圖片既可以平鋪也可以不平鋪，還可以在景圖片既可以平鋪也可以不平鋪，還可以在X軸平鋪或軸平鋪或在在Y軸平鋪，當(dāng)背景圖片不平鋪時，并不會完全擋住背軸平鋪，當(dāng)背景圖片不平鋪