左上右下 CSS 速记

CSS的布局和定位经常用到的就是在样式中明确元素的位置。在CSS中，有四种方式来定义一个元素在一个块框中的位置：top、right、bottom 和 left。在这个速记中，我们将会学习如何使用这些属性定位元素的位置。

左上右下的顺序

在CSS中，定义left、top、right、bottom四个属性时，它们的顺序是从左开始顺时针旋转的，等价于上、右、下、左。这种顺序可以用记忆口诀 “左上右下” 来进行记忆。

定位元素

定位元素是指在Web页面中使用CSS的position属性来控制元素的位置。定位位置包括：

• 绝对定位（position: absolute;）
• 固定定位（position: fixed;）
• 相对定位（position: relative;）

这个表格描述了每个值的含义：

| 值 | 描述 | | --- | --- | | left | 元素左侧与其包含元素左侧之间的距离 | | top | 元素上边缘与其包含元素上边缘之间的距离 | | right | 元素右侧与其包含元素右侧之间的距离 | | bottom | 元素下边缘与其包含元素下边缘之间的距离 |

使用示例

下面是使用“左上右下”顺序的示例，以“绝对定位”布局方式为例：

.element {
    position: absolute;
    left: 10px;
    top: 20px;
    right: 30px;
    bottom: 40px;
}

上面的代码将 element 居左上与其容器10像素，右边和底部分别和容器保持距离30和40像素。

我们也可以只设置上下或左右的定位，比如：

.element {
    position: absolute;
    left: 10px;
    right: 30px;
}

上面的代码将 element 左侧与其父元素左侧之间的距离为10像素，右侧与父元素右侧之间的距离为30像素。同时，此元素的上下位置保持在默认位置（即元素包含块的顶端）。

总结

在CSS中，使用 left、right、top 和 bottom 属性可以定位元素的位置。这些属性的顺序应为“左上右下”，也就是从左开始顺时针旋转。这些属性常用于控制绝对定位，相对定位和固定定位元素的位置和大小。