(精)HTML盒子模型.pptVIP

Chapter HTML盒子模型 章节目标 掌握盒子模型结构和属性 掌握margin，padding属性细分的属性 使用盒子模型相关属性实现页面布局 盒子模型的结构 盒子模型的基本属性 盒子模型是网页布局的基础 盒子属性是盒子模型的关键 border（边框）：盒子外壳本身的厚度 padding（内边距）：内容与边框间的距离 margin（外边距）：盒子与其他盒子之间的距离 使用盒子属性布局元素1.1 使用盒子属性布局元素1.2 使用盒子属性布局2.1 使用盒子属性实现DIV+CSS布局3.1 使用盒子属性实现DIV+CSS布局3.2 使用盒子属性实现DIV+CSS布局3.3 总结 1.盒子模型是页面布局的基础，包含外边距，边框，内边距以及元素的宽高等属性。 2.盒子三个属性： border（边框）：盒子外壳本身的宽度。 padding（内边距）：内容与边框间的距离。 margin（外边距）：盒子与其他盒子之间的距离。 试讲人：XXX 生活案例 包装盒 图一 盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品 是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳 边框 内边距 外边距 盒子模型三维立体图：边框内容内边距背景图背景色外边距 盒子模型平面图 border 纸壳 padding 填充物 margin