《HTML盒子模型》PPT课件.ppt
Page 1,HTML盒子模型,试讲人：XXX,Page 2,章节目标,掌握盒子模型结构和属性掌握margin，padding属性细分的属性使用盒子模型相关属性实现页面布局,Page 3,生活案例,包装盒,图一,盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳,边框,内边距,外边距,Page 4,盒子模型的结构,盒子模型三维立体图：边框内容内边距背景图背景色外边距,盒子模型平面图,Page 5,盒子模型的基本属性,盒子模型是网页布局的基础盒子属性是盒子模型的关键border（边框）：盒子外壳本身的厚度padding（内边距）：内容与边框间的距离margin（外边距）：盒子与其他盒子之间的距离,border,纸壳,padding,填充物,margin,边界间隙,盒子模型,包装盒,Page 6,marginmargin-topmargin-rightmargin-bottommargin-left,margin外边距属性,margin-right右边界,margin-left左边界,margin-top上边界,margin-bottom下边界,上外边距,右外边距,下外边距,左外边距,Page 7,margin：1px 2px 3px 4px;上外边距1px，右外边距2px，下外边距3px，左外边距4px。margin：1px 2px 3px;等同于 1px 2px 3px 2px。margin：1px 2px;等同于1px 2px 1px 2px,上下外边距各为1px，左右外边距各为2px。margin：1px，等同于1px 1px 1px 1px,四个边都为1px。特殊设置：设置水平auto，水平居中效果。,可以使用margin属性一次设置四个方向，也可分别设置上，右，下，左四个方向属性,1,注意点,需要设为带单位的长度值，长度单位一般是像素（px）,2,方向省略则按上下，左右同值或统一设置处理，以上都同适用于边框，内边距,3,Page 8,border边框属性,border-widthborder-styleborder-color,修饰属性,四个方向,缩写形式,border-topborder-rightborder-bottomborder-left,borderborder-left,边框颜色,边框宽度,边框样式,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,统一设置,左边框,border:1px solid blue（设置四个方向的边框均为1像素、蓝色、实线）,border-left:1px solid blue（设置左边框均为1像素、蓝色、实线）,Page 9,padding内边距属性,padding-toppadding-rightpadding-bottompadding-left,上内边距,右内边距,下内边距,左内边距,margin-right右填充,margin-left左填充,margin-top上填充,margin-bottom下填充,padding设置边框与内容之间的距离，以便精确控制内容在盒子中的位置。,padding并非实体，是透明留白，没有修饰属性。,padding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。,Page 10,使用盒子属性布局元素1.1,上外边距30px,下填充40px,左右外边距：水平居中,左填充80px,5px宽的边框,如何实现如下贵美logo图片的布局？,图片背景色：#ff7300,页面背景色：#ccc,问题,Page 11,使用盒子属性布局元素1.2,body margin:0px;padding:0px;background:#ccc;#logo width:380px;border:5px solid#666;padding:10px 20px 40px 80px;background:#ff7300;margin:30px auto;/水平居中,解决,设置页面内容（body）的背景和居中效果,“贵美商城”logo图片的布局,首先组织HTML结构，再写CSS进行布局或美化,Page 12,使用盒子属性布局2.1,线宽2px、虚线框样式dashed、颜色为red,使用background、border-right-width、border-right-color、border-right-style、padding-top和padding-left来实现,行的背景色为yellow,实现如图所示的效果,Page 13,使用盒子属性实现DIV+CSS布局3.1,main：主体部分,footer：底部部分,header：顶部,问题,如何实现注册页面的布局？,Page 14,使用盒子属性实现DIV+CSS布局3.2,为了控制整个页面的居中，添加一个大容器：container,main：主体部分,footer：底部部分,header：顶部,示例,实现步骤1、分析页面的分块结构，形成HTML组织结构,Page 15,使用盒子属性实现DIV+CSS布局3.3,#containe:980px、居中,#header：136px;、背景色#ccc,#main：400px;、背景色#fff,实现步骤2、编写每个DIV块的CSS控制定位,示例,Page 16,总结,1.盒子模型是页面布局的基础，包含外边距，边框，内边距以及元素的宽高等属性。2.盒子三个属性：border（边框）：盒子外壳本身的宽度。padding（内边距）：内容与边框间的距离。margin（外边距）：盒子与其他盒子之间的距离。,总结,Page 17,谢谢欣赏！,
