《HTML盒子模型》由会员分享，可在线阅读，更多相关《HTML盒子模型（17页珍藏版）》请在金锄头文库上搜索。
1、Page 1,HTML盒子模型,试讲人：XXX,Page 2,章节目标,掌握盒子模型结构和属性 掌握margin，padding属性细分的属性 使用盒子模型相关属性实现页面布局,Page 3,生活案例,包装盒,图一,盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品 是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳,边框,内边距,外边距,Page 4,盒子模型的结构,盒子模型三维立体图：边框内容内边距背景图背景色外边距,盒子模型平面图,Page 5,盒子模型的基本属性,盒子模型是网页布局的基础 盒子属性是盒子模型的关键 border（边框）：盒子外壳本身的厚度 padding
2、（内边距）：内容与边框间的距离 margin（外边距）：盒子与其他盒子之间的距离,border,纸壳,padding,填充物,margin,边界间隙,盒子模型,包装盒,Page 6,margin margin-top margin-right margin-bottom margin-left,margin外边距属性,margin-right 右边界,margin-left 左边界,margin-top 上边界,margin-bottom 下边界,上外边距,右外边距,下外边距,左外边距,Page 7,margin：1px 2px 3px 4px ; 上外边距1px，右外边距2px，下外边距3p
3、x，左外边距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边框属
4、性,border-width border-style border-color,修饰属性,四个方向,缩写形式,border-top border-right border-bottom border-left,border border-left ,边框颜色,边框宽度,边框样式,border-color:#FF00FF,border-width:2px,border-style:solid,上边框,右边框,border-top-width:5px,border-right-style: solid,下边框,border-bottom-color:red,左边框,border-left-wid
5、th:5px,统一设置,左边框,border:1px solid blue（设置四个方向的边框均为1像素、蓝色、实线）,border-left:1px solid blue（设置左边框均为1像素、蓝色、实线）,Page 9,adding内边距属性,padding-top padding-right padding-bottom padding-left,上内边距,右内边距,下内边距,左内边距,margin-right 右填充,margin-left 左填充,margin-top 上填充,margin-bottom 下填充,adding设置边框与内容之间的距离，以便精确控制内容在盒子中的位置。,
6、adding并非实体，是透明留白，没有修饰属性。,adding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。,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 20
7、px 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,使用盒
8、子属性实现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,谢谢欣赏！,
