Web前端开发项目教程 课件 5.1.1 认识盒子模型及其外边距内边距宽高_第1页
Web前端开发项目教程 课件 5.1.1 认识盒子模型及其外边距内边距宽高_第2页
Web前端开发项目教程 课件 5.1.1 认识盒子模型及其外边距内边距宽高_第3页
Web前端开发项目教程 课件 5.1.1 认识盒子模型及其外边距内边距宽高_第4页
Web前端开发项目教程 课件 5.1.1 认识盒子模型及其外边距内边距宽高_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端开发项目教程主讲人：卞孝丽1.1课程导论项目5美化传统文化网任务5.1创作画像展及图片边框

任务5.2添加创意渐变色与多重图像背景目录任务5.1创作画像展及图片边框【任务效果图】

【任务效果图】★

5.1.1认识盒子模型

★

5.1.2盒子的外边距与内边距★

5.1.3盒子的宽与高【任务效果图】★

5.1.4盒子的边框★

5.1.5盒子的轮廓★5.1.6盒子的阴影

内阴影头像

多重内阴影头像【任务效果图】★5.1.7CSS3新增盒子模型属性

四角半径参数关系

圆角边框效果

边框图片素材

平铺图片边框效果

拉伸图片边框效果

认识盒子模型及其外边距、内边距、宽、高【任务目标】知识目标

理解盒子模型及其构成；掌握使用margin、padding属性设置盒子的外边距、内边距，使用width、height属性调整盒子的宽度与高度的方法。能力目标

能够应用盒子模型的各种规律和特征控制页面元素的显示、布局排版网站页面；提升观察和判断能力，会使用盒子属性美化页面元素、制作常见的盒子模型效果。素质目标

培养耐心细致、精益求精的品质；提升网页制作中的空间感以及创新意识。【导学知识】一、认识盒子模型图

盒子模型外边距（margin）边框（border）内边距（padding）内容（content）【导学知识】二、盒子的外边距与内边距

1.外边距

（1）认识外边距

表

外边距属性及说明设置内容样式属性取值说明外边距margin:上右下左；使用外边距简写属性时可以按上、右、下、左的顺序分别给4个边赋不同值（中间以空格隔开），也可以1个值为4边、2个值为上下/左右、3个值为上/左右/下auto：浏览器来计算外边距，只针对左右方向有效，通常用“margin:0auto;”设置块级元素水平居中；length：以px、pt、cm、em等单位指定外边距，值为0时可以省略单位；%：指定以包含元素宽度的百分比计的外边距，只对应其父元素宽度width；inherit：指定应从父元素继承外边距上外边距margin-top:值；右外边距margin-right:值；下外边距margin-bottom:值；左外边距margin-left:值；【导学知识】二、盒子的外边距与内边距

1.外边距

（2）注意外边距的特殊事项 ①上下外边距对行内元素<span>、<i>、<b>、<s>、<u>等不起作用，左右外边距没问题。

②上下外边距作用在行内块元素时，会影响到该行的所有元素，也就是整行的元素都会跟着往下或往上移。

③外边距合并

④外边距溢出【导学知识】二、盒子的外边距与内边距2.内边距

内边距用于控制内容区域与边框之间的距离，以便精确控制内容在盒模型中的位置，加大内边距会扩张元素所占区域，其设置方法与外边距相似，内边距越大，边框和内容之间距离就越大。

注意内边距不能使用负值，并且内边距的效果只作用于元素本身，并不会给其他元素的内边距带来影响。【导学知识】二、盒子的外边距与内边距3.CSS重写

在使用内外边距实现图文混排效果时，会发现浏览器边界与页面内容之间存在一定距离，但并未对<body>或<p>元素设置过内边距或外边距，这是因为<body>、<h1>～<h6>、<p>等元素默认就存在内、外边距样式，可以使用代码进行初始化CSS重写。

*{padding:0;/*清除内边距*/margin:0;/*清除外边距*/}【导学知识】三、盒子的宽与高

盒子在页面上实际占据的空间由“外边距+边框+内边距+内容”共同决定，计算页面元素实际占据空间的总宽度时：元素总宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距计算页面元素实际占据空间的总高度时：元素总高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距【导学知识】★

标准盒模型

★

怪异盒模型【任务小结】

通过构造各种关系的盒子进行观察对比，我们可以更加了解盒子的外边距、内边距、宽度、高度，也能理解外边距的各种特殊注意事项以及标准盒模型与怪异盒模型对盒子的不同处理。

“因地制宜，时移

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论