zoukankan      html  css  js  c++  java
  • div定位

    1.float定位带来的问题
    <html>
    <head>
    <title>div浮动引发的问题</title>
    </head>

    <style>
    body{
    margin:0px 1px 2px 3px;
    }

    #father{
    background-color:#FFFF99;
    100%;
    height:100px;
    border:1px dashed green;
    }

    #son1{
    float:left;
    }

    #son2{
    float:left;
    }
    #son3{
    float:left;
    }
    #clear{
    clear:both;
    }

    </style>

    <body>

    <div id="father">
    <div id="son1">aaaaaaaaaaaaaaaaaaaa</div>
    <div id="son2">bbbbbbbbbbbbbbbbbbbb</div>
    <div id="son3">cccccccccccccccccccc</div>
    <div id="clear"></div><!--采用float技术时,不需要浮动的时候一定要清楚浮动,否则后面的也都跟着浮动了-->
    <div id="son4">dddddddddddddddddddd</div> <!--son4没有浮动,但它会受上面浮动的影响,也跟着浮动了-->
    </div>

    </body>
    </html>

    2.相对定位:是相对于原来的位置,相对定位时div并没有脱离文档流,即原来的位置还空着。
    <html>
    <head>
    <title>采用div定位技术对div进行排版(相对定位)</title>
    </head>

    <style>

    #father{
    background-color:#FFFF99;
    100%;
    height:100px;
    border:1px dashed green;
    }

    #son1{
    position:relative;
    left:60%;
    }

    #son2{

    }

    </style>

    <body>
    <div>
    <div id="father">
    <div id="son1">aaaaaaaaaaaaaaaaaaaa</div>
    <div id="son2">bbbbbbbbbbbbbbbbbbbb</div>
    </div>
    </div>
    </body>
    </html>

    3.绝对定位1,如果div的父,父的父,。。。等没有指定position:relative,默认是相对浏览器边框定位,如果有
    其中某个父,父的父,等指定了position:relative,则绝对定位是指相对于该父标签绝对定位。
    绝对定位会脱离文档流,也即是不再占用原来的位置,别的div可以占用该位置。
    绝对定位一般用来做照片签名

    <html>
    <head>
    <title>div定位(绝对定位)</title>
    </head>

    <style>

    #father{
    background-color:#FFFF99;
    100%;
    height:100px;
    border:1px dashed green;
    }

    #son1{
    position:absolute; /*相对于浏览器边框定位*/
    right:0px;
    }

    #son2{

    }

    </style>

    <body>
    <div>
    <div id="father">
    <div id="son1">aaaaaaaaaaaaaaaaaaaa</div>
    <div id="son2">bbbbbbbbbbbbbbbbbbbb</div>
    <div id="son3">cccccccccccccccccccc</div>
    </div>
    </div>
    </body>
    </html>

    绝对定位2
    <html>
    <head>
    <title>div定位(绝对定位)</title>
    </head>

    <style>

    #father{
    background-color:#FFFF99;
    100%;
    height:100px;
    border:1px dashed green;
    position:relative;
    }

    #son1{
    position:absolute; /*相对于father定位*/
    right:0px;
    }

    #son2{

    }

    </style>

    <body>
    <div>
    <div id="father">
    <div id="son1">aaaaaaaaaaaaaaaaaaaa</div>
    <div id="son2">bbbbbbbbbbbbbbbbbbbb</div>
    <div id="son3">cccccccccccccccccccc</div>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    jQuery属性--html([val|fn])、text([val|fn])和val([val|fn|arr])
    JavaScript--常用的输出方式
    jQuery筛选--hasClass(class)和eq(index|-index)
    jQuery筛选--first()和last()
    EasyUI学习-----表格DataGrid获取数据的方式
    EasyUI学习-----创建DataGrid及冻结列的两种方式
    jQuery属性--addClass()和removeClass()
    jQuery工具--jQuery.isNumeric(value)和jQuery.trim(str)
    jQuery工具--$.each()和$.merge()
    jQuery事件--change([[data],fn])、on(events,[selector],[data],fn)和hover([over,]out)
  • 原文地址:https://www.cnblogs.com/lxboy2009/p/3776360.html
Copyright © 2011-2022 走看看