《HTML盒子模型》PPT课件

《《HTML盒子模型》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、HTML盒子模型试讲人：XXX1章节目标掌握盒子模型结构和属性掌握margin，padding属性细分的属性使用盒子模型相关属性实现页面布局2生活案例包装盒图一盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳边框内边距外边距3盒子模型的结构盒子模型三维立体图：边框>>内容内边距>>背景图>>背景色>>外边距盒子模型平面图4盒子模型的基本属性盒子模型是网页布局的基础盒子属性是盒子模型的关键border（边框）：盒子外壳本身的厚度padding（内边距）：内容与边框间的距离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,四个边都为1px。特殊设置：设置水平auto，水平居中效果。可以使用margin属性一次设置四个方向，也可分别设置上，右，下，左四个方向属性1注意点需要设为带单位的长度值，长度单位一般是像素（px）2方向省略则按上下，左右同值或统一设置处理，以上都同适用于边框，内边距37border边框属性border-widthborder-styleborder-color修饰属性四个方向缩写形式border-

4、topborder-rightborder-bottomborder-leftborderborder-left…边框颜色边框宽度边框样式border-color:#FF00FFborder-width:2pxborder-style:solid上边框右边框border-top-width:5pxborder-right-style:solid下边框border-bottom-color:red左边框border-left-width:5px统一设置左边框border:1pxsolidblue（设置四个方向的边框均为1像素、蓝色、实线）border-

5、left:1pxsolidblue（设置左边框均为1像素、蓝色、实线）8padding内边距属性padding-toppadding-rightpadding-bottompadding-left上内边距右内边距下内边距左内边距margin-right右填充margin-left左填充margin-top上填充margin-bottom下填充padding设置边框与内容之间的距离，以便精确控制内容在盒子中的位置。padding并非实体，是透明留白，没有修饰属性。padding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。9使用盒子属性布局

6、元素1.1上外边距30px下填充40px左右外边距：水平居中左填充80px5px宽的边框如何实现如下贵美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>