前端学习css - 技术栈

前端学习css

universe_012025-11-05 16:01

transform

变形（变换）属性，让元素在不影响文档布局情况下：平移，旋转（rotate）缩放（scale）倾斜（skew）

复制代码

transform: rotate(角度);

deg（度数）
rad`（弧度）

默认旋转中心是元素的中心点。

复制代码

.box {
  transform-origin: left top; /* 从左上角旋转 */
  transform: rotate(45deg);
}

z-index

决定哪张卡片在上面，哪张被压在下面

复制代码

div {
  position: absolute;
  z-index: 10;
}

z-index 数值越大 → 元素越靠上。

z-index 数值越小 → 元素越靠下。

如果不写 z-index，默认是 auto（相当于 0）。

z-index只有在元素有定位时才生效

层叠上下文。某些属性会创建一个新的层叠上下文（比如 position, opacity < 1, transform, filter, z-index 本身等）。z-index只有在同一个层叠上下文内才可以互相比较大小，有时候设置z-index：9999没生效时因为被不同的层叠上下文隔离了

overflow-x

指定当前元素内容在水平方向x轴超出盒子宽度该如何处理

visible
hidden
scroll
auto当且仅当内容超出时才显示水平滚动条，不超出则不出现滚动条
clip

overflow-x ，而 overflow-y 则对应垂直方向； overflow 同时控制两轴。

复制代码

transition: transform 0.5s linear;

指定过渡的属性是什么 ;过渡持续时间------0.5 秒（500 毫秒）;过渡的时间函数（timing function）。 linear 表示匀速过渡：动画过程中速度保持不变

复制代码

  background: transparent;

去掉背景色、让它完全透明

复制代码

outline: none; = 不显示默认焦点边框