position与float属性的使用
1、使用float时,可以说是用于布局,取值主要有left、right、none。就是将该块的元素浮动起来,在浏览器默认的情况下,该元素的位置是为空的,
即脱离了文档流而存在,如果有其他元素,那么这些元素会将该元素在浏览器中本身的位置所占据,进而将该空白部分填充。
如果元素浮动了,那么它会对其后面的元素的布局产生影响,所以在设置浮动后,需要对该块进行浮动的清除,一般采用的方法就是在该浮动元素
后面添加一个空的div来清除浮动:如以下代码:
Html代码:
<div>
<img src="../img/cbtn1.jpg" class="left">
<img src="../img/cbtn2.jpg" class="right">
<div class="clear"></div>
</div>
<div class="con">
<img src="../img/cbtn3.jpg" class="bottom">
</div>
Css代码:
.left{
float: left;
}
.right{
float:right;
}
.clear{
clear: both;
height:0px;
overflow: hidden;
}
此外,尽管元素或块进行浮动了,它的大小时根据内容的大小来决定的,如果需要重新定义区域的高度,那么可以在css里设置height属性来控制浮动层的高度。
使用position属性:
position定位布局,该属性常用的值有relative(相对),absolute(绝对);z-index;
1:设置了position:relative而不设置left,top等属性的时候,层显示的位置和不设置position属性或者position值取static时一样。
2:当一个层设置了position:relative,而且使得层位置产生相对偏移(即设置了top、left、bottom、right等属性的值)时,并不影响文本流中接下来的其他层的位置。在浏览器中的位置仍然是存占位的。
当我们设置position的值为relative时,层依然存在于文本流中,也就是不管位置是否偏移,文本流中依然为它保留了该有的位置。但当层设置了position:relative并产生偏移(设置了top,left等值)时,
该层将完全从文本流中脱离,进而以该层所在的父容器的坐标原点为参考点进行偏移,可以这理解,该层已经和同级容器中的其它元素脱离了关系,也不会对其它元素产生任何影响。
一般我们在使用定位布局的时候,通常情况下是在父级标签上设position:relative,在需要定位的层上设position:absolute;top:20px;left:10px;,这样控制起来相对比较好控制...,
但此时,需要定位的层就已经脱离了文档流而存在。
position与float属性的使用的更多相关文章
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- CSS布局 ——从display,position, float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
- 装载:对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- CSS布局 ——从display,position, float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- CSS position overflow float 属性 详解
position overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...
- 【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度
postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解. 引用下曹刘阳写的<编写高质量代码-web前端开发修炼之道>一书中看到的一句话:position:abs ...
- html5的float属性超详解(display,position, float)(文本流)
html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...
- 关于css float 属性以及position:absolute 的区别。
1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...
- 关于浮动float属性和position:absolute属性的区别
最近返回头看了很多书籍,一直在纠结float属性和absolute绝对定位的区别和使用的情况,给大家分享一下自己的心得和体会吧. 1,float属性 float属性意义是让元素拜托独占一行的霸道总裁, ...
随机推荐
- [BZOJ1833][ZJOI2010]Count数字计数(DP)
数位DP学傻了,怎么写最后都写不下去了. 这题严格上来说应该不属于数位DP?只是普通DP加上一些统计上的判断吧. 首先复杂度只与数的位数$\omega$有关,所以怎么挥霍都不会超. f[i][j][k ...
- 【分块】【树状数组】bzoj3744 Gty的妹子序列
离散化,分块. 预处理出:ans[i][j] 第i块到第j块的逆序对数. f[i][j] 第1~i块中大于j的数的个数. g[i][j] 第1~j块中小于j的数的个数. 每次询问时对于整块部分可以O( ...
- 使用Python的turtle模块画出最简单的五角星
代码如下: import turtle def main(): t = turtle.Turtle() t.hideturtle() lengthOfSize = 200 drawFivePointS ...
- web 中加载配置文件
1.web.xml中配置 <!-- 加载配置文件 --> <listener> <description>ServletContextListen ...
- 使用DMV调优性能 --Burgess_Liu
http://blog.csdn.net/burgess_liu/article/details/52813727
- getopt使用
参考: http://www.gnu.org/software/libc/manual/html_node/Example-of-Getopt.html http://en.wikipedia.org ...
- 使用Rabbitmq.client反序列化包含Mongo.Bson.ObjectId属性实体类时抛异常
原因分析: 队列中存储的objectId属性是字符串,反序列化字符串转换成objectid类型时报错 解决方法: 1.定义ObjectIdConverter属性类,反序列 ...
- Swift,结构体与类
1.结构体(小的类就是用struct来写) struct arrow{ var x=0,y=0 } 2.类(常用) class a{ var a=10 var b=20 } var b=a() //实 ...
- Spring-data-jpa 之Specification in的用法
1.一个简单的 Predicate 的示例 构建简单的Predicate示例: Predicate p1=cb.like(root.get(“name”).as(String.class), “%”+ ...
- PHP正则表达式之快速学习法
1.入门简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.我们可以在几乎所有的基于UNIX系统的工具中找到正则表达式的身影,例如,vi编辑器,Perl或PHP脚本语言,以及awk或 ...