HTML盒子模型PPT課件.ppt

Page 1 HTML盒子模型 試講人 XXX Page 2 章節(jié)目標(biāo) 掌握盒子模型結(jié)構(gòu)和屬性掌握margin padding屬性細(xì)分的屬性使用盒子模型相關(guān)屬性實(shí)現(xiàn)頁面布局 Page 3 生活案例 包裝盒 圖一 盒子的概念在我們生活中并不陌生 例如禮品的包裝盒如圖一禮品是最終運(yùn)輸?shù)奈锲?四周一般會(huì)添加抗震材料 在外面是包裝紙殼 邊框 內(nèi)邊距 外邊距 Page 4 盒子模型的結(jié)構(gòu) 盒子模型三維立體圖 邊框 內(nèi)容內(nèi)邊距 背景圖 背景色 外邊距 盒子模型平面圖 Page 5 盒子模型的基本屬性 盒子模型是網(wǎng)頁布局的基礎(chǔ)盒子屬性是盒子模型的關(guān)鍵border 邊框 盒子外殼本身的厚度padding 內(nèi)邊距 內(nèi)容與邊框間的距離margin 外邊距 盒子與其他盒子之間的距離 border 紙殼 padding 填充物 margin 邊界間隙 盒子模型 包裝盒 Page 6 marginmargin topmargin rightmargin bottommargin left margin外邊距屬性 margin right右邊界 margin left左邊界 margin top上邊界 margin bottom下邊界 上外邊距 右外邊距 下外邊距 左外邊距 Page 7 margin 1px2px3px4px 上外邊距1px 右外邊距2px 下外邊距3px 左外邊距4px margin 1px2px3px 等同于1px2px3px2px margin 1px2px 等同于1px2px1px2px 上下外邊距各為1px 左右外邊距各為2px margin 1px 等同于1px1px1px1px 四個(gè)邊都為1px 特殊設(shè)置 設(shè)置水平auto 水平居中效果 可以使用margin屬性一次設(shè)置四個(gè)方向 也可分別設(shè)置上 右 下 左四個(gè)方向?qū)傩?1 注意點(diǎn) 需要設(shè)為帶單位的長(zhǎng)度值 長(zhǎng)度單位一般是像素 px 2 方向省略則按上下 左右同值或統(tǒng)一設(shè)置處理 以上都同適用于邊框 內(nèi)邊距 3 Page 8 border邊框?qū)傩?border widthborder styleborder color 修飾屬性 四個(gè)方向 縮寫形式 border topborder rightborder bottomborder left borderborder left 邊框顏色 邊框?qū)挾?邊框樣式 border color FF00FF border width 2px border style solid 上邊框 右邊框 border top width 5px border right style solid 下邊框 border bottom color red 左邊框 border left width 5px 統(tǒng)一設(shè)置 左邊框 border 1pxsolidblue 設(shè)置四個(gè)方向的邊框均為1像素 藍(lán)色 實(shí)線 border left 1pxsolidblue 設(shè)置左邊框均為1像素 藍(lán)色 實(shí)線 Page 9 padding內(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í)針方向 也可一次賦值 2020 2 4 10 Page 11 使用盒子屬性布局元素1 1 上外邊距30px 下填充40px 左右外邊距 水平居中 左填充80px 5px寬的邊框 如何實(shí)現(xiàn)如下貴美logo圖片的布局 圖片背景色 ff7300 頁面背景色 ccc 問題 Page 12 使用盒子屬性布局元素1 2 body margin 0px padding 0px background ccc logo width 380px border 5pxsolid 666 padding 10px20px40px80px background ff7300 margin 30pxauto 水平居中 解決 設(shè)置頁面內(nèi)容 body 的背景和居中效果 貴美商城 logo圖片的布局 首先組織HTML結(jié)構(gòu) 再寫CSS進(jìn)行布局或美化 Page 13 使用盒子屬性布局2 1 線寬2px 虛線框樣式dashed 顏色為red 使用background border right width border right color border right style padding top和padding left來實(shí)現(xiàn) 行的背景色為yellow 實(shí)現(xiàn)如圖所示的效果 Page 14 使用盒子屬性實(shí)現(xiàn)DIV CSS布局3 1 main 主體部分 footer 底部部分 header 頂部 問題 如何實(shí)現(xiàn)注冊(cè)頁面的布局 Page 15 使用盒子屬性實(shí)現(xiàn)DIV CSS布局3 2 為了控制整個(gè)頁面的居中 添加一個(gè)大容器 container main 主體部分 footer 底部部分 header 頂部 示例 實(shí)現(xiàn)步驟1 分析頁面的分塊結(jié)構(gòu) 形成HTML組織結(jié)構(gòu) Page 16 使用盒子屬性實(shí)現(xiàn)DIV CSS布局3 3 containe 980px 居中 header 136px 背景色 ccc main 400px 背景色 fff 實(shí)現(xiàn)步驟2 編寫每個(gè)DIV塊的CSS控制定位 示例 Page 17 總結(jié) 1 盒子模型是頁面布局的基礎(chǔ) 包含