网页设计14-盒子模型.ppt

内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 网页设计与制作（14） CSS样式（8） ----盒子模型 知识技能目标 1、通过实训项目了解css盒子模型的结构。 实训内容 在网页中css的盒子模型的实现 实训项目 通过实例了解盒子模型中各种属性的设置对页面的控制效果 1、综合实例 新课讲授 1、P172，盒子实际宽度是由content+padding+border+margin组成 盒子模型 内容 内边距 外边距 边框 新课讲授 2、边框实例 IE对边框的某些属性不大支持 盒子模型 课堂实践 html head title边距实例/title style body{ background-color:#99CCFF; } #box{ width:154px; height:160px; /* 块的大小 */ } } /style /head body div id=box /div /body /html (1)插入并设置块的大小 课堂实践 …… style body{ background-color:#99CCFF; } #box{ width:154px; height:1