CSS框模型、显示和隐藏_第1页
CSS框模型、显示和隐藏_第2页
CSS框模型、显示和隐藏_第3页
CSS框模型、显示和隐藏_第4页
CSS框模型、显示和隐藏_第5页
已阅读5页，还剩22页未读， 继续免费阅读

下载本文档

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

文档简介

1、 第四章 css框模型（盒模型）、 显示和隐藏 本节课的内容: n 块元素和行内元素 块元素和行内元素的转换 html常见的块元素和行内元素 n框模型 网页中的框 框的特点 框的样式属性 n显示和隐藏 本节课目标： n理解css框模型 n掌握框模型的样式属性 重点难点： ncss框模型 n框模型的样式属性 块元素和行内元素 n网页中的元素分为块元素和行内元素。 块元素成块状显示，独占行；行内元素 不占满行，多个行内元素可在一行上显 示 n块元素内能容纳其他的块元素和行内元 素，行内元素内只能容纳行内元素 块元素和行内元素的转换 n使用display（显示）属性，当设置标签 的display属性

2、值为block时，标签就呈块 元素显示，当设置标签的display属性值 为inline时，标签就呈行内元素显示 html常见的块元素和行内元素 标签 n标签是容器标签，可以 放置文本、图象等 n标签内的元素在一行内显示 标签 n标签是容器标签。可以把其他多个 标签或内容放入这个容器中，作为一个 整体 框模型（盒模型） n内容内容（content）：包含文字、图片、 flash动画、应用程序、视频等 n内边距内边距（padding）：内容和边框之间的 距离 n边框边框（border）：盒的边界 n外边距外边距（margin）：2个盒之间的空白， 透明 框的特点 n外边距和内边距只有宽度属性 n

3、边框有大小和颜色之分，可以对每一条 边框设置不同的样式 nwidth和height定义的是内容的宽度和高 度，而不是整个框的宽度和高度 内容的属性 nwidth nheight padding属性 npadding属性设置对象四边的内边距 n如果提供全部四个参数值，将按上右下 左的顺序作用于四边。（顺时针） n如果只提供一个，将用于全部的四条边。 n如果提供两个，第一个用于上下，第二个用 于左右。 n如果提供三个，第一个用于上，第二个用于左 右，第三个用于下 n不允许负值 margin属性 n设置对象四边的外边距 n检索或设置对象四边的外延边距。 n如果提供全部四个参数值，将按上右下 左的顺序

4、作用于四边。 n如果只提供一个，将用于全部的四边。 n如果提供两个，第一个用于上下，第二个用 于左右。 n如果提供三个，第一个用于上，第二个用于左 右，第三个用于下。 nauto : 值被设置为相对边的值。上下为0； 左右为父对象宽度的50% n设置盒模型的margin为auto，可使盒模 型居中。 n外边距可以是负值 border属性 实训1 使用框模型的样式属性 完成如下页面: 目的: n使用margin,padding,border属性 分析: 训练要点: nmargin,padding只有宽度,透明 n要求:完成时间20分钟 隐藏和显示 总结 n这次课学习了框模型以及框模型的属性 n学习了

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

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

最新文档

评论

0/150

提交评论