《HTML盒子模型》PPT課件

《《HTML盒子模型》PPT課件》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、HTML盒子模型試講人：XXX1章節(jié)目標(biāo)掌握盒子模型結(jié)構(gòu)和屬性掌握margin，padding屬性細(xì)分的屬性使用盒子模型相關(guān)屬性實(shí)現(xiàn)頁面布局2生活案例包裝盒圖一盒子的概念在我們生活中并不陌生，例如禮品的包裝盒如圖一禮品是最終運(yùn)輸?shù)奈锲?，四周一般?huì)添加抗震材料，在外面是包裝紙殼邊框內(nèi)邊距外邊距3盒子模型的結(jié)構(gòu)盒子模型三維立體圖：邊框>>內(nèi)容內(nèi)邊距>>背景圖>>背景色>>外邊距盒子模型平面圖4盒子模型的基本屬性盒子模型是網(wǎng)頁布局的基礎(chǔ)盒子屬性是盒子模型的關(guān)鍵border（邊框）：盒子外殼本身的厚度padding（內(nèi)邊距）：內(nèi)容與邊框間的距離margin（

2、外邊距）：盒子與其他盒子之間的距離border紙殼padding填充物margin邊界間隙盒子模型包裝盒5marginmargin-topmargin-rightmargin-bottommargin-leftmargin外邊距屬性margin-right右邊界margin-left左邊界margin-top上邊界margin-bottom下邊界上外邊距右外邊距下外邊距左外邊距6margin：1px2px3px4px;上外邊距1px，右外邊距2px，下外邊距3px，左外邊距4px。margin：1px2px3px;等同于1px2px3px2px。ma

3、rgin：1px2px;等同于1px2px1px2px,上下外邊距各為1px，左右外邊距各為2px。margin：1px，等同于1px1px1px1px,四個(gè)邊都為1px。特殊設(shè)置：設(shè)置水平auto，水平居中效果。可以使用margin屬性一次設(shè)置四個(gè)方向，也可分別設(shè)置上，右，下，左四個(gè)方向?qū)傩?注意點(diǎn)需要設(shè)為帶單位的長度值，長度單位一般是像素（px）2方向省略則按上下，左右同值或統(tǒng)一設(shè)置處理，以上都同適用于邊框，內(nèi)邊距37border邊框?qū)傩詁order-widthborder-styleborder-color修飾屬性四個(gè)方向縮寫形式border-

4、topborder-rightborder-bottomborder-leftborderborder-left…邊框顏色邊框?qū)挾冗吙驑邮絙order-color:#FF00FFborder-width:2pxborder-style:solid上邊框右邊框border-top-width:5pxborder-right-style:solid下邊框border-bottom-color:red左邊框border-left-width:5px統(tǒng)一設(shè)置左邊框border:1pxsolidblue（設(shè)置四個(gè)方向的邊框均為1像素、藍(lán)色、實(shí)線）border-

5、left:1pxsolidblue（設(shè)置左邊框均為1像素、藍(lán)色、實(shí)線）8padding內(nèi)邊距屬性padding-toppadding-rightpadding-bottompadding-left上內(nèi)邊距右內(nèi)邊距下內(nèi)邊距左內(nèi)邊距margin-right右填充margin-left左填充margin-top上填充margin-bottom下填充padding設(shè)置邊框與內(nèi)容之間的距離，以便精確控制內(nèi)容在盒子中的位置。padding并非實(shí)體，是透明留白，沒有修飾屬性。padding值不允許為負(fù)值，可四邊分別設(shè)置，順時(shí)針方向，也可一次賦值。9使用盒子屬性布局

6、元素1.1上外邊距30px下填充40px左右外邊距：水平居中左填充80px5px寬的邊框如何實(shí)現(xiàn)如下貴美logo圖片的布局？圖片背景色：#ff7300頁面背景色：#ccc問題10使用盒子屬性布局元素1.2body{margin:0px;padding:0px;background:#ccc;}#logo{width:380px;border:5pxsolid#666;padding:10px20px40px80px;background:#ff7300;margin:30pxauto;//水平居中}

7、yle>