CSS笔记——absolute

来源：互联网发布：泰国明星互动软件编辑：程序博客网时间：2024/05/22 06:05

absolute && float

前面的浮动讲到过，浮动具有包裹性和破坏性；而absolute也有这两大特性。

包裹性：

我们给容器设置了absolute属性以后，它会把内容仅仅地包裹起来。

破坏性：

内容设置了absolute属性以后，父元素会发生高度塌陷。

absolute使用误区

absolute可以独立使用，不一定非得和relative一起使用。

absolute特性

1）与float两不并存

一个元素不能同时设置float和absolute属性，否则的话float会失效。这个元素依然会出现在原本应该出现的地方。

2）位置跟随

简单来说，就是原来在哪儿显示，使用了absulote之后，依然是在哪儿显示。块状元素换行显示，行内元素一行显示。

3）脱离标准文档流

当元素使用了absolute属性之后，它会脱离正常的文档流显示。后面的元素会进入到原来属于该元素的位置，产生重叠！！！

4）无“实体”

元素的宽度、高度通通失效，变成无实体，不占据任何空间。

特别注意：

IE7下，使用了absolute属性的元素会被添加上inline-block显示，如果想要换行显示，需要用div包裹元素。
位置跟随的时候，需要提别注意，每个标签直接如果是直接回车换行写的，会有空白字符。解决方案是，在标签之间使用注释连接，如下所示

        <img><!--     --><p>

absolute布局案例

1）文字上的小图

这里写图片描述

实现方式:

给图片加上absolute之后，它会跟随到文字后面，再设置margin值。

<style>    .icon-hot {        position: absolute;        width: 28px;        height: 11px;        margin: -6px 0 0 2px;        background: url(./1.gif)    }    </style>    <body>        <a>     你好啊<i class='icon-hot'></i></a>    </body>

2） “不一样”的居中

这里写图片描述

这里的icon实现了水平居中，但是它的实现有些神奇。一起来看看代码吧。

<style>    .cen {        text-align:center;        margin-top: 100px;    }    .course-loading {    position: absolute;    margin-left: -26px;    }    </style>    <body>        <div class="cen">            &nbsp;            <img src="http://static.mukewang.com/img/5453077400015bba00010001.gif" class="course-loading">        </div>    </body>