CSS位移详解

一、CSS位移代码

CSS中位移的主要属性有：position、top、right、left、bottom。

.example {
    position: relative;
    top: 20px;
    right: 10px;
    bottom: 30px;
    left: 40px;
}

上述代码为例，表示将一个元素向上移动20像素，向右移动10像素，向下移动30像素，向左移动40像素。

二、CSS位移和定位

定位和位移是两个相互作用的概念。元素的定位会影响到它的位移，相对定位、绝对定位、固定定位都会影响元素的位移。

相对定位的位移基于元素在文档流中的位置，会对元素的上下左右进行移动，而不会对其它元素的布局产生影响。

绝对定位的位移是相对于离它最近的有定位属性的父级元素进行计算的，如果没有有定位属性的父级元素，则相对于文档进行计算。

固定定位的位移和绝对定位类似，但是它相对于浏览器窗口进行计算，不会随滚动而改变位置。

三、水平垂直居中怎么设置CSS

在网页布局中，垂直水平居中是经常使用的效果。以下介绍几种实现方式：

1. 垂直居中怎么设置CSS

我们可以使用常见的方式，让元素上下居中使用 margin 属性。如果是绝对定位的元素，可以使用 top 和 bottom。

.container {
    position: relative;
}

.container div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

2. CSS垂直居中的8种方法

除了使用上述方法，还有以下8种方式实现垂直居中：

方法一：使用flexbox布局

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

方法二：使用grid布局

.container {
    display: grid;
    place-items: center;
}

方法三：使用 display:table-cell

.container {
    display: table;
}

.container div {
    display: table-cell;
    vertical-align: middle;
}

方法四：使用 line-height

.container {
    height: 200px;
    line-height: 200px;
}

.container div {
    display: inline-block;
    vertical-align: middle;
}

方法五：使用伪元素和绝对定位

.container {
    position: relative;
}

.container::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* 调整与后面的内容对齐 */
}

.container div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

方法六：使用伪元素和绝对定位

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container div {
    align-self: center;
}

方法七：使用伪元素和绝对定位

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container div {
    margin: auto;
}

方法八：使用 calc() 函数计算长度

.container {
    height: 200px;
}

.container div {
    height: calc(100% - 40px);
    margin: 20px 0;
}

四、盒子垂直居中怎么设置CSS

实现盒子（元素）的垂直居中，除了上述方法，我们还可以使用 transform 属性，通过对元素进行旋转来实现盒子的垂直居中。

.container {
    position: relative;
}

.container div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

五、CSS位移属性

CSS中的位移属性包括：

• position：指定元素的定位方式
• top： 从元素顶部到其包含块的顶部距离
• right：从元素右侧到其包含块的右侧距离
• bottom：从元素底部到其包含块的底部距离
• left：从元素左侧到其包含块的左侧距离
• transform：元素变形

六、CSS位移如何做一个线条消失出现

我们可以使用 transition 属性控制状态间的平滑过渡，实现线条消失和出现过程的动画效果。

.line {
    height: 2px;
    background-color: #000;
    position: relative;
    overflow: hidden;
}

.line::before {
    content: "";
    height: 100%;
    width: 200%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: -100%;
    transition: transform .5s ease-out;
}

.line:hover::before {
    transform: translateX(100%);
}

七、CSS位移动态

CSS位移还可以用于实现动态效果，例如控制图片或文字的移动速度和方向，或实现鼠标的跟随效果。

.container {
    position: relative;
}

.container div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: moveDiv 5s linear infinite alternate;
}

@keyframes moveDiv {
    from {
        left: 0;
        top: 0
    }
    to {
        left: 100%;
        top: 100%;
    }
}