您的位置：首页 > Web前端 > CSS

【把旧账号的文章搬过来】css自我总结之第一弹:绕不开的float,relative与absolutee

2018-04-01 15:26 411 查看

Css自我总结之第一弹：1. float，relative，absolute一开始，每一个元素就像是水里的石头一样安分地待着，后来来了float,relative,absoｌｕte三个大力士誓要搬动石头。Float：名如其人，会施魔法让石头变成浮萍，大家亲亲蜜蜜地挤在了一起。然而需要注意的是：1，浮萍也是占地方的！它还是会占据文档流！ 2. 不等高时排版会出现参差不齐的状态。3.清除浮动，它浮起来了，后面的石头就顶上来了。Position:relative:这位会“镜像魔法”，理论上元素还待在原来的地方，但“看起来”他在别的地方了。这位仁兄有几个特点：1. 相对自身定位，即：top:0,left:0对他来说就是待在原地。2. 不会影响其他元素布局。由于它相对自身定位，所以不会产生float和absoｌｕte那样有元素顶上来的情况。例：<html>
<body>
<div style="background-color: red;width:100px;height:100px;"></div>
<div style="background-color: blue;width:100px;height:100px;position:relative;top:-50px"></div>
<div style="background-color: yellow;width:100px;height:
4000
100px;"></div>
</body>
</html>
可以将第二个div的position改为relative试一下
3. 当top/bottom和left/right对立属性同时存在时，relative表现为相互斗争。上下存在时听上的，左右存在时听左的【不要以为上右下左而记成左右存在听右的】4. position:absolute这位神通广大，身负盛名，它能让好好的石头变成一团虚影任你揉捏，指哪定哪毫不含糊。这位大家太熟悉了，只说一个让我吃了一个亏的特性。Absoulte根据不是“position:static”【默认值】的父元素定位，父元素不是就再往上找一直找到尽头body为止。然而找到body后，它并不是向人们说的那样根据body定位，而是根据浏览器定位！！！！！！例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
width:100%;
height:2000px;
}
.ab{
background-color:red;
width:100px;
height:100px;
position:absolute;
bottom:100px;
right:50px;
}
</style>
</head>
<body>

<div class="ab" ></div>
</body>
</html>

显示效果为：

假如它根据body定位，body有2000px，它就不在这一页了，而且当浏览器窗口发生变化时ｄｉｖ的位置也随之变化了，如图：

更加说明absolute不是根据body来定位了。【火狐，谷歌，ＩＥ１１都是这样的，ＩＥ旧版没有试过】二，relative与absolute别看absolute在外面神通广大，不可一世，但其实在家里，还是得乖乖听着自己哥哥——relative的话【兄控的世界啊】１.限制上下左右定位【最常用最基础应用】父元素设置成relative后，子元素就只能根据它来定位而不会满浏览器乱跑。２.限制Ｚ－ｉｎｄｅｘ层级　３.overflow原本absolute是不听overflow的话的，该溢出的照旧溢出，但加上relative后absolute就得乖乖照overflow说的去做了。三，ｒｅｌａｔｉｖｅ与ｆｉｘｅｄ拿它没办法，ｆｉｘｅｄ这个不孝子，管不动。由它去吧，去跟浏览器混吧，就当我从来没这个弟弟——ｂｙ心痛的ｒｅｌａｔｉｖｅ大哥

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航