zoukankan      html  css  js  c++  java
  • CSS浮动、绝对、相对定位

    浮动

    float:属性{

        float:none;    默认值,对象,不漂浮

        float:left;  文本流向对象的右边

        float:right;

    };

    清除浮动

    clear:属性{

        clear:none;  允许对象两遍都可以浮动

        clear:left;   不允许左边有浮动

        clear:right;  不允许右边有浮动

        clear:both;  两遍都不允许有浮动

    };

    定位

    position:属性{

        position:static;     静态定位

        position:fixed;      固定定位

        position:absolute;   绝对定位 

        position:relative;  相对定位

    };

    绝对定位 (absulote):将对象从文档流中拖出使用left,rigt,top,bottom属性,相对于最接近得一个具有定位设置的父对象,进行绝对定位,如果不存在这样的父对象,则依据body对象。绝对定位对象可层叠,层叠顺序可通过z-index 属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。

    相对定位 ( relative ) :对象不可层叠,但是,left,right,top,bottom,这些属性在正常文档流中偏移位置。同样可以用z-index分层设计。

    定位的形象解释

    (1) 绝对定位(absolute)

    如果使用决定定位,绝对定位对象会让出自己原先占用位置,它是贡献的。如果之前没有对父元素定位,那么子元素位置不会受父元素位置影响,父元素怎么移动,子元素还是在原来的位置,至于子元素要在哪个位置,则以html(body左上角)上角为准,用left,right,top,bottom值来定位,但是如果父元素也给出了定位设置(通常是相对定位),此时子元素的位置就没有那么自由了,尽管此时子元素改变位置了也不会影响父元素(文本流),但它还是要遵循父元素的话,父元素会告诉它"你可以活动,但应该在我的范围内走动,比方说我要你在我左上方1米处,你就要跟死这一点,我走你也要跟着走",课件绝对定位的对象参考目标是它的父极。专业惩称之为包含块。

    (2)相对定位(relative)

    相对定位一个最大的特点是:自己通过定位离开了还占用着原来的位置,不会让给他周围的文本流之类的对象,相对定位也比较独立,做什么事他自己说了算,要定位的时候,它是以自己本身所在位置偏移的,文本流相对定位对象还存在影响,因为对象并没有真正脱离文本流,就像两个人在同一层楼水平移动的过程中会有朋友的机会。

    总结两种定位的特征

    绝对定位就像是把不同对象安排到了移动高楼的不同楼层,它们互不影响,但是它们怎么移动与你楼的地基和面积(父极)有关,相对定位指对象还是在首层楼与文本流一起存放,它们之间肯定存在影响。

    再用相对定位和绝对定位的时候,有一种情况是它们的定位值用到了负值则对象可沿相反方向移动,刚才说到的把对象安排在一栋楼的不同层,如果某个对象一开始就是背靠着最外边墙的,此时再用一个负值定位它,他就会神奇般的跑出墙外去了,当然现实中可没有这种惊险而又神奇的事发生。

    对于普通的页面布局,不到万不得已不要使用absolute进行定位。

    想重构高质量的页面,少用绝对定位布局

  • 相关阅读:
    文件的复制
    反射基础知识
    蓝牙连接 返回的命令
    WebRoot 与 webContent的区别
    时间判断
    java ecplise配置
    异常org.xml.sax.SAXParseException; lineNumber: 5; columnNumber: 11; 注释中不允许出现字符串 "--"。的原因
    F、CSL 的神奇序列 【规律】 (“新智认知”杯上海高校程序设计竞赛暨第十七届上海大学程序设计春季联赛)
    E、CSL 的魔法 【模拟】 (“新智认知”杯上海高校程序设计竞赛暨第十七届上海大学程序设计春季联赛)
    D、CSL 的字符串 【栈+贪心】 (“新智认知”杯上海高校程序设计竞赛暨第十七届上海大学程序设计春季联赛)
  • 原文地址:https://www.cnblogs.com/Mousika/p/6977715.html
Copyright © 2011-2022 走看看