最新HTML盒子模型幻灯片.ppt

《最新HTML盒子模型幻灯片.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、HTML盒子模型章节目标掌握盒子模型结构和属性掌握margin，padding属性细分的属性使用盒子模型相关属性实现页面布局2生活案例包装盒图一盒子的概念在我们生活中并不陌生，例如礼品的包装盒如图一礼品是最终运输的物品，四周一般会添加抗震材料，在外面是包装纸壳边框内边距外边距3margin：1px2px3px4px;上外边距1px，右外边距2px，下外边距3px，左外边距4px。margin：1px2px3px;等同于1px2px3px2px。margin：1px2px;等同于1px2px1px2px,上下外边距各为1px，左右外边距各为2px。margin：1px

2、，等同于1px1px1px1px,四个边都为1px。特殊设置：设置水平auto，水平居中效果。可以使用margin属性一次设置四个方向，也可分别设置上，右，下，左四个方向属性1注意点需要设为带单位的长度值，长度单位一般是像素（px）2方向省略则按上下，左右同值或统一设置处理，以上都同适用于边框，内边距37border边框属性border-widthborder-styleborder-color修饰属性四个方向缩写形式border-topborder-rightborder-bottomborder-leftborderborder-left…边框颜色边框宽度边框样

3、式border-color:#FF00FFborder-width:2pxborder-style:solid上边框右边框border-top-width:5pxborder-right-style:solid下边框border-bottom-color:red左边框border-left-width:5px统一设置左边框border:1pxsolidblue（设置四个方向的边框均为1像素、蓝色、实线）border-left:1pxsolidblue（设置左边框均为1像素、蓝色、实线）8padding内边距属性padding-toppadding-rightpadd

4、ing-bottompadding-left上内边距右内边距下内边距左内边距margin-right右填充margin-left左填充margin-top上填充margin-bottom下填充padding设置边框与内容之间的距离，以便精确控制内容在盒子中的位置。padding并非实体，是透明留白，没有修饰属性。padding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。9使用盒子属性布局元素1.1上外边距30px下填充40px左右外边距：水平居中左填充80px5px宽的边框如何实现如下贵美logo图片的布局？图片背景色：#ff7300页面背景色：#cc

5、c问题10使用盒子属性布局元素1.2body{margin:0px;padding:0px;background:#ccc;}#logo{width:380px;border:5pxsolid#666;padding:10px20px40px80px;background:#ff7300;margin:30pxauto;//水平居中}