HTML盒子模型
试讲人：XXX
1
章节目标
掌握盒子模型结构和属性
掌握margin，padding属性细分的属性
使用盒子模型相关属性实现页面布局
2
生活案例
包装盒
图一
盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品
是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳
边框
内边距
外边距
3
盒子模型的基本属性
盒子模型是网页布局的基础
盒子属性是盒子模型的关键
border（边框）：盒子外壳本身的厚度
padding（内边距）：内容与边框间的距离
margin（外边距）：盒子与其他盒子之间的距离
border
纸壳
padding
填充物
margin
边界间隙
盒子模型
包装盒
5
margin
margin-top
margin-right
margin-bottom
margin-left
margin外边距属性
margin-right
右边界
margin-left
左边界
margin-top
上边界
margin-bottom
下边界
上外边距
右外边距
下外边距
左外边距
6
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
7
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像素、蓝色、实线）
8
padding内边距属性
padding-top
padding-right
padding-bottom
padding-left
上内边距
右内边距
下内边距
左内边距
margin-right
右填充
margin-left
左填充
margin-top
上填充
margin-bottom
下填充
padding设置边框与内容之间的距离，以便精确控制内容在盒子中的位置。
padding并非实体，是透明留白，没有修饰属性。
padding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。
9
上外边距30px
下填充40px
左右外边距：水平居中
左填充80px
5px宽的边框
如何实现如下贵美logo图片的布局？
图片背景色：#ff7300
页面背景色：#ccc
问题
10
<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>
<di
HTML盒子模型介绍 来自淘豆网m.daumloan.com转载请标明出处.
