《HTML盒子模型.ppt

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 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 生活案例 包装盒 图一 盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品 是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳 边框 内边距 外边距 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 盒子模型三维立体图：边框内容内边距背景图背景色外边距 盒子模型平面图 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. border 纸壳 padding 填充物 margin 边界间隙 盒子模型 包装盒 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. margin margin-top margin-right margin-bottom margin-left margin外边距属性 margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 上外边距 右外边距 下外边距 左外边距 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 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 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. border边框属性 border-width border-style border-color 修饰属性 四个方向 缩写形式 bo