positive属性的使用方法

positive属性的使用方法

ID:15404697

大小:39.00 KB

页数:3页

时间:2018-08-03

positive属性的使用方法_第1页
positive属性的使用方法_第2页
positive属性的使用方法_第3页
资源描述:

《positive属性的使用方法》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、Positive属性的使用方法:Body是最顶级的父容器。子容器是父容器的内容。对于absolute与relative,子容器的左边框与父容器的距离=left的值+margin-left的值。Absolute:位置对于父容器而言,他的位置(left、top)可以通过拖动图形宽度、高度,移动图形调节;与relative相比,在视图窗口中他的位置、大小是可以改变的。Relative:位置对于父容器而言,他的位置(left、top)、大小有一开始设计的图形控制,不可以在视图窗口中调节。Fix与Static:它的top,left值无效;如要调节子容器的位置:可

2、通过改变父容器(除了body)的margin的值。在决定子容器的位置关系时,可改变父容器的Padding属性的值。子容器的margin的值无效。Static:默认值为static属性,left和top没有起作用,一直跑到最上面去了。如果相邻的div也是static属性,则依次纵向排列(left、top不起作用)。此时看到的每个层的位置就是各个层在static时实际的位置。Fixed:直接以浏览器窗口开始计算left和top的值,唯一的父对象是浏览器红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和

3、top的值,只是因为有一个是absolute所以产生了重叠效果,没有被另外一个挤走。同时我也明白了另外一个道理,因为默认的类型都是static,所以当我们的页面长度等定位的不合理时一个会把一个挤走。Absolute优先级:(是否设定了TRBL)(前提是父对象的position不是relative,否则则以父对象为准)没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。Relative优先级:(是否有父对象)父级的原始点

4、为原始点,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位;无父级则以BODY的原始点为原始点,配合TRBL进行定位,。2.position的四种取值static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定,及时在程序中改变top、left的值也无效fixed:fixed才是真正的绝对定位,其位置永远相对浏览器位置来计算。而且就算用户滚动页面,元素位置也能相对浏览器保持不变,也就是说永远可以看到,这个做一些彩单的时候可以用。可惜的是ie还不支持rela

5、tive:relative就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定relative并指定top是10象素时,元素实际top就是60象素了。absolute:absolute绝对定位,直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢,容器就是离元素最近的一个定位好的“祖先”,定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器,那就使用浏览器初始的,也就是body或者html

6、元素。标准是说只需要指定left和right,width可以自动根据容器宽度计算出来,可惜ie不支持。

1.Abbolute排版中:top,left,right,bottom是子元素和父元素的关系,例如nav和main就是这种关系。margin是两个相连的元素(div)之间的间隙关系。margin规定了自己和周围元素之间的距离。padding是元素内部内容和自己的边框的间隙关系。2.Relative排版中:top,left,righ

7、t,bottom是元素之间关系,例如nav和content就是这种关系。margin是子元素和父元素的关系,例如nav和main就是这种关系。padding是元素内部内容和自己的边框的间隙关系。比如1:Class="1"绝对位置Class="2"相对位置

当1固定了位置。1的样式float:left;width:100px;height:800px;2的样式为float:left;position:relative;margin-left:20px;width:50px;2的

8、位置在1的右边,距离120px。假如有两个divJava代码1

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。