html盒子模型.pptVIP

HTML盒子模型 试讲人：XXX 章节目标 掌握盒子模型结构和属性 掌握margin，padding属性细分的属性 使用盒子模型相关属性实现页面布局 生活案例 包装盒 图一 盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品 是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳 边框 内边距 外边距 盒子模型的结构 盒子模型三维立体图：边框内容内边距背景图背景色外边距 盒子模型平面图 盒子模型的基本属性 盒子模型是网页布局的基础 盒子属性是盒子模型的关键 border（边框）：盒子外壳本身的厚度 padding（内边距）：内容与边框间的距离 margin（外边距）：盒子与其他盒子之间的距离 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值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。 使用盒子属性布局元素1.1 上外边距30px 下填充40px 左右外边距：水平居中 左填充80px 5px宽的边框 如何实现如下贵美logo图片的布局？ 图片背景色：#ff7300 页面背景色：#ccc 问题 使用盒子属性布局元素1.2 style type=text/css body { margin:0px;padding:0px; background:#ccc; } #logo { width:380px; border:5px solid #666; padding:10px 20px 40px 80px; background:#ff7300; margin:30px auto; //水平居中 } /style body div id=logoimg src=images/logo.jpg alt=logo/ /div /body 解决 设置页面内容（body）的背景和居中效果 “贵美商城”logo