Lession12--CSS+DIV2.ppt_第1页
Lession12--CSS+DIV2.ppt_第2页
Lession12--CSS+DIV2.ppt_第3页
Lession12--CSS+DIV2.ppt_第4页
Lession12--CSS+DIV2.ppt_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

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

文档简介

1、授课人：兰晶,第十二讲,页面中的定位,层的表现,没有任何样式的层 , #div1float:left; #div2float:left; ,层的浮动,让层左右排列 浮动框的代码写法： float:left; 或为“right”和“none”, , #div1float:right; #div2float:right; ,层的叠加,定位,定义框模型的时候，有一个position属性。基于这个属性的运用，可以将页面内容定位分成静态定位、绝对定位、相对定位、固定定位和浮动这5种方式。,position:static|无定位,position:static是所有元素定位的默认值, 一般不用注明，除非有

2、需要取消继承的别的定位 例： #div-1 position:static; ,position:relative|相对定位,使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。 如果要让div-1层向下移动20px,左移40px: 例： #div-1 position:relative; top:20px; left:40px; 如果用到相对定位，紧随他的层divafter是不会出现在div-1的下方，而是和div-1在同一个高度出现。 可见， position:relative;并不是很好用。,使用position:abs

3、olute;,能够很准确的将元素移动到你想要的位置， 让我将 div-1a 移动到页面的右上角: 示例： #div-1 position:relative; #div-1a position:absolute; top:0; right:0; width:200px; 使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。所以position:absolute;用于将一个元素放到固定的位置很好用，但是如果需要div-1a层相对于附近的层来确定位置就不要实现了。 搜一搜so.bitsCN.com *这里有个Win IE的bug需要提到，就是如果为绝对定位的元素定义

4、一个相对的宽度，那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。,position:absolute|绝对定位, this is div-1a element. this is div-1 element. ,position:relative + position:absolute绝对定位+相对定位,如果给父元素(div-1)定义为position:relative;子元素(div-1a)定义为position:absolute，那么子元素(div-1a)的位置将相对于父元素(div-1)，而不是整个页面。 让div-1a定位于div-1的右上角： 示例： #div-1 position:relative; #div-1a po

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

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

最新文档

评论

0/150

提交评论