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 生活案例 包装盒 图一 盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品 是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳 边框 内边距 外边距 盒子模型三维立体图：边框内容内边距背景图背景色外边距 盒子模型平面图 border 纸壳 padding 填充物 margin 边界间隙 盒子模型 包装盒 margin margin-top margin-right margin-bottom margin-left margin外边距属性 margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 上外边距 右外边距 下外边距 左外边距 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 border边框属性 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-width:5px 统一设置 左边框 border:1px solid blue（设置四个方向的边框均为1像素、蓝色、实线） border-left:1px solid blue（设置左边框均为1像素、蓝色、实线） padding内边距属性 padding-top padding-right padding-bottom padding-left 上内边距 右内边距 下内边距 左内边距 margin-right 右填充 margin-left 左填充 margin-top 上填充 margin-bottom 下填充 padding设置边框与内容之间的距离，以便精确控制内容在盒子中的位置。 padding并非实体，是透明留白，没有修饰属性。 padding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。 上外边距30px 下填充40px 左右外边距：水平居中 左填充80px 5px宽的边框 如何实现如下贵美logo图片的布局？ 图片背景色：#ff7300 页面背景色：#ccc 问题 style type=text/css body { margin:0px;padding:0px; background:#ccc; } #logo { width:3