zoukankan      html  css  js  c++  java
  • float position的測试案例

    依据<a target=_blank href="http://blog.csdn.net/goodshot/article/details/44348525">http://blog.csdn.net/goodshot/article/details/44348525</a>我的測试
     
    <p>一、</p>
    <p>1.Container div is overflow is not seted ,float element is not be envoloped <br><br>
      2.And the postion is seted "static" which means it is not affluncented by the css top and left ect.
      <br><br>
      3.According to this example,we can see the "float" css attribute is only set the element in the 0 z-index layer. 
      
    </p>
    <div  style="background-color:#CCC;;"  >
    
    <div style="100px;height:100px; background-color:blue;  "></div>
    
     <div style="100px;height:100px; background-color:olive; float:left; margin-left:30px"></div>
    </div>
    


     

    二、<br>
    <br>
    1.Container div is overflow seted ,float element is be envoloped
    <div  style="background-color:#CCC;; overflow:auto"  >
     <div style="100px;height:100px; background-color:olive; float:left; margin-left:30px; margin-top:20px">2.this is means masked.in the 0 z-index layer.</div>
     
    <div style="100px;height:100px; background-color:blue;  ">2. The static position is the default postion option,then this blue div is not affected by the "top" "left" ect. attributes ,the we can see it is located in the initial position. </div>
    
    </div>

    以下的截图是在FF中的

    三、use "box-set"( always named "clearfix" in chinese "万能闭合")
    <br>
    <br>
    
    <div style="background-color:#696;overflow:auto; " class="box-set" >
     <div style="100px;height:100px;background-color:#0FF; float:left; margin-top:100px; margin-left:1000px;">
    </div>
    <br>
    <br>


    四、parent div used css class "box-set" or "overflow:auto" can't affect the div in it. position method float doesn't  work in this way .Only margin-left or margin-top can locate the div in float way. 
    <div style="background-color:#696;overflow:auto; " class="box-set">
    <div style="position:absolute; left:200px ; top:120px ;  100px ; height:100px; background-color:#69F"></div>
    <div style="position:float; left:200px ; top:200px ;  100px ; height:100px; background-color:#69F"></div>
    </div>


  • 相关阅读:
    Web.xml详解
    Spring 及 SpringMVC的web.xml配置详解
    <context-param>与<init-param>的区别与作用
    关系型数据库(RDBMS)与 MongoDB 的对应关系
    Dubbo通过注解实现RPC调用
    org.springframework.stereotype.Service和com.alibaba.dubbo.config.annotation.Service两种service的区别
    Linux下部署 jar包
    最新Dubbo-admin+Zookeeper搭建
    spring security3.1配置比较纠结的2个问题
    SpringSecurity——基于Spring、SpringMVC和MyBatis自定义SpringSecurity权限认证规则
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/5257977.html
Copyright © 2011-2022 走看看