Frontend — CSS

position #

CSS 的 position 属性及其几个选项，可以分为两大类：相对定位（relative 和 sticky）和绝对定位（absolute 和 fixed）。

1. `position: static` #

默认值：所有元素的默认值。元素遵循正常的文档流，不受 top, right, bottom, left 等位置属性的影响。
使用场景：不需要显式定位时使用。

<div class="static">Static element (default)</div>
<style>
  .static {
    position: static;
    background-color: lightgrey;
  }
</style>

2. `position: relative` #

相对定位：相对于其正常位置进行定位。top, right, bottom, left 会使元素相对于其在正常文档流中的位置进行偏移，而不会影响其他元素。
使用场景：当需要微调元素位置或作为绝对定位元素的容器时。

<div class="relative-container">
  <div class="relative">Relative element</div>
</div>
<style>
  .relative-container {
    background-color: lightgreen;
    height: 200px;
  }

  .relative {
    position: relative;
    top: 20px;
    left: 30px;
    background-color: lightblue;
  }
</style>

3. `position: absolute` #

绝对定位：相对于最近的定位祖先（不是 static 的祖先元素）或相对于整个文档进行定位。元素脱离文档流，不会影响其他元素的位置。
使用场景：将元素精确放置在容器内的特定位置。

<div class="absolute-container">
  <div class="absolute">Absolute element</div>
</div>
<style>
  .absolute-container {
    position: relative;
    background-color: lightyellow;
    height: 200px;
  }

  .absolute {
    position: absolute;
    top: 20px;
    right: 30px;
    background-color: lightcoral;
  }
</style>

4. `position: fixed` #

固定定位：相对于浏览器窗口进行定位。元素始终保持在指定位置，不受页面滚动的影响。
使用场景：创建始终可见的导航栏或按钮等。

<div class="fixed">Fixed element</div>
<style>
  .fixed {
    position: fixed;
    bottom: 20px;
    right: 30px;
    background-color: lightsalmon;
  }
</style>

5. `position: sticky` #

粘性定位：结合了相对定位和固定定位的特性。元素根据用户的滚动位置进行定位，在特定条件下固定在视口的某个位置。
使用场景：创建在某个滚动阈值内保持固定然后随其滚动的内容。

<div class="sticky-container">
  <div class="sticky">Sticky element</div>
  <p>Scroll down to see the sticky element in action.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel urna elit. Donec consequat massa vel leo volutpat, eget tincidunt velit ullamcorper...</p>
</div>
<style>
  .sticky-container {
    height: 200px;
    overflow-y: scroll;
    background-color: lightgoldenrodyellow;
  }

  .sticky {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    background-color: lightpink;
  }
</style>

总结 #

static：默认值，不进行任何特殊定位。
relative：相对自身的正常位置进行定位，仍保留其在文档流中的空间。
absolute：相对于最近的定位祖先进行定位，脱离文档流。
fixed：相对于浏览器窗口进行定位，脱离文档流，不随页面滚动。
sticky：在特定条件下相对定位和固定定位之间切换。

opacity #

透明度设置，这个属性兴许只是单词不认识，所以不好记。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/opacity

/* 完全不透明 */
opacity: 1;
opacity: 1;

/* 半透明 */
opacity: 0.6;

/* 完全透明 */
opacity: 0;
opacity: 0;

opacity: inherit;

order #

https://developer.mozilla.org/zh-CN/docs/Web/CSS/order

order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

简单地说，值越大，排列越往后，常见与 flex 一起使用。

z-index #

z-index - CSS：层叠样式表 | MDN (mozilla.org)

CSS z-index 属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序，z-index 较大的重叠元素会覆盖较小的元素。

简单地说，值越大，越靠前。

float #

https://developer.mozilla.org/zh-CN/docs/Web/CSS/float

浮动元素从正常的文档流中移出，并向左或向右浮动，直到它碰到父容器的边界或另一个浮动元素。其他非浮动元素（如文本）则会围绕浮动元素流动，但浮动元素本身仍保留在父容器中。

transform #

transform - MDN 属性允许你旋转、缩放、倾斜或平移给定元素。

/* 关键字值 */
transform: none;

/* 函数值 */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* 多个函数值 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* 全局值 */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

在 CSS 中，transform 属性用于应用2D或3D的转换效果，这些转换可以包括移动、旋转、缩放和倾斜。常用的 CSS transform 函数包括以下几种：

2D 转换函数 #

translate(x, y)
- 移动元素。x 表示水平方向的移动距离，y 表示垂直方向的移动距离。
- 示例：transform: translate(50px, 100px);
translateX(x)
- 沿水平方向移动元素。
- 示例：transform: translateX(50px);
translateY(y)
- 沿垂直方向移动元素。
- 示例：transform: translateY(100px);
scale(x, y)
- 按照比例缩放元素。x 是水平方向的缩放比例，y 是垂直方向的缩放比例。
- 示例：transform: scale(1.5, 2);
scaleX(x)
- 沿水平方向缩放元素。
- 示例：transform: scaleX(1.5);
scaleY(y)
- 沿垂直方向缩放元素。
- 示例：transform: scaleY(2);
rotate(angle)
- 以角度 angle 旋转元素。正值表示顺时针旋转，负值表示逆时针旋转。
- 示例：transform: rotate(45deg);
skew(x-angle, y-angle)
- 沿水平方向和垂直方向倾斜元素。x-angle 是水平方向的倾斜角度，y-angle 是垂直方向的倾斜角度。
- 示例：transform: skew(30deg, 20deg);
skewX(x-angle)
- 沿水平方向倾斜元素。
- 示例：transform: skewX(30deg);
skewY(y-angle)
- 沿垂直方向倾斜元素。
- 示例：transform: skewY(20deg);
matrix(a, b, c, d, e, f)
- 使用矩阵变换元素。matrix(a, b, c, d, e, f) 是一个六参数的 2D 变换矩阵，可以实现上述所有2D变换的组合。
- 示例：transform: matrix(1, 0, 0, 1, 50, 100); (相当于 translate(50px, 100px))

3D 转换函数 #

translateZ(z)
- 沿 Z 轴移动元素。
- 示例：transform: translateZ(100px);
translate3d(x, y, z)
- 在三维空间中移动元素。
- 示例：transform: translate3d(50px, 100px, 200px);
scaleZ(z)
- 沿 Z 轴缩放元素。
- 示例：transform: scaleZ(1.5);
scale3d(x, y, z)
- 在三维空间中缩放元素。
- 示例：transform: scale3d(1.5, 2, 1.2);
rotateX(angle)
- 围绕 X 轴旋转元素。
- 示例：transform: rotateX(45deg);
rotateY(angle)
- 围绕 Y 轴旋转元素。
- 示例：transform: rotateY(45deg);
rotateZ(angle)
- 围绕 Z 轴旋转元素（相当于2D旋转）。
- 示例：transform: rotateZ(45deg);
rotate3d(x, y, z, angle)
- 围绕通过坐标（x, y, z）的轴旋转元素。
- 示例：transform: rotate3d(1, 1, 0, 45deg);
perspective(n)
- 定义 3D 空间中的视距，影响 3D 转换的透视效果。一般与其他 3D 变换结合使用。
- 示例：transform: perspective(800px);
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
- 使用 4x4 矩阵变换元素。matrix3d 可以实现上述所有3D变换的组合。
- 示例：transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 200, 1);

这些函数可以按照需要单独使用或组合使用来创建复杂的变换效果。

offset #

通常与 transform 一起使用。