zoukankan      html  css  js  c++  java
  • div定位relative和absolute和float测试3

    position等于absolute的时候,不一定是相对于浏览器定位,当div存在包含关系时,父div设置成relative,其中包含的div设置成absolute就是相对于该父div的了。
    该文测试了下,divall(背景图)这个包裹了六个小div(背景色),并把小div在divall里依次排列,间隔是10px。
    定位相关的div写在了行内样式,其他的与测试不太相关的写在了前面的style里。

    父div设置了上边距和左边距,距离浏览器留了30px边距。
    设置里面的第一排小div绝对定位,top都是10px,距离父div上边是10px。
    第二排小div绝对定位,top都是70px。(第一排小div本身高50px,加上第一排的小div的上边距10px,加上第二排和第一排之间需要空出10px,所以是70px。)

    float:设置了六个小div都是左浮动,这个浮动也是相对于父div的。
    第一列的都是10px.第二列都是120px,第三列都是230px。

    具体可查看本文的图示。

    测试代码 :

     <style>
      body{margin:0px;}
      #divall{margin-top:30px;margin-left:30px;width:340px;height:130px;background-image:url(./images2/bg2.png);}
      #red_div{width:100px;height:50px;background:rgba(255,0,0,0.5);border-radius:20px;text-align:center;}
      #blue_div{width:100px;height:50px;background:blue;text-align:center;}
      #red_div a{text-decoration:none;color:white;line-height:50px;font-weight:bold;}
      </style>
     </head>
     <body>
     <div id="divall" style="position:relative;">
          <div id="red_div" style="position:absolute;left:10px;top:10px;">
          <a target="_blank" href="./indextesthtmagain.html">测试html</a>
         </div>
          <div id="blue_div" style="position:absolute;float:left;left:120px;top:10px;">
          blue
          </div>
          <div id="blue_div" style="position:absolute;float:left;left:230px;top:10px;">
          blue
          </div>
    
          <div id="red_div" style="position:absolute;left:10px;top:70px;">
          <a target="_blank" href="./indextesthtm.html">纸张html</a>
         </div>
          <div id="blue_div" style="position:absolute;float:left;left:120px;top:70px;">
          blue
          </div>
          <div id="blue_div" style="position:absolute;float:left;left:230px;top:70px;">
          blue
          </div>
    </div>

    图示:

  • 相关阅读:
    C语言位运算详解(转载)
    C/C++知识点
    android获取string.xml的值(转)
    C++ Primer与c++编程思想的比较(转)
    C++ 学习的网站
    C++学习网站总结(转)
    C++学习网站(转)
    C++编程学习50个经典网站 强力推荐 (转)
    JAVA反射机制(转)
    AxureRP7.0教学大纲Tutorial directory
  • 原文地址:https://www.cnblogs.com/huaxie/p/11934991.html
Copyright © 2011-2022 走看看