版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)
文檔簡介
第6章CSS盒模型與布局屬性學(xué)習(xí)目標(biāo)123能夠正確識別CSS盒模型（BoxModel）能夠正確使用CSS內(nèi)邊距、外邊距、簡寫屬性能夠正確使用CSS邊框及簡寫屬性學(xué)習(xí)目標(biāo)456了解CSS輪廓屬性能夠正確使用浮動屬性能夠正確使用定位屬性本章架構(gòu)★★★6.1CSS盒模型概述6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置6.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置本章架構(gòu)★★★6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置6.6
綜合案例6.1CSS盒模型概述6.1CSS盒模型概述
在HTML文檔中，每個元素（element）都有盒模型（BoxModel），在Web世界里，盒模型（BoxModel）無處不在，掌握盒模型（BoxModel）也是實現(xiàn)網(wǎng)頁設(shè)計、布局的基礎(chǔ)。在網(wǎng)頁設(shè)計中，CSS盒模型（BoxModel）包含的屬性有：內(nèi)容（content）、內(nèi)邊距/填充（padding）、邊框（border）、外邊距（margin）。6.1CSS盒模型概述
內(nèi)容（content）：由內(nèi)部虛線圍成的區(qū)域，一般為實際的內(nèi)容內(nèi)邊距/填充（padding）：內(nèi)部虛線與實線間部分邊框（border）：實線，即內(nèi)邊距的邊緣外邊距（margin）：外部虛線與實線間部分
注意事項：⑴背景作用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域⑵外邊距默認(rèn)是透明的，因此不會遮擋其后的任何元素6.1CSS盒模型概述
元素（element）寬度計算公式如下：元素寬度=內(nèi)容寬度+左內(nèi)邊距+右內(nèi)邊距+左邊框+右邊框+左外邊距+右外邊距
元素（element）高度計算公式如下：元素高度=內(nèi)容高度+上內(nèi)邊距+下內(nèi)邊距+上邊框+下邊框+上外邊距+下外邊距6.1CSS盒模型概述內(nèi)容（content）：70px內(nèi)邊距/填充（padding）：左內(nèi)邊距+右內(nèi)邊距=5+5=10px邊框（border）：左邊框+右邊框=5+5=10px外邊距（margin）：左外邊距+右外邊距=10+10=20pxdiv元素的寬度：70px+10px+10px+20px=110px若去除元素外邊距，則元素寬度：70px+10px+10px=90px6.2
應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置
⒈內(nèi)邊距屬性名稱padding-left屬性：設(shè)置元素左內(nèi)邊距padding-right屬性：設(shè)置元素的右內(nèi)邊距padding-top屬性：設(shè)置元素的上內(nèi)邊距padding-bottom屬性：設(shè)置元素的下內(nèi)邊距padding簡寫屬性：在一個聲明中設(shè)置所有內(nèi)邊距屬性⒉內(nèi)邊距屬性常用取值⑴length：帶有單位的數(shù)值，單位如像素等，默認(rèn)值是0。⑵%：規(guī)定基于父元素的寬度/高度的百分比值。1
內(nèi)邊距屬性6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置
⒊注意事項以上屬性不允許使用負(fù)值。
⒋案例本案例演示了內(nèi)邊距屬性常用取值效果，案例中設(shè)置前4個p元素其左、右、上、下內(nèi)邊距分別為10px，設(shè)置后4個p元素其內(nèi)邊距簡寫屬性padding取值分別為4、3、2、1種的情況。1
內(nèi)邊距屬性6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置
padding簡寫屬性說明：⑴“padding:10px20px30px40px;”表示設(shè)置元素上、右、下、左內(nèi)邊距分別為10px、20px、30px、40px。即第1個值代表上內(nèi)邊距，第2個值代表右內(nèi)邊距，第3個值代表下內(nèi)邊距，第4個值代表左內(nèi)邊距。⑵“padding:10px20px30px;”表示設(shè)置元素上內(nèi)邊距為10px，左、右內(nèi)邊距為20px，下內(nèi)邊距為30px。即第1個值代表上內(nèi)邊距，第2個值代表左、右內(nèi)邊距，第3個值代表下內(nèi)邊距。⑶“padding:10px20px;”表示設(shè)置元素上、下內(nèi)邊距為10px，左、右內(nèi)邊距為20px。即第1個值代表上、下內(nèi)邊距，第2個值代表左、右內(nèi)邊距。⑷“padding:10px;”表示設(shè)置元素上、右、下、左內(nèi)邊距均為10px。即1個值時，代表上、右、下、左內(nèi)邊距。1
內(nèi)邊距屬性6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置例6-1chapter06_01.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>內(nèi)邊距屬性</title>
<styletype="text/css"></style></head>
<body></body></html>1
內(nèi)邊距屬性6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置<styletype="text/css">p{padding:0;width:102px;background-color:yellow;}.paddingLeft{padding-left:10px;}.paddingRight{padding-right:10px;}.paddingTop{padding-top:10px;}.paddingBottom{padding-bottom:10px;}.arg4{padding:10px20px30px40px;}.arg3{padding:10px20px30px;}.arg2{padding:10px20px;}.arg1{padding:10px;}</style>1
內(nèi)邊距屬性<body><!--案例：演示內(nèi)邊距屬性常用取值效果--><pclass="paddingLeft">左內(nèi)邊距10px</p><pclass="paddingRight">右內(nèi)邊距10px</p><pclass="paddingTop">上內(nèi)邊距10px</p><pclass="paddingBottom">下內(nèi)邊距10px</p><hr><pclass="arg4">上內(nèi)邊距10px</br>右內(nèi)邊距20px</br>下內(nèi)邊距30px</br>左內(nèi)邊距40px</p><pclass="arg3">上內(nèi)邊距10px</br>右內(nèi)邊距20px</br>下內(nèi)邊距30px</br>左內(nèi)邊距20px</p><pclass="arg2">上內(nèi)邊距10px</br>右內(nèi)邊距20px</br>下內(nèi)邊距10px</br>左內(nèi)邊距20px</p><pclass="arg1">上內(nèi)邊距10px</br>右內(nèi)邊距10px</br>下內(nèi)邊距10px</br>左內(nèi)邊距10px</p></body>6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置
⒈外邊距屬性名稱margin-left屬性：設(shè)置元素的左外邊距margin-right屬性：設(shè)置元素的右外邊距margin-top屬性：設(shè)置元素的上外邊距margin-bottom屬性：設(shè)置元素的下外邊距margin簡寫屬性：在一個聲明中設(shè)置所有外邊距屬性⒉外邊距屬性常用取值⑴auto：瀏覽器自動計算外邊距數(shù)值。⑵length：帶有單位的數(shù)值，單位如像素等，默認(rèn)值是0。⑶%：規(guī)定基于父元素的寬度/高度的百分比值。2
外邊距屬性6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置
⒊注意事項⑴以上屬性允許使用負(fù)值。⑵在實際中，瀏覽器對許多元素已經(jīng)提供了預(yù)定的樣式。例如，body元素默認(rèn)擁有上右下左各8px的外邊距，為了實現(xiàn)頁面效果，這時往往需要進行樣式重置，即將元素外邊距設(shè)置為0。2
外邊距屬性6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置例6-2chapter06_02.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>外邊距屬性</title>
<styletype="text/css"></style></head>
<body></body></html>2
外邊距屬性⒋案例⑴案例1，本案例演示了外邊距屬性取值為固定值的效果，案例中設(shè)置div元素左外邊距為10px，上外邊距為20px。6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置<styletype="text/css">body{margin:0;padding:0;}div{margin:0;padding:0;}.marginTopLeft{width:102px;height:100px;background-color:yellow;margin-left:10px;margin-top:20px;/*margin-left:-10px;*/}</style>2
外邊距屬性<body><!--案例1：演示外邊距屬性取值，固定值如以像素為單位的效果--><divclass="marginTopLeft">
左外邊距10px<br/>
上外邊距20px</div></body>6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置例6-3chapter06_03.html<html><head><metacharset="utf-8"><title>外邊距屬性</title>
<styletype="text/css"></style></head>
<body></body></html>2
外邊距屬性⒋案例
⑵案例2，本案例演示了外邊距簡寫屬性margin取值為4個值的效果，案例中設(shè)置div元素上、右、下、左外邊距分別為10px、20px、30px、40px，其它個數(shù)取值，可參考代碼自行練習(xí)。6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置<styletype="text/css">body{margin:0;padding:0;}div{margin:0;padding:0;}.set{width:102px;height:100px;background-color:yellow;}.arg4{margin:10px20px30px40px;}.arg3{margin:10px20px30px;}.arg2{margin:10px20px;}.arg1{margin:10px;}</style>2
外邊距屬性<body><!--案例2：演示外邊距屬性設(shè)置為不同個數(shù)值的實現(xiàn)效果--><divclass="setarg4">
上外邊距10px</br>
右外邊距20px</br>
下外邊距30px</br>
左外邊距40px</div></body>6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置例6-4chapter06_04.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>外邊距屬性</title>
<styletype="text/css"></style></head>
<body></body></html>2
外邊距屬性⒋案例
⑶案例3，本案例演示了外邊距屬性取值為auto的效果，案例中設(shè)置div元素的左、右外邊距為auto，上、下外邊距為0，通過將元素的左、右外邊距設(shè)置為auto，可實現(xiàn)塊級元素水平居中的效果。6.2應(yīng)用CSS實現(xiàn)內(nèi)邊距、外邊距屬性設(shè)置<styletype="text/css">body{margin:0;padding:0;}div{margin:0;padding:0;}.auto{width:100px;height:100px;background-color:yellow;margin:0auto;}</style>2
外邊距屬性<body><!--案例3：演示外邊距屬性取值，auto的效果--><divclass="auto">水平居中</div></body>6.3
應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置6.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒈邊框樣式屬性名稱border-left-style屬性：設(shè)置元素左邊框的樣式border-right-style屬性：設(shè)置元素右邊框的樣式border-top-style屬性：設(shè)置元素上邊框的樣式border-bottom-style屬性：設(shè)置元素下邊框的樣式border-style簡寫屬性：用于設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式1
邊框?qū)傩裕吙驑邮綄傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
border-style簡寫屬性說明：border-style簡寫屬性可以設(shè)置4、3、2、1個值。若設(shè)置4個值，則4個值依次代表上、右、下、左邊框樣式。若設(shè)置3個值，則第1個值代表上邊框樣式，第2個值代表左、右邊框樣式，第3個值代表下邊框樣式。若設(shè)置2個值，則第1個值代表上、下邊框樣式，第2個值代表左、右邊框樣式。若設(shè)置1個值，則上、右、下、左邊框樣式均為此值。1
邊框?qū)傩裕吙驑邮綄傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒉邊框樣式屬性常用取值⑴none：定義無邊框。⑵dashed：定義虛線。⑶solid：定義實線。⑷double：定義雙線。⒊案例本案例演示了邊框樣式屬性及其簡寫屬性常用取值效果，案例中設(shè)置第1個p元素左、右、上、下邊框樣式分別為虛線（dashed）、雙線（double）、無邊框（none）、實線（solid），設(shè)置第2個p元素其邊框樣式簡寫屬性border-style取值為4種的情況且各邊框樣式設(shè)置效果與第1個p元素相同。1
邊框?qū)傩裕吙驑邮綄傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置例6-5chapter06_05.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>邊框樣式屬性</title>
<styletype="text/css"></style></head>
<body></body></html>1
邊框?qū)傩裕吙驑邮綄傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置<styletype="text/css">.borderStyle{border-left-style:dashed;/*虛線*/border-right-style:double;/*雙線*/border-top-style:none;/*無邊框*/border-bottom-style:solid;/*實線*/}.shortening{border-style:nonedoublesoliddashed;}</style><body><!--案例：演示邊框樣式屬性常用取值效果--><pclass="borderStyle">邊框樣式屬性</p><pclass="shortening">邊框樣式簡寫屬性</p></body>1
邊框?qū)傩裕吙驑邮綄傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒈邊框顏色屬性名稱border-left-color屬性：設(shè)置元素左邊框的顏色border-right-color屬性：設(shè)置元素右邊框的顏色border-top-color屬性：設(shè)置元素上邊框的顏色border-bottom-color屬性：設(shè)置元素下邊框的顏色border-color簡寫屬性：設(shè)置元素的所有邊框中可見部分的顏色，或為4個邊分別設(shè)置顏色1
邊框?qū)傩裕吙蝾伾珜傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒉邊框顏色屬性常用取值⑴color_name：顏色值為顏色名稱（如：red）。⑵hex_number：顏色值為十六進制值（如：#FF0000）。⑶rgb_number：顏色值為rgb代碼（如：rgb(255,0,0)）。⑷transparent：默認(rèn)值。邊框顏色為透明。⒊注意事項⑴邊框顏色只能定義純色。⑵邊框的樣式不能為none或hidden，否則邊框不會出現(xiàn)。⑶務(wù)必將border-style屬性聲明到border-color屬性之前。即元素必須在改變其顏色之前獲得邊框。1
邊框?qū)傩裕吙蝾伾珜傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒋案例本案例演示了邊框顏色屬性及其簡寫屬性常用取值效果，案例中設(shè)置第1個p元素左、右、上、下邊框顏色分別為紅色（red）、紅色（#FF0000）、透明色（transparent）、紅色（rgb(255,0,0)），設(shè)置第2個p元素其邊框顏色簡寫屬性border-color取值為4種的情況且各邊框顏色設(shè)置效果與第1個p元素相同。1
邊框?qū)傩裕吙蝾伾珜傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置例6-6chapter06_06.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>邊框顏色屬性</title>
<styletype="text/css"></style></head>
<body></body></html>1
邊框?qū)傩裕吙蝾伾珜傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置<styletype="text/css">.common{border-style:soliddoublesoliddashed;}.borderColor{border-left-color:red;border-right-color:#FF0000;border-top-color:transparent;border-bottom-color:rgb(255,0,0);}.shortening{border-color:transparent#FF0000rgb(255,0,0)red;}</style><body><!--案例：演示邊框顏色屬性常用取值效果--><pclass="commonborderColor">邊框顏色屬性</p><pclass="commonshortening">邊框顏色簡寫屬性</p></body>1
邊框?qū)傩裕吙蝾伾珜傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒈邊框?qū)挾葘傩悦Qborder-left-width屬性：設(shè)置元素的左邊框的寬度border-right-width屬性：設(shè)置元素的右邊框的寬度border-top-width屬性：設(shè)置元素的上邊框的寬度border-bottom-width屬性：設(shè)置元素的下邊框的寬度border-width簡寫屬性：用于為元素的所有邊框設(shè)置寬度，或者單獨地為各邊邊框設(shè)置寬度1
邊框?qū)傩裕吙驅(qū)挾葘傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒈邊框?qū)挾葘傩猿Ｓ萌≈耽舤hin：定義細(xì)的邊框。⑵medium：默認(rèn)值，定義中等的邊框。⑶thick：定義粗的邊框。⑷length：允許自定義邊框的寬度。⒊注意事項⑴只有當(dāng)邊框樣式不是none時才起作用。如果邊框樣式是none，邊框?qū)挾葘嶋H上會重置為0。1
邊框?qū)傩裕吙驅(qū)挾葘傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⑵邊框?qū)挾葘傩灾挡辉试S指定負(fù)長度值。⑶務(wù)必將border-style屬性聲明到border-width屬性之前。元素只有在獲得邊框之后，才能改變其邊框的寬度。⒋案例本案例演示了邊框?qū)挾葘傩约捌浜唽憣傩猿Ｓ萌≈敌Ч?，案例中設(shè)置第1個p元素左、右、上、下邊框?qū)挾确謩e為中等（medium）、細(xì)（thin）、粗（thick）、10px，設(shè)置第2個p元素其邊框?qū)挾群唽憣傩詁order-width取值為4種的情況且各邊框?qū)挾仍O(shè)置效果與第1個p元素相同。1
邊框?qū)傩裕吙驅(qū)挾葘傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置例6-7chapter06_07.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>邊框?qū)挾葘傩?lt;/title>
<styletype="text/css"></style></head>
<body></body></html>1
邊框?qū)傩裕吙驅(qū)挾葘傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置<styletype="text/css">.common{border-style:solid;border-color:red;}.borderWidth{border-left-width:medium;/*中等的邊框*/border-right-width:thin;/*細(xì)的邊框*/border-top-width:thick;/*粗的邊框*/border-bottom-width:10px;/*自定義邊框的寬度*/}.shortening{border-width:thickthin10pxmedium;}</style><body><!--案例：演示邊框?qū)挾葘傩猿Ｓ萌≈敌Ч?-><pclass="commonborderWidth">邊框?qū)挾葘傩?lt;/p><pclass="commonshortening">邊框?qū)挾群唽憣傩?lt;/p></body>1
邊框?qū)傩裕吙驅(qū)挾葘傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒈上、右、下、左邊框簡寫屬性名稱border-left屬性：把左邊框的所有屬性設(shè)置到一個聲明中border-right屬性：把右邊框的所有屬性設(shè)置到一個聲明中border-top屬性：把上邊框的所有屬性設(shè)置到一個聲明中border-bottom屬性：把下邊框的所有屬性設(shè)置到一個聲明中1
邊框?qū)傩裕?、右、下、左邊框簡寫屬?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒉簡寫屬性語法建議按照如下順序設(shè)置各屬性值，各屬性值間使用空格進行分隔。border-width邊框?qū)挾萣order-style邊框樣式border-color邊框顏色⒊案例本案例演示了上、右、下、左邊框簡寫屬性常用取值的效果，案例中設(shè)置p元素左邊框?qū)挾?px、樣式solid、顏色red，右邊框?qū)挾?px、樣式dashed、顏色blue，上、下邊框?qū)挾?px、樣式double、顏色green。1
邊框?qū)傩裕?、右、下、左邊框簡寫屬?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置例6-8chapter06_08.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>各邊框簡寫屬性</title>
<styletype="text/css"></style></head>
<body></body></html>1
邊框?qū)傩裕稀⒂摇⑾?、左邊框簡寫屬?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置<styletype="text/css">.borderDemo{border-left:2pxsolidred;border-right:2pxdashedblue;border-top:5pxdoublegreen;border-bottom:5pxdoublegreen;}</style><body><!--案例：演示各邊框簡寫屬性實現(xiàn)效果--><pclass="borderDemo">各邊框簡寫屬性</p></body>1
邊框?qū)傩裕?、右、下、左邊框簡寫屬?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒈邊框簡寫屬性名稱border：其作用為在一個聲明設(shè)置所有的邊框?qū)傩?/p>
⒉邊框簡寫屬性語法建議按照如下順序設(shè)置各屬性值，各屬性值間使用空格進行分隔。border-width邊框?qū)挾萣order-style邊框樣式border-color邊框顏色1
邊框?qū)傩裕吙蚝唽憣傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒊注意事項如果不設(shè)置其中的某個值，也是可以的，如：border:solid#ff0000;
⒋案例本案例演示邊框簡寫屬性border常用取值效果，案例中設(shè)置p元素上、下、左、右邊框具有相同的寬度2px、樣式solid、顏色blue。1
邊框?qū)傩裕吙蚝唽憣傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置例6-9chapter06_09.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>邊框簡寫屬性</title><styletype="text/css">.borderDemo{border:2pxsolidblue;}</style></head><body><!--案例：演示邊框簡寫屬性實現(xiàn)效果--><pclass="borderDemo">邊框簡寫屬性</p></body></html>1
邊框?qū)傩裕吙蚝唽憣傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒈輪廓樣式屬性名稱outline-style：其作用為設(shè)置元素的整個輪廓的樣式⒉輪廓樣式屬性常用取值⑴none：默認(rèn)，定義無輪廓。⑵dotted：定義點狀輪廓。⑶dashed：定義虛線輪廓。⑷solid：定義實線輪廓。⑸double：定義雙線輪廓。2
邊框?qū)傩裕喞獦邮綄傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒊案例本案例演示了輪廓樣式屬性常用取值效果，案例中設(shè)置所有p元素邊框?qū)挾?px、樣式solid、顏色blue，分別設(shè)置每個p元素輪廓樣式為無輪廓（none）、點狀輪廓（dotted）、虛線輪廓（dashed）、實線輪廓（solid）、雙線輪廓（double）。2
邊框?qū)傩裕喞獦邮綄傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置例6-10chapter06_10.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>輪廓樣式屬性</title>
<styletype="text/css"></style></head>
<body></body></html>2
邊框?qū)傩裕喞獦邮綄傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置<styletype="text/css">.common{border:2pxsolidblue;}.outlineStyle1{outline-style:none;/*無輪廓*/}.outlineStyle2{outline-style:dotted;/*點狀的輪廓*/}.outlineStyle3{outline-style:dashed;/*虛線輪廓*/}.outlineStyle4{outline-style:solid;/*實線輪廓*/}.outlineStyle5{outline-style:double;/*雙線輪廓*/}</style><body><!--案例：演示輪廓樣式屬性常用取值效果--><pclass="commonoutlineStyle1">輪廓樣式屬性none</p><pclass="commonoutlineStyle2">輪廓樣式屬性dotted</p><pclass="commonoutlineStyle3">輪廓樣式屬性dashed</p><pclass="commonoutlineStyle4">輪廓樣式屬性solid</p><pclass="commonoutlineStyle5">輪廓樣式屬性double</p></body>2
邊框?qū)傩裕喞獦邮綄傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒈輪廓顏色屬性名稱outline-color：其作用為設(shè)置元素的整個輪廓的顏色⒉輪廓顏色屬性常用取值⑴color_name：顏色值為顏色名稱（如：red）。⑵hex_number：顏色值為十六進制值（如：#FF0000）。⑶rgb_number：顏色值為rgb代碼（如：rgb(255,0,0)）。⑷invert：默認(rèn)，執(zhí)行顏色反轉(zhuǎn)（逆向的顏色）。可使輪廓在不同的背景顏色中都是可見。2
邊框?qū)傩裕喞伾珜傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒊注意事項⑴務(wù)必將outline-style屬性聲明到outline-color屬性之前，即元素只有獲得輪廓以后才能改變其輪廓的顏色。⑵輪廓線不會占據(jù)空間。⒋案例本案例演示了輪廓顏色屬性常用取值效果，案例中設(shè)置所有p元素邊框?qū)挾?px、樣式solid、顏色blue，輪廓樣式solid，分別設(shè)置每個p元素輪廓顏色為紅色（red）、紅色（#FF0000）、紅色（rgb(255,0,0)）、顏色反轉(zhuǎn)（invert）。2
邊框?qū)傩裕喞伾珜傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置例6-11chapter06_11.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>輪廓顏色屬性</title><styletype="text/css"></style></head>
<body></body></html>2
邊框?qū)傩裕喞伾珜傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置<styletype="text/css">.common{border:2pxsolidblue;outline-style:solid;}.outlineColor1{outline-color:red;}.outlineColor2{outline-color:#FF0000;}.outlineColor3{outline-color:rgb(255,0,0);}.outlineColor4{outline-color:invert;}</style><body><!--案例：演示輪廓顏色屬性常用取值效果--><pclass="commonoutlineColor1">輪廓顏色屬性</p><pclass="commonoutlineColor2">輪廓顏色屬性</p><pclass="commonoutlineColor3">輪廓顏色屬性</p><pclass="commonoutlineColor4">輪廓顏色屬性</p></body>2
邊框?qū)傩裕喞伾珜傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒈輪廓寬度屬性名稱outline-width：其作用為設(shè)置元素的整個輪廓的寬度
⒉輪廓寬度屬性常用取值⑴thin：規(guī)定細(xì)的輪廓。⑵medium：默認(rèn)，規(guī)定中等的輪廓。⑶thick：規(guī)定粗的輪廓。⑷length：自定義輪廓粗細(xì)的值。2
邊框?qū)傩裕喞獙挾葘傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒊注意事項⑴只有當(dāng)輪廓樣式不是none時，輪廓寬度才會起作用。⑵如果輪廓樣式為none，寬度實際上會重置為0。⑶不允許設(shè)置負(fù)長度值。⒋案例本案例演示了輪廓寬度屬性常用取值效果，案例中設(shè)置所有p元素邊框?qū)挾?px、樣式solid、顏色blue，輪廓樣式solid，輪廓顏色紅色（red），分別設(shè)置每個p元素輪廓寬度為細(xì)輪廓（thin）、中等輪廓（medium）、粗輪廓（thick）、10px。2
邊框?qū)傩裕喞獙挾葘傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置例6-12chapter06_12.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>輪廓寬度屬性</title><styletype="text/css"></style></head><body></body></html>2
邊框?qū)傩裕喞獙挾葘傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置<styletype="text/css">.common{border:2pxsolidblue;outline-style:solid;outline-color:red;}.outlineWidth1{outline-width:thin;}.outlineWidth2{outline-width:medium;}.outlineWidth3{outline-width:thick;}.outlineWidth4{outline-width:10px;}</style><body><!--案例：演示輪廓寬度屬性常用取值效果--><pclass="commonoutlineWidth1">輪廓寬度屬性</p><pclass="commonoutlineWidth2">輪廓寬度屬性</p><pclass="commonoutlineWidth3">輪廓寬度屬性</p><pclass="commonoutlineWidth4">輪廓寬度屬性</p></body>2
邊框?qū)傩裕喞獙挾葘傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒈輪廓簡寫屬性名稱outline：其作用為在一個聲明中設(shè)置所有的輪廓屬性
⒉輪廓簡寫屬性語法建議按照如下順序設(shè)置各屬性值，各屬性值間使用空格進行分隔。outline-color輪廓寬度outline-style輪廓樣式outline-width輪廓顏色2
邊框?qū)傩裕喞唽憣傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置
⒊注意事項如果不設(shè)置其中的某個值，也是可以的，如：outline:solid#ff0000;
⒋案例本案例演示輪廓簡寫屬性outline常用取值效果，案例中設(shè)置p元素上、下、左、右邊框具有相同的寬度2px、樣式solid、顏色blue，上、下、左、右輪廓具有相同的寬度10px、樣式dotted、顏色red。2
邊框?qū)傩裕喞唽憣傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置例6-13chapter06_13.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>輪廓簡寫屬性</title>
<styletype="text/css"></style></head><body></body></html>2
邊框?qū)傩裕喞唽憣傩?.3應(yīng)用CSS實現(xiàn)邊框、輪廓屬性設(shè)置<styletype="text/css">.common{border:2pxsolidblue;}.outline{outline:reddotted10px;}</style><body><!--案例：演示輪廓簡寫屬性實現(xiàn)效果--><pclass="commonoutline">輪廓簡寫屬性</p></body>2
邊框?qū)傩裕喞唽憣傩?.4
應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置
浮動的初衷是為了實現(xiàn)網(wǎng)頁文字環(huán)繞圖片，后來在前端使用過程中逐漸將浮動列為一種布局方式，并且這種方式替代了原來使用表格進行網(wǎng)頁布局的方式，但是浮動在使用過程中也有缺陷，即浮動會引起父級元素（如父級元素沒有設(shè)置高度）高度塌陷，這時可以使用清除浮動來避免父級元素的高度塌陷。6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置
普通文檔流，即文檔中的元素依據(jù)其元素特點，按照默認(rèn)的顯示規(guī)則排版布局，即從上到下，從左到右；塊級元素（如：div、p等）獨占一行；行內(nèi)元素（如span等）則按照順序被水平渲染，直到在當(dāng)前行遇到了邊界，然后換到下一行的起點繼續(xù)渲染；元素之間不能重疊顯示。1
設(shè)置浮動－普通文檔流6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置
⒈浮動屬性名稱float：其作用為使元素脫離普通文檔流，向左或者向右浮動，直到遇到邊框、內(nèi)邊距、外邊距或者另一個塊級元素位置
⒉浮動屬性常用取值⑴left：元素向左浮動。⑵right：元素向右浮動。⑶none：默認(rèn)值，元素不浮動。1
設(shè)置浮動－浮動屬性6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置
⒊案例⑴案例1，本案例演示了浮動屬性取值為右的效果，案例中設(shè)置3個div元素寬度、高度均為100px，設(shè)置第1個div元素背景色為綠色且右浮動，設(shè)置第2個div元素背景色為黃色，設(shè)置第3個div元素背景色為藍(lán)色。因為第1個div元素設(shè)置右浮動，脫離普通文檔流，不占據(jù)元素原空間，且向右移動，直到它的右邊緣碰到body元素的右邊緣，所以第2、3個div元素位置依次提升。1
設(shè)置浮動－浮動屬性6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置例6-14chapter06_14.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>浮動屬性值：右</title><styletype="text/css"></style></head>
<body></body></html>1
設(shè)置浮動－浮動屬性6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置<styletype="text/css">body{margin:0;padding:0;}.common{width:100px;height:100px;}.div1{background-color:green;float:right;}.div2{background-color:yellow;}.div3{background-color:blue;}</style><body><!--案例1：演示浮動屬性取值，右的效果--><divclass="commondiv1"></div><divclass="commondiv2"></div><divclass="commondiv3"></div></body>1
設(shè)置浮動－浮動屬性6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置
⒊案例⑵案例2，本案例演示了浮動屬性取值為左的效果，案例中設(shè)置3個div元素寬度、高度均為100px，且左浮動，設(shè)置第1個div元素背景色為綠色，設(shè)置第2個div元素背景色為黃色，設(shè)置第3個div元素背景色為藍(lán)色。第1個div元素設(shè)置左浮動，脫離普通文檔流，不占據(jù)元素原空間，且向左移動，直到它的左邊緣碰到body元素的左邊緣，第2、3個div元素向左浮動直到碰到前一個浮動div元素，最終3個div元素一行顯示。1
設(shè)置浮動－浮動屬性6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置例6-15chapter06_15.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>浮動屬性值：左</title>
<styletype="text/css"></style></head>
<body></body></html>1
設(shè)置浮動－浮動屬性6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置<styletype="text/css">body{margin:0;padding:0;}.common{width:100px;height:100px;}.div1{background-color:green;float:left;}.div2{background-color:yellow;float:left;}.div3{background-color:blue;float:left;}</style><body><!--案例2：演示浮動屬性取值，左的效果--><divclass="commondiv1"></div><divclass="commondiv2"></div><divclass="commondiv3"></div></body>1
設(shè)置浮動－浮動屬性6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置
⒊案例
⑶案例3，本案例演示了浮動屬性取值為左的效果，案例中設(shè)置父div元素寬度300px、高度均為350px，邊框樣式solid，邊框顏色red，邊框?qū)挾?px，設(shè)置第1個子div元素寬度150px、高度為150px，設(shè)置第2、3個子div元素寬度、高度均為100px，第1個div元素背景色為綠色且左浮動，第2個div元素背景色為黃色且左浮動，第3個div元素背景色為藍(lán)色且左浮動。1
設(shè)置浮動－浮動屬性6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置
⒊案例
第1、2個子div元素設(shè)置左浮動，脫離普通文檔流，不占據(jù)元素原空間，且向左移動，一行顯示。第3個子div元素設(shè)置左浮動，因父div元素寬度300px小于3個子div元素寬度和350px，無法容納水平排列的3個子div浮動元素，所以第3個子div元素向下移動，又因為第1個子div元素高度150px，則第3個子div元素向下移動時被第1個子div浮動元素“卡住”。1
設(shè)置浮動－浮動屬性6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置例6-16chapter06_16.html<!DOCTYPEhtml><html><head><metacharset="utf-8">
<title>浮動屬性值：左</title><styletype="text/css"></style></head>
<body></body></html>1
設(shè)置浮動－浮動屬性6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置<styletype="text/css">body{margin:0;padding:0;}.father{width:300px;height:350px;border:1pxsolidred;}.son1{width:150px;height:150px;}.son2{width:100px;height:100px;}.div1{background-color:green;float:left;}.div2{background-color:yellow;float:left;}.div3{background-color:blue;float:left;}</style><body><!--案例3：演示浮動屬性取值，左的效果--><divclass="father"><divclass="son1div1"></div><divclass="son2div2"></div><divclass="son2div3"></div></div></body>1
設(shè)置浮動－浮動屬性6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置
⒈清除浮動屬性名稱clear：其作用為設(shè)置元素的哪一側(cè)不允許出現(xiàn)其他浮動元素
⒉清除浮動屬性常用取值⑴left：在左側(cè)不允許浮動元素。⑵right：在右側(cè)不允許浮動元素。⑶both：在左右兩側(cè)均不允許浮動元素，最為常用。⑷none：默認(rèn)值。允許浮動元素出現(xiàn)在兩側(cè)。2
清除浮動6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置
⒊案例⑴案例1，本案例演示了清除浮動屬性取值為both的效果。2
清除浮動6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置例6-17chapter06_17.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>清除浮動</title>
<styletype="text/css"></style></head>
<body></body></html>2
清除浮動6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置<styletype="text/css">body{margin:0;padding:0;}.father{width:300px;background:red;}.common{width:100px;height:100px;}.son1{background:yellow;float:left;}.son2{background:green;float:left;}.uncle{width:300px;height:200px;background:blue;}.clear{clear:both;}</style><body><!--案例1：清除浮動屬性取值，both的效果--><!--實現(xiàn)方式：額外元素法--><divclass="father"><divclass="commonson1">子1</div><divclass="commonson2">子2</div><divclass="clear"></div></div><divclass="uncle">其它</div></body>2
清除浮動6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置例6-18chapter06_18.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>清除浮動</title><styletype="text/css"></style></head>
<body></body></html>2
清除浮動⑵
案例2，通過設(shè)置父元素樣式“overflow:hidden”清除浮動。6.4應(yīng)用CSS實現(xiàn)浮動屬性設(shè)置<styletype="text/css">body{margin:0;padding:0;}.father{width:300px;background:red;overflow:hidden;}.common{width:100px;height:100px;}.son1{background:yellow;float:left;}.son2{background:green;float:left;}.uncle{width:300px;height:200px;background:blue;}</style><body><!--案例2：overflow:hidden清除浮動效果--><!--實現(xiàn)方式：父元素應(yīng)用overflow:hidden;--><divclass="father"><divclass="commonson1">子1</div><divclass="commonson2">子2</div></div><divclass="uncle">其它</div></body>2
清除浮動6.5
應(yīng)用CSS實現(xiàn)定位屬性設(shè)置6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置
定位可以表現(xiàn)為漂浮在指定元素上方，定位可以將元素重疊在一塊區(qū)域內(nèi)，按照堆疊級別以覆蓋的方式顯示。6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置
⒈定位類型屬性名稱position：其作用為規(guī)定元素的定位類型
⒉定位類型屬性常用取值⑴absolute：絕對定位相對于static定位以外的第一個父元素進行定位完全脫離文檔流，不占有原來位置元素的位置通過"left"、"top"、"right"、"bottom"屬性進行設(shè)置1
定位類型屬性6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置
⑵relative：相對定位相對于元素原正常位置進行定位不脫離文檔流，占有原來位置元素的位置通過"left"、"top"、"right"、"bottom"屬性進行設(shè)置⑶fixed：固定定位相對于瀏覽器窗口進行定位完全脫離文檔流，不占有原來位置元素的位置通過"left"、"top"、"right"、"bottom"屬性進行設(shè)置⑷static：默認(rèn)值。沒有定位，元素出現(xiàn)在正常的文檔流中1
定位類型屬性6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置
⒈定位位置屬性名稱top屬性：用于設(shè)置定位元素相對的對象的頂邊偏移距離，正數(shù)向下偏移，負(fù)數(shù)向上偏移bottom屬性：用于設(shè)置定位元素相對的對象的底邊偏移距離，正數(shù)向上偏移，負(fù)數(shù)向下偏移left屬性：用于設(shè)置定位元素相對的對象的左邊偏移距離，正數(shù)向右偏移，負(fù)數(shù)向左偏移right屬性：用于設(shè)置定位元素相對的對象的右邊偏移距離，正數(shù)向左偏移，負(fù)數(shù)向右偏移2
定位位置屬性6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置
⒉定位位置屬性常用取值⑴auto：默認(rèn)值，通過瀏覽器計算偏移位置。⑵%：設(shè)置以包含元素的百分比計算的偏移位置。⑶length：使用px等單位設(shè)置元素的偏移距離。2
定位位置屬性6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置
⒈堆疊順序?qū)傩悦Qz-index：其作用為設(shè)置元素的堆疊順序，如果為正數(shù)，則從視覺效果上離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。⒉堆疊順序?qū)傩猿Ｓ萌≈耽臿uto：默認(rèn)，堆疊順序與父元素相等。⑵number（數(shù)字）：設(shè)置元素的堆疊順序。⒊注意事項⑴z-index僅在定位元素上奏效。⑵z-index的默認(rèn)屬性值是0，取值越大，定位元素在層疊元素中越居上，離用戶越近。⑶數(shù)字后面不能加單位。3
z-index屬性6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置
⒈相對定位案例中設(shè)置2個div元素寬度、高度均為100px，設(shè)置第1個div元素背景色為藍(lán)色且相對定位，向右向下偏移100px，設(shè)置第2個div元素背景色為黃色。因為第1個div元素相對定位，不脫離文檔流，占有原來位置，所以僅第1個div元素相對于自己原來位置向右向下偏移100px，第2個div元素位置不變。4
定位案例6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置例6-19chapter06_19.html<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>相對定位</title>
<styletype="text/css"></style></head>
<body></body></html>4
定位案例6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置<styletype="text/css">body{margin:0;padding:0;}.common{width:100px;height:100px;}.div1{background-color:blue;position:relative;left:100px;top:100px;}.div2{background-color:yellow;}</style><body><!--案例1：演示相對定位實現(xiàn)效果--><!--相對于元素原正常位置進行定位--><!--不脫離文檔流，占有原來位置--><divclass="commondiv1">1</div><divclass="commondiv2">2</div></body>4
定位案例6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置
⒉絕對定位案例中設(shè)置2個div元素寬度、高度均為100px，設(shè)置第1個div元素背景色為藍(lán)色且絕對定位，向右向下偏移50px，設(shè)置第2個div元素背景色為黃色。因為第1個div元素絕對定位，脫離文檔流，不占有原來位置，所以第1個div元素相對于父元素向右向下偏移50px，第2個div元素位置提升。4
定位案例6.5應(yīng)用CSS實現(xiàn)定位屬性設(shè)置例6-20chap
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 英語基礎(chǔ)題試卷小學(xué)
- 小學(xué)課外英語試卷
- 配電控制設(shè)備市場分析及競爭策略分析報告
- 簡單的競標(biāo)合同范本
- 分包木工材料合同范本
- 中外合資經(jīng)營企業(yè)合同
- 推拿治療學(xué)測試題（含答案）
- 業(yè)務(wù)員個人述職報告
- 熱工基礎(chǔ) 模擬練習(xí)題與答案
- 合伙公司讓合同范本
- 公對公打款合同
- 抗生素種類歸納分類
- 01-BUFR格式應(yīng)用指南(試用版)
- 體育測量與評價04心肺功能的測量與評價
- 提高意識風(fēng)險防范化解能力體會發(fā)言
- 2023年度危險作業(yè)安全監(jiān)護手冊
- 馬克思主義哲學(xué)十講
- 催化材料智慧樹知到答案章節(jié)測試2023年南開大學(xué)
- 中國故事英文版哪吒英文二篇
- GB/T 9846.1-2004膠合板第1部分：分類
- GB/T 32685-2016工業(yè)用精對苯二甲酸(PTA)
評論
0/150
提交評論