【易忘样式总结】CSS样式篇！

 一、鼠标悬停变手指

/* 鼠标悬停变手指 */
.box{
  cursor: pointer;
}

二、盒子阴影

.box{
            /* value配置：
            第一个值为左右两边阴影值、正为右、负为左（必选）
            第二个值为上下两边阴影值，正为下、负为上（必选）
            第三个值为模糊程度
            第四个值为阴影的距离尺寸
            第五个值为颜色
            ,号后面可以设置第二个阴影参数，也就是一个盒子可以设置多个阴影
            inset表示为内阴影，默认为外阴影outset
            除此之外颜色值还可以设置成RGB模式来设置阴影的透明度
            */
           box-shadow: 0px -10px 10px 10px #4444444d, 0px -10px 10px rgb(255, 232, 83) inset;
          
        }

3.开启BFC

除示例代码外还可以通过伪类来清除高度塌陷

	.box{
		background-color: skyblue;
		width: 100px;
		height: 100px;
		// overflow: hidden;//推荐使用
		// float: left;
		// display: inline-block;
		.layer{
			width: 50px;
			height: 50px;
			background-color: orange;
			margin-top: 50px;
		}
	}

4.文本超出省略号代替

一行

{
	width: 100px;
	overflow: hidden;  //超出隐藏
	white-space: nowrap; //不折行
	text-overflow: ellipsis; //溢出显示省略号
}

多行

{
	width: 100px;
	overflow:hidden;   //超出隐藏
    text-overflow:ellipsis;  //溢出显示省略号
    white-space: normal;  //常规默认，会折行
    display:-webkit-box;  
    -webkit-box-orient:vertical;  //子元素排列 vertical（竖排）orhorizontal（横排）
    -webkit-line-clamp:2;/*内容限制的行数 需要几行写几就行*/ 
}

5.flex布局最后一个元素自动补全占满剩余宽度

	.box {
		display: flex;
		border: 1rpx solid #909399;
		.chid-box-left{
			background-color: #2979ff;
			width: 100rpx;
			height: 100rpx;
		}
		.chid-box-right{
			background-color: #19be6b;
			flex: 1;//设置最后一个元素flex为1即可
		}
	}

6.多个类名加逗号跟不加逗号的区别

/* //表示同时拥有.container .content两个类名的元素使用此样式 */
.container .content{
  color: #fff;
}
/* //表示拥有这两个类名中的一个即可使用此样式 */
.container,.content{
  color: #fff;
}

7.各UI组件库修改默认样式

element-plus

:deep(.el-card){
  background-color: skyblue;
}
/* //或者*/
::v-deep .el-dialog {
    width: 100%;
    height: 100%;
}

8.scss及less定义全局变量

scss

// 主题颜色
$theme-color:#328fe6;//可使用export向外暴露然后在任意页面引入使用