读大神的博客后对于position:absolute，position:fixed的总结

1、没有定义值得absolute和float一样，是脱离文档流的

eg:

.image{position:absolute;width:50px;height:50px;}
.box2{padding-left:60px;background: red;}

.container3{overflow: hidden;zoom:1;}
.image3{float:left;width:50px;height:50px;}
.box3{background: red;padding-left:60px;}

<h1>绝对定位不设置定位值就和float元素一样</h1>
<div class="container2">
    <img src="" class="image" alt="">
    <div class="box2">好好学习，天天向上，每天进步一点点</div>
</div>

<h1>使用float</h1>
<div class="container3">
    <img src="" class="image3" alt="">
    <div class="box3">好好学习，天天向上，每天进步一点点</div>
</div>

但是这里有个问题，用absolute设置的时候临近层不用padding，文字会直接覆盖图片但是float不会；

文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的

这里说明absolute脱离文档流也脱离了文本流后不占位子其他元素会忽视他，float脱离文档流但是没有脱离文本流，后面元素会忽视他的模块领域但是，其文字会围绕到float元素周围

读大神的博客后对于position:absolute，position:fixed的总结

2、对于未知宽高模块的垂直水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3445</title>
    <style>
        .box{background:red;width:50%;height:50%;position:absolute;top:0;bottom:0;

right:0;left:0;margin:auto;}
    </style>
</head>
<body>
<div class="container">
    <div class="box"></div>
</div>
</body>
</html>

这里margin:auto表示平分width:50%;height:50%;剩下的剩余空间，top:0;bottom:0;right:0;left:0;表示元素的padding content（这里一下忘了大神咋写的了，后面看到再补上）

读大神的博客后对于position:absolute，position:fixed的总结

相关推荐