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 1px2px3px4px 上外边距1px 右外边距2px 下外边距3px 左外边距4px margin 1px2px3px 等同于1px2px3px2px margin 1px2px 等同于1px2px1px2px 上下外边距各为1px 左右外边距各为2px margin 1px 等同于1px1px1px1px 四个边都为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 1pxsolidblue 设置四个方向的边框均为1像素 蓝色 实线 border left 1pxsolidblue 设置左边框均为1像素 蓝色 实线 Page 9 padding内边距属性 padding toppadding rightpadding bottompadding left 上内边距 右内边距 下内边距 左内边距 margin right右填充 margin left左填充 margin top上填充 margin bottom下填充 padding设置边框与内容之间的距离 以便精确控制内容在盒子中的位置 padding并非实体 是透明留白 没有修饰属性 padding值不允许为负值 可四边分别设置 顺时针方向 也可一次赋值 2020 2 4 10 Page 11 使用盒子属性布局元素1 1 上外边距30px 下填充40px 左右外边距 水平居中 左填充80px 5px宽的边框 如何实现如下贵美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 水平居中 解决 设置页面内容 body 的背景和居中效果 贵美商城 logo图片的布局 首先组织HTML结构 再写CSS进行布局或美化 Page 13 使用盒子属性布局2 1 线宽2px 虚线框样式dashed 颜色为red 使用background border right width border right color border right style padding top和padding left来实现 行的背景色为yellow 实现如图所示的效果 Page 14 使用盒子属性实现DIV CSS布局3 1 main 主体部分 footer 底部部分 header 顶部 问题 如何实现注册页面的布局 Page 15 使用盒子属性实现DIV CSS布局3 2 为了控制整个页面的居中 添加一个大容器 container main 主体部分 footer 底部部分 header 顶部 示例 实现步骤1 分析页面的分块结构 形成HTML组织结构 Page 16 使用盒子属性实现DIV CSS布局3 3 containe 980px 居中 header 136px 背景色 ccc main 400px 背景色 fff 实现步骤2 编写每个DIV块的CSS控制定位 示例 Page 17 总结 1 盒子模型是页面布局的基础 包含