css定位-css新增选择器（内减，属性，伪类，2d变换，过渡）

赵同学_

已于 2022-06-08 01:56:15 修改

阅读量457

点赞数

文章标签： css html 前端 css3

于 2022-06-08 00:04:14 首次发布

本文链接：https://blog.csdn.net/qq_52711676/article/details/125139407

版权

一、定位（重点）

定位的使用：

1.4种定位方式：静态、相对、绝对、固定

2.4种边偏移属性：left、right、top、bottom

注意：偏移值准确的理解是“距离什么位置有多少像素” 。如 top:100px; 距离顶部为100像素（向下走）

1.静态定位

所有标准流都是静态定位

语法：position:static

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            width:100px;
            height:100px;
            border:1px solid #000;
            position:static;/* 设置静态定位 */
            top:20px;/* 设置边偏移 */
        }
        .box1{
            width:200px;
            height:200px;
            background:#f00;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>

总结：

1.工作中用的比较少，因为加了静态定位，元素也是标准流

2.偏移值对静态定位无效

使用场景：通常是将已经设置过定位的元素还原成标准流

我们以后所说的定位不包含静态定位

2.相对定位

相对于自身在标准流的位置进行定位移动

语法：position：relative

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            width:100px;
            height:100px;
            border:1px solid #000;
            position:relative;/* 设置相对定位 */
            top:20px;/* 设置边偏移 */
            left:30px;
        }
        .box1{
            width:200px;
            height:200px;
            background:#f00;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>

总结：

1.相对定位参考自身在标准流中的位置进行偏移，移动的出发点是自身标准流的位置

2.不会对标准流的元素造成影响，没有脱离文档流，移动之后，自身在标准流中还占有空间，真正占得位置还是标准流的位置（灵魂不在肉体永驻）

3.可以盖在标准流的上方

使用场景：微调元素和配合绝对定位来实现效果

3.绝对定位

从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html停止

语法：position:absolute

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            width:100px;
            height:100px;
            border:1px solid #000;
            position:absolute;/* 设置绝对定位 */
            top:20px;/* 设置边偏移 */
            left:30px;
        }
        .box1{
            width:200px;
            height:200px;
            background:#f00;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>

总结：

1.偏移位置参考设置过定位（相对/绝对/固定）的直系父元素或直系祖宗元素，没找到就一直往上级找，直到html

2.会脱离标准流，不再继承父级的宽度（不论是块元素还是行元素，盒子的大小取决于其中内容），可以定义宽高，不占据标准流的空间

3.margin:auto对于设置过绝对定位的元素不起作用

4.设置方向偏移的时候，横向或者纵向只设置一个即可，设置多个没有意义

使用场景：配合相对定位使用（一般都会配合相对定位，但不是绝对的都是相对定位）

父相子绝

案例：

1.让盒子水平垂直居中（水平居中，垂直也居中）

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            width:100px;
            height:100px;
            border:1px solid #000;
            position:absolute;/* 设置绝对定位 */
            top:50%;/* 设置上边偏移 */
            margin-left:-50px;/* 往左边移动自身宽度的一般 */

最低0.47元/天解锁文章

赵同学_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css定位-css新增选择器（内减，属性，伪类，2d变换，过渡）

定位的使用：1.4种定位方式：静态、相对、绝对、固定2.4种边偏移属性：left、right、top、bottom注意：偏移值准确的理解是“距离什么位置有多少像素” 。如 top:100px; 距离顶部为100像素（向下走）所有标准流都是静态定位语法：2.相对定位相对于自身在标准流的位置进行定位移动语法：使用场景：微调元素和配合绝对定位来实现效果从父元素一直往上找设置过定位的直系父元素，作为自己的偏移参照物，找不到就继续往上找，直到html停止语法：使用场景：配合相对定位使用（
复制链接

扫一扫