資源描述：
《最新第4章-盒子模型ppt課件.ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、進(jìn)入夏天，少不了一個(gè)熱字當(dāng)頭，電扇空調(diào)陸續(xù)登場(chǎng)，每逢此時(shí)，總會(huì)想起那一把蒲扇。蒲扇，是記憶中的農(nóng)村，夏季經(jīng)常用的一件物品。 記憶中的故鄉(xiāng)，每逢進(jìn)入夏天，集市上最常見(jiàn)的便是蒲扇、涼席，不論男女老少，個(gè)個(gè)手持一把，忽閃忽閃個(gè)不停，嘴里叨叨著“怎么這么熱”，于是三五成群，聚在大樹(shù)下，或站著，或隨即坐在石頭上，手持那把扇子，邊嘮嗑邊乘涼。孩子們卻在周?chē)芘芴?，熱得滿頭大汗，不時(shí)聽(tīng)到“強(qiáng)子，別跑了，快來(lái)我給你扇扇”。孩子們才不聽(tīng)這一套，跑個(gè)沒(méi)完，直到累氣喘吁吁，這才一跑一踮地圍過(guò)了，這時(shí)母親總是，好似
2、生氣的樣子，邊扇邊訓(xùn)，“你看熱的，跑什么？”此時(shí)這把蒲扇，是那么涼快，那么的溫馨幸福，有母親的味道！ 蒲扇是中國(guó)傳統(tǒng)工藝品，在我國(guó)已有三千年多年的歷史。取材于棕櫚樹(shù)，制作簡(jiǎn)單，方便攜帶，且蒲扇的表面光滑，因而，古人常會(huì)在上面作畫(huà)。古有棕扇、葵扇、蒲扇、蕉扇諸名，實(shí)即今日的蒲扇，江浙稱(chēng)之為芭蕉扇。六七十年代，人們最常用的就是這種，似圓非圓，輕巧又便宜的蒲扇?！ ∑焉攘鱾髦两瘢业挠洃浿?，它跨越了半個(gè)世紀(jì)，也走過(guò)了我們的半個(gè)人生的軌跡，攜帶著特有的念想，一年年，一天天，流向長(zhǎng)長(zhǎng)的時(shí)間隧道，裊第4章
3、-盒子模型4.1認(rèn)識(shí)盒子模型4.2盒子模型相關(guān)屬性4.3元素的類(lèi)型與轉(zhuǎn)換4.4塊元素垂直外邊距的合并4.5階段案例—制作音樂(lè)盒4.1認(rèn)識(shí)盒子模型盒子模型的概念所謂盒子模型就是把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。4.2盒子模型相關(guān)屬性4.2.1邊框?qū)傩栽O(shè)置內(nèi)容樣式屬性常用屬性值上邊框border-top-style:樣式;border-top-width:寬度;bo
4、rder-top-color:顏色;border-top:寬度樣式顏色;下邊框border-bottom-style:樣式;border-bottom-width:寬度;border-bottom-color:顏色;border-bottom:寬度樣式顏色;左邊框border-left-style:樣式;border-left-width:寬度;border-left-color:顏色;border-left:寬度樣式顏色;右邊框border-right-style:樣式;border-righ
5、t-width:寬度;border-right-color:顏色;border-right:寬度樣式顏色;樣式綜合設(shè)置border-style:上邊[右邊下邊左邊];none無(wú)（默認(rèn)）、solid單實(shí)線、dashed虛線、dotted點(diǎn)線、double雙實(shí)線寬度綜合設(shè)置border-width:上邊[右邊下邊左邊];像素值顏色綜合設(shè)置border-color:上邊[右邊下邊左邊];顏色值、#十六進(jìn)制、rgb(r,g,b)、rgb(r%,g%,b%)邊框綜合設(shè)置border:四邊寬度四邊樣式四邊顏
6、色;4.2盒子模型相關(guān)屬性4.2.1邊框?qū)傩浴O(shè)置邊框樣式（border-style）邊框樣式用于定義頁(yè)面中邊框的風(fēng)格，常用屬性值如下：none：沒(méi)有邊框即忽略所有邊框的寬度（默認(rèn)值）solid：邊框?yàn)閱螌?shí)線dashed：邊框?yàn)樘摼€dotted：邊框?yàn)辄c(diǎn)線double：邊框?yàn)殡p實(shí)線4.2盒子模型相關(guān)屬性4.2.1邊框?qū)傩浴O(shè)置邊框樣式（border-style）既可以對(duì)盒子的單邊進(jìn)行設(shè)置，也可以綜合設(shè)置四條邊的樣式：border-top-style:上邊框樣式border-right-style
7、:右邊框樣式border-bottom-style:下邊框樣式border-left-style:左邊框樣式border-style:上邊框樣式右邊框樣式下邊框樣式左邊框樣式border-style:上邊框樣式左右邊框樣式下邊框樣式border-style:上下邊框樣式左右邊框樣式border-style:上下左右邊框樣式使用border-style屬性綜合設(shè)置四邊樣式時(shí)，必須按上右下左的順時(shí)針順序。省略時(shí)采用值復(fù)制的原則，即一個(gè)值為四邊，兩個(gè)值為上下/左右，三個(gè)值為上/左右/下。4.2盒子模型
8、相關(guān)屬性4.2.1邊框?qū)傩浴O(shè)置邊框樣式（border-style）例如
只有上邊為虛線dashed，其他三邊為單實(shí)線solid，可以使用border-style綜合屬性分別設(shè)置各邊樣式：或綜合設(shè)置四條邊，然后采用上邊覆蓋：p{borer-style:dashedsolidsolidsolid;}p{border-style:solid;}/*綜合設(shè)置四邊樣式*/p{border-top-style:dashed;}/*上邊樣式覆蓋*/邊框?qū)挾纫部梢葬槍?duì)四條邊分別設(shè)置，或綜合設(shè)置四條邊的寬度
