前端学习css

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; = 不显示默认焦点边框