2021/8/5 css定位

最新推荐文章于 2022-07-13 15:37:29 发布

困顿小狗

最新推荐文章于 2022-07-13 15:37:29 发布

阅读量66

点赞数

分类专栏：前端学习文章标签： html 定位 css

本文链接：https://blog.csdn.net/neversleepy/article/details/119418675

版权

前端学习专栏收录该内容

33 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

定位
元素的层级

定位

绝对定位和浮动都脱离了标准文档流，但是相对定位并没有脱离。开启了定位才有偏移量，没有开启定位的是没有偏移量的，写了也没有。

在这里插入图片描述

相对定位

相对定位是不脱离文档流的，所以可以看做是魂穿。开启了相对定位之后其实元素的位置并没有改变，只是显示变了。
相对定位的偏移量是新对旧的偏移量，如果要以新的作为视角的话都要反着看。
在这里插入图片描述
但是我在检查的时候div2确实又变了。

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
        .out{
            border: 1px red solid;
        }
        .in1,.in2,.in3{
            width: 200px;
            height: 200px;
        }
        .in2{
            background-color:aqua;
            position: relative;
            bottom: 200px;#原来在现在的下面200px
            left: 100px;#原来在现在的左边100px
        }
        .in1{
            background-color: blue;
        }
        .in3{
            background-color: tomato;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="in1">

        </div>
        <div class="in2">

        </div>
        <div class="in3">
           
        </div>
    </div>
</body>

在这里插入图片描述

绝对定位

绝对定位脱离文档流，定位是根据最近开启了定位的父元素（也叫做包含块元素）的原点定位的。要是一直找没找到的话，就找根元素html。以根元素html标签定位的话是忽略body的，没有空隙。

在这里插入图片描述

<style>
.in1{
            background-color: blue;
            position: absolute;#父元素往上没有其他包含块元素了 父元素的绝对定位是以根标签<html>来定位的 所以跟浏览器的框是百分百贴合
            top:300px;
            left:400px;
            width: 400px;
            height: 400px;
        }
        .in2{
            background-color:aqua;
            position: absolute;
            top:0px;
            left:0px;
        }
</style>

        <div class="in1">
            <div class="in2">
            </div>
        </div>

在这里插入图片描述

绝对定位位置计算

水平布局

水平布局公式：（其实就是原先那个多了left，right两个偏移量）
在这里插入图片描述
有auto调auto（left，right默认auto），没auto调right（发生过渡约束了）
调了一下padding，撑开了里面的盒子而已。。没有调元素的位置。。。

在这里插入图片描述
left，right都是auto，然后优先调right（。

水平居中
其实left right写啥都行只要让他们不为自动就ok，写的比父元素的还大都行，margin：auto，浏览器自动调成负值掰回来haha

<sytle>
 .in2{
            background-color:aqua;
            position: absolute;
            left: 0px;
            right: 0px;
            margin: auto;
            width: 100px;
            height: 100px;
        }
</sytle>

在这里插入图片描述

垂直布局

垂直布局公式（绝对定位强制要求满足这个公式）：
top+border-top+margin-top+padding-top+content+padding-bottom+margin-bottom+border-bottom+bottom=包含块高度

垂直居中：

<sytle>
 .in2{
            background-color:aqua;
            position: absolute;
            top: 0px;
            bottom: 0px;
            margin: auto;
            width: 100px;
            height: 100px;
        }
</sytle>

在这里插入图片描述

中心居中：

<sytle>
 .in2{
            background-color:aqua;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: auto;
            width: 100px;
            height: 100px;
        }
</sytle>

在这里插入图片描述