企业门户网站的设计与实现盒子的浮动与定位PPT课件_第1页
企业门户网站的设计与实现盒子的浮动与定位PPT课件_第2页
企业门户网站的设计与实现盒子的浮动与定位PPT课件_第3页
企业门户网站的设计与实现盒子的浮动与定位PPT课件_第4页
企业门户网站的设计与实现盒子的浮动与定位PPT课件_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

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

文档简介

1 企业门户网站的设计与实现 2011 07 盒子的浮动与定位 2 盒子的浮动与定位 盒子的浮动准备代码 3 盒子的浮动与定位 盒子的浮动设置第1个div浮动设置第2个div浮动设置第3个div浮动设置改变浮动方向设置再次改变浮动方向全部向左浮动使用clear属性清除浮动影响扩展盒子的高度 4 盒子的浮动与定位 盒子的浮动宽度不会自动伸展而是以内容为准脱离标准流而独立存在它会对标准流文字产生影响 而是标准流文字环绕他进行排列容器中的子DIV都是浮动方式的 他的容器DIV高度不会自动伸展 如果需要自动伸展需要设置一个标准流下的DIV并且可以清楚其他的浮动框对他的影响 来实现容器DIV的自动扩展 5 盒子的浮动与定位 盒子的定位广义的 定位 要将某个元素放到某个位置的时候 这个动作可以称为定位操作 可以说使用任何CSS规则来实现 这就是泛指的一个网页排版中的定位操作 使用传统的表格排版时 同样存在定位的问题 狭义的 定位 在CSS有一个非常重要的Position 这个单词翻译为中文也是定位的意思 然而要使用CSS进行定位操作并不仅仅通过这个属性来实现 因此不能二者混淆 6 盒子的浮动与定位 盒子的定位static 这是默认的属性值 也就是该盒子按照标准流 包括浮动方式 进行布局 relative 称为相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础 然后使用盒子相对于它在原本的标准位置便宜指定的距离 相对定位的盒子仍在标准流中 它后面的盒子仍以标准流方式对待它 absolute 绝对定位 盒子的位置以它的包含框为基础进行偏移 绝对定位的盒子从标准流中脱离 这意味着它们对其后的兄弟盒子的定位没有影响 其他的盒子就好像这个盒子不存在一样 fixed 称为固定定位 它和绝对定位类似 只是以浏览器窗口为基准进行定位 也就是当拖动浏览器窗口的滚动条时 依然保持对象位置不变 7 盒子的浮动与定位 盒子的定位static 这是默认的属性值 也就是按照该盒子的标准流 包括浮动方式 进行布局 8 盒子的浮动与定位 盒子的定位Relative 这个称为相对定位 使用相对定位的盒子的位置根据常以标准流的排版方式为基础 然后盒子相对于它在原本标准的位置偏移指定的距离 相对定位的盒子仍在标准流中 它后面的盒子仍以标准流的方式对待它 9 盒子的浮动与定位 盒子的定位Absolute 绝对定位 盒子的位置以它的包含框为基准进行偏移 绝对定位的框从标准流中脱离 这意味他们对其后的兄弟盒子定位没有影响 其他盒子就好像这个盒子不存在一样 10 盒子的浮动与定位 盒子的定位Fixed 称为固定定位 它和绝对定位类似 只是以浏览器窗口为基准进行定位 11
人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论