HTML盒子模型PPT资料.ppt
《HTML盒子模型PPT资料.ppt》由会员分享，可在线阅读，更多相关《HTML盒子模型PPT资料.ppt（17页珍藏版）》请在冰豆网上搜索。
1px2px3px4px;
上外边距1px，右外边距2px，下外边距3px，左外边距4px。
margin：
1px2px3px;
等同于1px2px3px2px。
1px2px;
等同于1px2px1px2px,上下外边距各为1px，左右外边距各为2px。
1px，等同于1px1px1px1px,四个边都为1px。
特殊设置：
设置水平auto，水平居中效果。
可以使用margin属性一次设置四个方向，也可分别设置上，右，下，左四个方向属性,1,注意点,需要设为带单位的长度值，长度单位一般是像素（px）,2,方向省略则按上下，左右同值或统一设置处理，以上都同适用于边框，内边距,3,7,Page8,border边框属性,border-widthborder-styleborder-color,修饰属性,四个方向,缩写形式,border-topborder-rightborder-bottomborder-left,borderborder-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:
1pxsolidblue（设置四个方向的边框均为1像素、蓝色、实线）,border-left:
1pxsolidblue（设置左边框均为1像素、蓝色、实线）,8,Page9,padding内边距属性,padding-toppadding-rightpadding-bottompadding-left,上内边距,右内边距,下内边距,左内边距,margin-right右填充,margin-left左填充,margin-top上填充,margin-bottom下填充,padding设置边框与内容之间的距离，以便精确控制内容在盒子中的位置。
padding并非实体，是透明留白，没有修饰属性。
padding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。
9,Page10,使用盒子属性布局元素1.1,上外边距30px,下填充40px,左右外边距：
水平居中,左填充80px,5px宽的边框,如何实现如下贵美logo图片的布局？
图片背景色：
#ff7300,页面背景色：
#ccc,问题,10,Page11,使用盒子属性布局元素1.2,bodymargin:
0px;
padding:
background:
#ccc;
#logowidth:
380px;
border:
5pxsolid#666;
10px20px40px80px;
#ff7300;
margin:
30pxauto;
/水平居中,解决,设置页面内容（body）的背景和居中效果,“贵美商城”logo图片的布局,首先组织HTML结构，再写CSS进行布局或美化,11,Page12,使用盒子属性布局2.1,线宽2px、虚线框样式dashed、颜色为red,使用background、border-right-width、border-right-color、border-right-style、padding-top和padding-left来实现,行的背景色为yellow,实现如图所示的效果,12,Page13,使用盒子属性实现DIV+CSS布局3.1,main：
主体部分,footer：
底部部分,header：
顶部,问题,如何实现注册页面的布局？
13,Page14,使用盒子属性实现DIV+CSS布局3.2,为了控制整个页面的居中，添加一个大容器：
container,main：
顶部,示例,实现步骤1、分析页面的分块结构，形成HTML组织结构,14,Page15,使用盒子属性实现DIV+CSS布局3.3,#containe:
980px、居中,#header：
136px;
、背景色#ccc,#main：
400px;
、背景色#fff,实现步骤2、编写每个DIV块的CSS控制定位,示例,15,Page16,总结,1.盒子模型是页面布局的基础，包含外边距，边框，内边距以及元素的宽高等属性。
2.盒子三个属性：
border（边框）：
盒子外壳本身的宽度。
padding（内边距）：
内容与边框间的距离。
margin（外边距）：
盒子与其他盒子之间的距离。
总结,16,Page17,谢谢欣赏！
17,
升级会员 