首页 > 代码库 > CSS中的Position属性和Float属性
CSS中的Position属性和Float属性
Css中的position很重要,常用有以下几个值:static,relative,absolute,fixed、Inherit。
Static:静态定位。如果你没有设置position属性,那么缺省就是static。top、left、right、bottom等
属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。
Relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍会分
配给他,他两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。
Absolute:绝对定位。元素将按照包含他的元素的位置进行调整,比如它嵌套在另一个绝对定位元素中
,那么就相对于那个元素定位。
Fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象说点,上下拉动
滚动条时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
Inherit呢, 就是从父元素继承 position 属性的值,
注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会稍有偏差,这
时,我们可以通过类似下面的方法来处理:
<div style="position:relative">
<div style="position:absolute;10px; left:10px;"></div>
<div>
Css中的Float很重要,常用有以下几个值:left、right、none、inherit。
css中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和
表现出来的特性,在使用的时候很容易陷入困境,云里雾里,搞不清状况。我们将从最基本的知识来说起,
谈谈关于浮动的应用,出现问题和解决方法。
基础知识
float,顾名思义就是浮动,设置了float属性的元素会根据属性值向左或向右浮动,我们称设
置了float属性的元素为浮动元素。
浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
清除浮动
清除浮动是一个经常提到的东西,首先我们要理解使用浮动会带来什么问题,以及为什么要清除浮动。
我们知道,一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动之
后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height
就会被忽略,这就是所谓的高度塌陷。要解决这样的问题,我们就是要使用清除浮动。
- 优点:易学易用,容易掌握。
- 缺点:不符合结构和表现的分离,增加很多无用标签,不便后期维护,故不建议 使用。
CSS中的Position属性和Float属性