CSS基础零碎

CSS 相关属性

单位

• deg 度。一个完整的圆是 360deg。例：0deg，90deg，``14.23deg。
• grad 百分度。一个完整的圆是 400grad。例：0grad，100grad，38.8grad。
• rad 弧度。一个完整的圆是 2π 弧度，约等于 6.2832rad。1rad 是 180/π 度。例：0rad，1.0708rad，6.2832rad。
• turn 圈数。一个完整的圆是 1turn。例：0turn，0.25turn，1.2turn。

伪类

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。

标准伪类

• :hover 鼠标划过
• :active 激活状态 鼠标按下
• :checked 单选，多选选中状态
• :default
• :defined
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :focus

等

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

标准伪元素

• ::after

• ::before

• ::cue

• ::first-letter 首字母

• ::first-line 第一行

• ::selection

等

其他零碎

clip-path 规律 第一个点 （x y), (x y), (x y);

clip-path: polygon(50% 0, 100% 50%, 0 100%); // 例如三角

实现五角星

clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);

实现圆形

clip-path: circle(25% at 50% 50%);

实现热门

clip-path: polygon(0px 80px, 25px 60px, 50px 80px, 50px 0px, 0px 0px);

实现心形

clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');

修改input光标颜色

caret-color: red;

caret-color: auto;

caret-color: transparent;

可调整大小块元素

// 配合此属性使用过
overflow: scroll;

// 宽高可调整
resize: both;

// 不可调整
resize: none;

// 水平横向
resize: horizontal;

// 垂直竖向
resize: vertical;

自定义变量

--color: red;

// 使用
p {
	color: var(--color);
}

块容器限制内容行数

// 配合其他属性使用
-webkit-line-clamp: 3;

渐变斑马纹

background: repeating-linear-gradient(45deg,
#fff 0%, #fff 10%,
#000 10%, #000 20%);

SCSS 预处理

弹性盒子

// 弹性布局
@mixin flex($t: center) {
    display: flex;
    align-items: center;

    @if $t == center {
        justify-content: center;
    }

    @if $t == left {
        justify-content: flex-start;
    }

    @if $t == right {
        justify-content: flex-end;
    }

    @if $t == lr {
        justify-content: space-between;
    }

    @if $t == alr {
        justify-content: space-around;
    }
}

使用方式

// 使用方式
p {
	/* 默认居中 */
	@include flex;
	
	/* 左侧开始 */
	@include flex(left);
	
	/* 两侧 */
	@include flex(lr);
	
	...
}

单行 多行 文本溢出隐藏

// 溢出省略
@mixin text($n: 1) {
    @if $n == 1 {
        text-overflow: ellipsis;
        white-space: nowrap;
    } @else {
        display: -webkit-box;
        -webkit-line-clamp: $n;
        -webkit-box-orient: vertical;
    }
    overflow: hidden;
}

使用方式

// 默认单行
p {
	@include text;
	
	// 最多三行
	@include text(3);
	
	...
}