HTML盒子模型.ppt

《HTML盒子模型.ppt》由会员分享，可在线阅读，更多相关《HTML盒子模型.ppt（18页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、Page 2章节目标n 掌握掌握盒子盒子模型结构和属性模型结构和属性n 掌握掌握marginmargin，paddingpadding属性细分属性细分的的属性属性n 使用盒使用盒子子模型相关属性实现页面布局模型相关属性实现页面布局Page 3生活案例包装盒图一 盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳边框内边距外边距Page 4盒子模型的结构盒子模型三维立体图：边框盒子模型三维立体图：边框内容内内容内边距边距背景图背景图背景色背景色外边距外边距盒子模型盒子模型平面图平面图Page 5盒子模型的基本属性n 盒子模型是网页

2、布局的基础盒子模型是网页布局的基础n 盒子属性是盒子模型的关键盒子属性是盒子模型的关键n border（边框）：盒子外壳本身的厚度（边框）：盒子外壳本身的厚度n padding（内边距）：内容与边框间的距离（内边距）：内容与边框间的距离n margin（外边距）：盒子与其他盒子之间的距离（外边距）：盒子与其他盒子之间的距离border纸壳padding填充物margin边界间隙盒子模型包装盒Page 6marginmargin-topmargin-rightmargin-bottommargin-leftmargin外边距属性margin-right右边界右边界margin-left左边界左边

3、界margin-top上边界上边界margin-bottom下边界下边界上外边距上外边距右外边距右外边距下外边距下外边距左外边距左外边距Page 7margin：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,

4、四个边都为四个边都为1px。特殊设置：设置水平特殊设置：设置水平auto，水平居中效果。，水平居中效果。可以使用可以使用marginmargin属性一次设置四个方向，也可分别设置上，右，下，左属性一次设置四个方向，也可分别设置上，右，下，左四个方向属性四个方向属性1注意点需要设为带单位的长度值，长度单位一般是像素（需要设为带单位的长度值，长度单位一般是像素（pxpx）2方向省略则按上下，左右同值或统一设置处理，方向省略则按上下，左右同值或统一设置处理，以上都同适用于边框，内边距以上都同适用于边框，内边距3Page 8border边框属性n border-widthn border-stylen

5、 border-color 修饰属性修饰属性四个方向四个方向缩写形式缩写形式n border-topn border-rightn border-bottomn border-leftn bordern border-leftn 边框颜色边框颜色边框宽度边框宽度边框样式边框样式 border-color:#FF00FFborder-width:2pxborder-style:solid上边框上边框右边框右边框border-top-width:5pxborder-right-style: solid 下边框下边框 border-bottom-color:red左边框左边框 border-left

6、-width:5px统一设置统一设置左边框左边框border:1px solid blue（设置四个方向的边框均为1像素、蓝色、实线）border-left:1px solid blue（设置左边框均为1像素、蓝色、实线）Page 9padding内边距属性padding-toppadding-rightpadding-bottompadding-left上上内内边距边距右右内内边距边距下下内内边距边距左左内内边距边距margin-right右右填充填充margin-left左填充左填充margin-top上上填充填充margin-bottom下下填充填充padding设置边框与内容之间的距离

7、，以便精确控制内容在盒子中的位置。设置边框与内容之间的距离，以便精确控制内容在盒子中的位置。padding并非实体，是透明留白，没有修饰属性。并非实体，是透明留白，没有修饰属性。padding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。Page 10使用盒子属性布局元素1.1上外边距上外边距30px下填充下填充40px 左右外边距：左右外边距：水平居中水平居中左填充左填充80px5px宽的宽的边框边框n 如何实现如下贵美如何实现如下贵美logo图片的布局？图片的布局？图片背景色：图片背景色：#ff7300 页面背景页面背景

8、色：色：#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进行布局或进行布局或美化美化

9、 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

10、为了控制整个为了控制整个页面的居中，添页面的居中，添加一个大容器：加一个大容器：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总结n 1.盒子模型是页面布局的基础，包含外边距，边框，内边距以及元素盒子模型是页面布

11、局的基础，包含外边距，边框，内边距以及元素的宽高等属性。的宽高等属性。n 2.盒子三个属性：盒子三个属性：n border（边框）：盒子外壳本身的宽度。（边框）：盒子外壳本身的宽度。n padding（内边距）：内容与边框间的距离。（内边距）：内容与边框间的距离。n margin（外边距）：盒子与其他盒子之间的距离。（外边距）：盒子与其他盒子之间的距离。总结Page 17进入夏天，少不了一个热字当头，电扇空调陆续登场，每逢此时，总会进入夏天，少不了一个热字当头，电扇空调陆续登场，每逢此时，总会想起那一把蒲扇。蒲扇，是记忆中的农村，夏季经常用的一件物品。记想起那一把蒲扇。蒲扇，是记忆中的农村，夏

12、季经常用的一件物品。记忆中的故乡，每逢进入夏天，集市上最常见的便是蒲扇、凉席，不论男女老忆中的故乡，每逢进入夏天，集市上最常见的便是蒲扇、凉席，不论男女老少，个个手持一把，忽闪忽闪个不停，嘴里叨叨着少，个个手持一把，忽闪忽闪个不停，嘴里叨叨着“怎么这么热怎么这么热”，于是三，于是三五成群，聚在大树下，或站着，或随即坐在石头上，手持那把扇子，边唠嗑五成群，聚在大树下，或站着，或随即坐在石头上，手持那把扇子，边唠嗑边乘凉。孩子们却在周围跑跑跳跳，热得满头大汗，不时听到边乘凉。孩子们却在周围跑跑跳跳，热得满头大汗，不时听到“强子，别跑强子，别跑了，快来我给你扇扇了，快来我给你扇扇”。孩子们才不听这一

13、套，跑个没完，直到累气喘吁吁，。孩子们才不听这一套，跑个没完，直到累气喘吁吁，这才一跑一踮地围过了，这时母亲总是，好似生气的样子，边扇边训，这才一跑一踮地围过了，这时母亲总是，好似生气的样子，边扇边训，“你你看热的，跑什么？看热的，跑什么？”此时这把蒲扇，是那么凉快，那么的温馨幸福，有母亲此时这把蒲扇，是那么凉快，那么的温馨幸福，有母亲的味道！蒲扇是中国传统工艺品，在我国已有三千年多年的历史。取材的味道！蒲扇是中国传统工艺品，在我国已有三千年多年的历史。取材于棕榈树，制作简单，方便携带，且蒲扇的表面光滑，因而，古人常会在上于棕榈树，制作简单，方便携带，且蒲扇的表面光滑，因而，古人常会在上面作画。古有棕扇、葵扇、蒲扇、蕉扇诸名，实即今日的蒲扇，江浙称之为面作画。古有棕扇、葵扇、蒲扇、蕉扇诸名，实即今日的蒲扇，江浙称之为芭蕉扇。六七十年代，人们最常用的就是这种，似圆非圆，轻巧又便宜的蒲芭蕉扇。六七十年代，人们最常用的就是这种，似圆非圆，轻巧又便宜的蒲扇。蒲扇流传至今，我的记忆中，它跨越了半个世纪，也走过了我们的扇。蒲扇流传至今，我的记忆中，它跨越了半个世纪，也走过了我们的半个人生的轨迹，携带着特有的念想，一年年，一天天，流向长长的时间隧半个人生的轨迹，携带着特有的念想，一年年，一天天，流向长长的时间隧道，袅道，袅