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="width:100px;height:100px; background-color:blue;  "></div><div style="width: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="width: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="width: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="width: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 ;  width:100px ; height:100px; background-color:#69F"></div>
<div style="position:float; left:200px ; top:200px ;  width:100px ; height:100px; background-color:#69F"></div>
</div>

float position的测试案例相关推荐

AidLux “人脸测试”案例源码详解
"人脸检测"案例源码详解 testface.py用于进行人脸检测构建APP框架和添加主要控件人脸关键点识别的方法打开人脸测试案例 1.在VScode中进入代码编辑状态. 2. ...
tensflower官方测试案例_大数据性能测试介绍
点击上方蓝色字体,选择"设为星标" 回复"资源"获取更多资源大数据技术与架构点击右侧关注,大数据开发领域最强公众号! 大数据真好玩点击右侧关注,大数据真好玩! ...
Linux动态加载共享库,Linux共享库的动态加载（附测试案例）
共享库的动态加载是指可以在程序运行的过程中去加载所需的共享库.常用于某些系统或者应用程序的自动升级. 在C语言的源程序动态加载共享库,需要调用一组特殊的函数,它们被声明于一个专门的头文件dlfcn.h ...
测试案例6种编写方法_一种编写测试的好方法
测试案例6种编写方法测试. 我最近一直在考虑测试. 作为我对各种项目所做的代码审查的一部分,我已经看到了数千行未经测试的代码. 这不仅是测试覆盖率统计数据指出这一点的情况,更是该项目中根本没有任何测 ...
junit白盒测试案例_JUnit通过失败测试案例
junit白盒测试案例为什么要建立一种预期测试失败的机制? 有一段时间,人们会希望并期望JUnit @Test案例失败. 尽管这种情况很少见,但确实发生了. 我需要检测JUnit测试何时失败,然后 ...
JUnit通过失败测试案例
为什么要建立一种预期测试失败的机制? 有一段时间,人们会希望并期望JUnit @Test案例失败. 尽管这种情况很少见,但确实发生了. 我需要检测JUnit测试何时失败,然后(如果期望的话)通过而不是 ...
编写优美的GTest测试案例
使用gtest也有很长一段时间了,这期间也积累了一些经验,所以分享一下.GTest为我们提供了便捷的测试框架,让我们只需要关注案例本身.如何在GTest框架下写出优美的测试案例,我觉得必须要做到: 案 ...
tensflower官方测试案例_Storm自带测试案例的运行
之前Storm安装之后,也知道了Storm的一些相关概念,那么怎么样才可以运行一个例子对Storm流式计算有一个感性的认识呢,那么下面来运行一个Storm安装目录自带的测试案例,我们的Storm安装在 ...
软件工程--构建之法--功能测试设计10个或者更多的测试案例完成对钉书钉的功能测试...
设计10个或者更多的测试案例完成对钉书钉的功能测试 (1)使用不同的纸质材料厚度,使用相同规格钉书钉,查看钉书器是否正常工作 (2)使用不同规格的钉书钉,使用相同厚度的纸质材料,查看钉书器是否正常工作 ...

float position的测试案例

float position的测试案例相关推荐

最新文章

热门文章