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>

  • 相关阅读:
    Win10安装.NetFamework3.5
    SAN和NAS的区别
    raid10模型比raid01模型的冗余度高
    Linux——查找占用磁盘体积最大的前10个文件
    Nginx——端口负载均衡
    oneinstack——证书更新
    SpringBoot——IDEA使用 Spring Initializer快速创建项目【四】
    Nginx——请求head被过滤
    Linux—— 记录所有登陆用户的历史操作记录
    Nginx——跨域造成的504问题
  • 原文地址:https://www.cnblogs.com/lxboy2009/p/3776360.html
Copyright © 2011-2022 走看看