HTML盒子模型
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
百度文库
Page 15
总结
总结 1.盒子模型是页面布局的基础，包含外边距，边框，内边距以及元素 的宽高等属性。 2.盒子三个属性： border（边框）：盒子外壳本身的宽度。 padding（内边距）：内容与边框间的距离。 margin（外边距）：盒子与其他盒子之间的距离。
Page 16
Page 17
margin（外边距）：盒子与其他盒子之间的距离 盒子模型 包装盒
border padding
margin
纸壳 填充物
边界间隙
Page 5
margin外边距属性
margin
margin-top margin-right
上外边距 margin-top 上边界 margin-right 右边界
右外边距
header：顶部
main：主体部分
footer：底部部分
Page 14
使用盒子属性实现DIV+CSS布局3.3
示例
实现步骤 2、编写每个DIV块的CSS控制定位
#containe: 980px 、居中 #header： 136px;、背景 色#ccc
#main： 400px;、背景 色#fff
Page 3
盒子模型的结构
盒子模型 平面图 盒子模型三维立体图：边框>>内容内 边距>>背景图>>背景色>>外边距
Page 4
盒子模型的基本属性
盒子模型是网页布局的基础 盒子属性是盒子模型的关键
border（边框）：盒子外壳本身的厚度
padding（内边距）：内容与边框间的距离
Page 12
使用盒子属性实现DIV+CSS布局3.1
问题
如何实现注册页面的布局？
header：顶部
main：主体部分
footer：底部部分
Page 13
使用盒子属性实现DIV+CSS布局3.2
示例
实现步骤 1、分析页面的分块结构，形成HTML组织结构
为了控制整个 页面的居中，添 加一个大容器： container
margin-bottom 下外边距 margin-left
左外边距
margin-left 左边界 margin-bottom 下边界
Page 6
注意点
1
可以使用margin属性一次设置四个方向，也可分别设置上，右，下，左 四个方向属性
2 3
需要设为带单位的长度值，长度单位一般是像素（px） 方向省略则按上下，左右同值或统一设置处理， 以上都同适用于边框，内边距 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，水平居中效果。
Page 7
border边框属性
修 饰 属 性
border-width border-style border-color 边框宽度 边框样式 边框颜色 border-width:2px border-style:solid border-color:#FF00FF
padding-top padding-right padding-bottom padding-left
上内边距 右内边距 下内边距 左内边距 margin-left 左填充
margin-top 上填充
margin-right 右填充
margin-bottom 下填充 padding并非实体，是透明留白，没有修饰属性。 padding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。
HTML盒子模型
试讲人：XXX
Page 1
章节目标
掌握盒子模型结构和属性 掌握margin，padding属性细分的属性 使用盒子模型相关属性实现页面布局
Page 2
包装盒
生活案例
边框
外边距
内边距
图 一 盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品 是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳
Page 11
使用盒子属性布局2.1
实现如图所示的效果
线宽2px、虚线框样式 dashed、颜色为red
行的背景色 为yellow
使用background、border-right-width、border-right-color、 border-right-style、padding-top和padding-left来实现
Page 9
使用盒子属性布局元素1.1
问题 如何实现如下贵美logo图片的布局？
上外边距 30px 左右外边距： 水平居中
下填充 40px 左填充 80px 5px宽的 边框 图片背景色： #ff7300
页面背景 色：#ccc
Page 10
解决
使用盒子属性布局元素1.2
设置页面内容 （body）的背景 <style type="text/css"> 和居中效果 body { margin:0px;padding:0px; background:#ccc; } #logo { width:380px; “贵美商城”logo图 border:5px solid #666; 片的布局 padding:10px 20px 40px 80px; background:#ff7300; margin:30px auto; //水平居中 首先组织HTML结构， } 再写CSS进行布局或 </style> 美化 <body> <div id="logo"><img src="images/logo.jpg" alt="logo"/> </div> </body>
四 个 方 向
border-top border-right
上边框 右边框 下边框 左边框 统一设置 左边框
border-top-width:5px border-right-style: solid border-bottom-color:red
border-bottom
border-left border border-left …
border-left-width:5px
border:1px solid blue（设置四个方向的 边框均为1像素、蓝色、实线）
缩 写 形 式
border-left:1px solid blue（设置左边框 均为1像素、蓝色、实线）
Page 8
padding内边距属性
padding设置边框与内容之间的距离，以便精确控制内容在盒子中的位置。
Page 15
总结
总结 1.盒子模型是页面布局的基础，包含外边距，边框，内边距以及元素 的宽高等属性。 2.盒子三个属性： border（边框）：盒子外壳本身的宽度。 padding（内边距）：内容与边框间的距离。 margin（外边距）：盒子与其他盒子之间的距离。
Page 16
Page 17
margin（外边距）：盒子与其他盒子之间的距离 盒子模型 包装盒
border padding
margin
纸壳 填充物
边界间隙
Page 5
margin外边距属性
margin
margin-top margin-right
上外边距 margin-top 上边界 margin-right 右边界
右外边距
header：顶部
main：主体部分
footer：底部部分
Page 14
使用盒子属性实现DIV+CSS布局3.3
示例
实现步骤 2、编写每个DIV块的CSS控制定位
#containe: 980px 、居中 #header： 136px;、背景 色#ccc
#main： 400px;、背景 色#fff
Page 3
盒子模型的结构
盒子模型 平面图 盒子模型三维立体图：边框>>内容内 边距>>背景图>>背景色>>外边距
Page 4
盒子模型的基本属性
盒子模型是网页布局的基础 盒子属性是盒子模型的关键
border（边框）：盒子外壳本身的厚度
padding（内边距）：内容与边框间的距离
Page 12
使用盒子属性实现DIV+CSS布局3.1
问题
如何实现注册页面的布局？
header：顶部
main：主体部分
footer：底部部分
Page 13
使用盒子属性实现DIV+CSS布局3.2
示例
实现步骤 1、分析页面的分块结构，形成HTML组织结构
为了控制整个 页面的居中，添 加一个大容器： container
margin-bottom 下外边距 margin-left
左外边距
margin-left 左边界 margin-bottom 下边界
Page 6
注意点
1
可以使用margin属性一次设置四个方向，也可分别设置上，右，下，左 四个方向属性
2 3
需要设为带单位的长度值，长度单位一般是像素（px） 方向省略则按上下，左右同值或统一设置处理， 以上都同适用于边框，内边距 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，水平居中效果。
Page 7
border边框属性
修 饰 属 性
border-width border-style border-color 边框宽度 边框样式 边框颜色 border-width:2px border-style:solid border-color:#FF00FF
padding-top padding-right padding-bottom padding-left
上内边距 右内边距 下内边距 左内边距 margin-left 左填充
margin-top 上填充
margin-right 右填充
margin-bottom 下填充 padding并非实体，是透明留白，没有修饰属性。 padding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。
HTML盒子模型
试讲人：XXX
Page 1
章节目标
掌握盒子模型结构和属性 掌握margin，padding属性细分的属性 使用盒子模型相关属性实现页面布局
Page 2
包装盒
生活案例
边框
外边距
内边距
图 一 盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品 是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳
Page 11
使用盒子属性布局2.1
实现如图所示的效果
线宽2px、虚线框样式 dashed、颜色为red
行的背景色 为yellow
使用background、border-right-width、border-right-color、 border-right-style、padding-top和padding-left来实现
Page 9
使用盒子属性布局元素1.1
问题 如何实现如下贵美logo图片的布局？
上外边距 30px 左右外边距： 水平居中
下填充 40px 左填充 80px 5px宽的 边框 图片背景色： #ff7300
页面背景 色：#ccc
Page 10
解决
使用盒子属性布局元素1.2
设置页面内容 （body）的背景 <style type="text/css"> 和居中效果 body { margin:0px;padding:0px; background:#ccc; } #logo { width:380px; “贵美商城”logo图 border:5px solid #666; 片的布局 padding:10px 20px 40px 80px; background:#ff7300; margin:30px auto; //水平居中 首先组织HTML结构， } 再写CSS进行布局或 </style> 美化 <body> <div id="logo"><img src="images/logo.jpg" alt="logo"/> </div> </body>
四 个 方 向
border-top border-right
上边框 右边框 下边框 左边框 统一设置 左边框
border-top-width:5px border-right-style: solid border-bottom-color:red
border-bottom
border-left border border-left …
border-left-width:5px
border:1px solid blue（设置四个方向的 边框均为1像素、蓝色、实线）
缩 写 形 式
border-left:1px solid blue（设置左边框 均为1像素、蓝色、实线）
Page 8
padding内边距属性
padding设置边框与内容之间的距离，以便精确控制内容在盒子中的位置。