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属性值为block时，标签就呈块元素显示

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

3、ht定义的是内容的宽度和高度，而不是整个框的宽度和高度内容的属性 nwidthnheightpadding属性npadding属性设置对象四边的内边距n如果提供全部四个参数值，将按上右下左的顺序作用于四边。（顺时针）n如果只提供一个，将用于全部的四条边。n如果提供两个，第一个用于上下，第二个用于左右。n如果提供三个，第一个用于上，第二个用于左右，第三个用于下n不允许负值margin属性n设置对象四边的外边距n检索或设置对象四边的外延边距。n如果提供全部四个参数值，将按上右下左的顺序作用于四边。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

提交评论