css常用样式总结

置顶鱼缸盖被子了

已于 2022-09-24 17:14:08 修改

阅读量575

点赞数

文章标签： css html html5

于 2020-12-14 15:35:46 首次发布

本文链接：https://blog.csdn.net/yh8899abc/article/details/111165660

版权

css样式总结

关注前端性能！！！
动画

关注前端性能！！！

用google浏览器控制台查看帧数（FPS）

在这里插入图片描述

方法1
快捷键 F12 => shift+Ctrl+p 输入 >FPS
方法2

前端性能优化

能用一行css的多行css一定要用一行写

例如font:
在这里插入图片描述

font 属性的简写顺序

background 属性的简写规则

顺序

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

例如

background: url('/img/1.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;

// 直接简写成
background: url('/img/1.png') no-repeat center/cover;

如果有stylelint校验，实在不想改

/* stylelint-disable */
/* stylelint-enable */

文本

文本超出不换行

white-space: nowrap;

单行文字超出部分…代替，鼠标滑过悬浮显示

<div class = "showOverFlow" :title="title">{{title}}</div>

.showOverFlow {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: elliphsis;
	cursor: pointer;
}

多行文字超出部分…代替

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;  // 表示要展示的行数

文本域超出滚动条样式

<textarea>巴巴爸爸爸爸不啦啦啦啦看</textarea>

textarea {
	width: 100px;
	height: 10px;
	
	// 整个滚动条
    &::-webkit-scrollbar {
        width: 5px;
        height: 1px;
    }
    // 滚动条上的滚动滑块
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #0f6d66;
    }
    // 滚动条背景轨道
    &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #ededed;
    }
}

画圆圈

在这里插入图片描述

文字内发光

在这里插入图片描述

text-shadow: 0px -1px 1px #fff,#107e77 1px 0 10px, rgba(255, 255, 255, 0.4) 1px 0 10px,
                    0 0 2px #107e77, 0 0 2px #107e77, 0 0 1px #107e77, 0 0 2px #107e77;

<div class = "circle"></div>
<span class = "circle"></span>

.circle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: solid 3px purple;
}

标题文字滚动marquee标签

<marquee behavior="scroll" direction="">{{ title }}</marquee>

倒影

在这里插入图片描述

-webkit-box-reflect:below -8px -webkit-linear-gradient(transparent,transparent 40%,rgba(0,0,0,.6));

横线且两段加粗区分

在这里插入图片描述

<div class = "line"></div>

.line {
	width: 100px;
	height: 2px;
	background: rgba(255, 255, 255, 0.3);
	position: relative;  // 子绝父相
	
	&:before {
		position: absolute;
		top: 0;
		left: 0;
		width: 10px;
		height: 2px;
		background: rgba(255, 255, 255, 1);
		content: "";
	}

	&:after {
		position: absolute;
		top: 0;
		right: 0;
		width: 10px;
		height: 2px;
		background: rgba(255, 255, 255, 1);
		content: "";
	}
}

条形进度条

在这里插入图片描述

<div class="right-content">
	// 大盒子
    <div class="right-big-box">
    	// 最底层，调背景色
        <div class="progress-line2" :style="{width: (aniShow ? item.progressValue : '0'), background: item.color}"></div>
        // 最上面层，放很多小div拼成的条条
        <div class="progress-line1">
        	// 一共106个小div
            <div class="peace" v-for="index in 106" :key="index" :class="item.className"></div>
        </div>
    </div>
    // 放值
    <div class="value-box" :title="item.value">{{item.value}}</div>
</div>

mounted() {
   this.t = setTimeout(() => {
       this.aniShow = true;
   }, 500);
},
beforeDestroy() {
    clearTimeout(this.t);
},

进度条动画

方法一：

<div class="realline"></div>

.realline {
	 height: 4px;
	 background: linear-gradient(to right, rgb(51, 119, 255), #00fcff);
	 z-index: 2;
}

.lineanimation {
	animation: processanimation 2s linear 1;  // 重点
}

@keyframes processanimation {
    from {
        width: 0%;
    }

    to {
        width: width;
    }
}

数据刷新时，使该动画再次播放的方法一

const animationObj = document.getElementsByClassName('realline');
// 调用接口前
if (animationObj.length) {
	animationObj.forEach((item) => {
		item.classList.remove('lineanimation');
	},
}
// 调用接口后
if (animationObj.length) {
	animationObj.forEach((item) => {
		item.classList.add('lineanimation');
	},
}

.right-content {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 317px;
    height: 14px;
    padding-left: 2.5px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    overflow: hidden;

    .right-big-box {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 14px;
        background: url('/static/style/menu_bg.png');
        background-size: 100% 100%;

        .progress-line1 {
            position: absolute;
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 100%;
            overflow: hidden;

            .peace {
                width: 1.5px;
                height: 100%;
                margin-left: 1.5px;
                background: url('/static/blue.png');
            }
        }

        .progress-line2 {
            position: absolute;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, rgba(57, 255, 238, 0.1), rgba(57, 255, 238, 1));
            transition: width 1.5s ease-in-out;
        }
    }

    .value-box {
        width: 60px;
        height: 14px;
        padding: 0 2.5px;
        color: #fff;
        overflow: hidden;
        font-weight: 300;
        font-size: 16px;
        font-family: DINPro-Light, sans-serif;
        line-height: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }
}

数据刷新时，使该动画再次播放的方法二

<div class="realline" :key="refreshKey"></div>

refreshKey: 0;

// 数据调用接口后：
this.refreshKey += 1;

进度条动画方法二

<div class="realline" :style="{width: item.value + '%', animation: 'supervise-progress-'+item.value+' 2s forwards'}"></div>

// 对接数据的时候
const data = res.result;
data.forEach((item) => {
    document.styleSheets[0].insertRule(`@keyframes supervise-progress-${item.value}{from{ width: 0%; }to{ width: ${item.value}%;}}`);
});

div四周的小点

在这里插入图片描述

<div style='width:91%; display: flex; margin:0 auto;justify-content:center;height:48px;position:relative;background-color:RGBA(55, 80, 101, 1)'>
		// 盒子周围的四点
        <div class='left-top' style='position:absolute;width:2px;height:2px;background-color:#fff;left:0;top:0'></div>
        <div class='left-bottom' style='position:absolute;width:2px;height:2px;background-color:#fff;left:0;bottom:0'></div>
        <div class='right-top' style='position:absolute;width:2px;height:2px;background-color:#fff;right:0;top:0'></div>
        <div class='right-bottom' style='position:absolute;width:2px;height:2px;background-color:#fff;right:0;bottom:0'></div>
        
        // 盒子的内容左边;文字方向默认text-align:left;
        <div style='width: 47%; height: ${lineHeight}px; line-height: ${lineHeight}px;'>${key}</div>
        // 盒子的内容右边，文字方向text-align:right;
        <div style='width: 47%; height: ${lineHeight}px; line-height: ${lineHeight}px; text-align: right; color:#1fffff'>${data[key]}</div>
</div>

vh/vw 自适应布局时，背景图自适应改变

<div class = "flower"></div>

.flower {
	width: vw(100);
	height: vh(50);
	background: url('/static/flower.png') no-repeat;
	background-size: 100% 100%;       // 重点！！！
}

动态配置样式 :style

<div :style:"{width: (aniShow ? item.progressValue : '0'), background: item.color}"></div>
<div :style="[{'backgroundColor': ([2, 4, 7, 9].includes(index+1) ? '#FF1729' : '#fff')}, {'width': getProcess(item.number)}]"></div>

动态配置class :class

"{'selected': $store.state.id === item.id}"
:class="{['pink-style']: item.value === 222}"
:class="['button-style', {'active': activedTab === item}]"


&.active {
}

// 注意前面的是属性名，后面的是判断条件
<div :class = "{'selected': $store.state.id === item.id}"></div>
<div v-for="(item, index) in arrayList" :key="index" :class="{['pink-style']: item.value === 222}">{{item.value}}</div>

.selected {
	border: vh(1) solid rgba(#f8a632, 0.3) !important;
    color: rgba(#f8a632, 1) !important;
    background: rgba(#332209, 0.3);
}

<div v-for="(item, index) in Data">
	<div :class="`circle-style${index}`"></div>
</div>

.circle-style1 {
}
.circle-style2 {
}
.circle-style3 {
}
.circle-style4 {
}

<div style="width:47%;heightL${lineHeight}px;line-height: ${lineHeight}px;"></div>

文字距顶部

在这里插入图片描述

.text-top {
	vertical-align: text-top;
}

父子div，想让子盒子相对父盒子水平居中且竖直居中

flex 布局

.father {
	display: flex;
	justify-content:center;  // 水平方向居中
	align-items:center;  // 垂直方向居中
}

绝对定位

.son {
	width: 10px;
	height: 10px;
	left: 50%;
	top: 50%;
	transform: tranlate(-50% -50%);
}

文字位于div,span容器中居中

.father {
	text-align:center; // 水平居中
	height: 30px;
	lin-height:30px; // 垂直居中
}

水平居中

margin: 0 auto;

flex 布局超出自动换行

.box {
	display: flex;
	
	flex-direction: row;	// flex 布局的默认值
	
	flex-wrap: wrap;   // 超出自动换行
	
	justify-content: space-between;  // 两边靠
	justify-content: space-around;  // 带间隔两边靠
	justify-content: center;  // 中间
	align-items: center;   // 垂直方向中间站

	align-content: space-between; // 当flex ：row 时垂直方向 两边靠
}

css 动画使得图片DOM闪烁

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.breath {
	opacity: 0.1;
	animation-name: breath;
	animation-duration: 700ms;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	
	-webkit-animation-name: breath;
	-webkit-animation-duration: 900ms;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
}
	@keyframes breath {
		from {opacity: 0.1; color:rgba(234, 17, 16, 0)}
		50% {opacity: 1;color: rgba(234, 17, 16, 0.5)}
		to {opacity: 0.1;color:rgba(234, 17, 16, 1)}
	}
	@-webkit-keyframes breath {
		from {opacity: 0.1;}
		50% {opacity: 1;}
		to {opacity: 0.1;}
	}
</style>
</head>

<body>
	
	<div class="breath" style="width:210px;height:106px;background: url('http://localhost:8080/img/nengyuan/O2panel.png')">
		<span style="margin-top:30px;margin-left:50px;height:30px;line-height:40px;">哈哈哈哈哈哈</span>
	</div>
</body>
</html>

效果图：
在这里插入图片描述
闪烁ing

vue 项目中使用vh vw

在这里插入图片描述

内联样式内面动态样式-background

<div class="photo" :style="{backgroundImage: `url(${zhajiRemote}${imgurl})`}"></div>

内联样式中自定义css属性

// --x 重点代码！！
<div class="circle" :style="{'--x': item - 1}" v-for="item in 5" :key="item"></div>

.photo {
    width: 90%;
    height: 90%;
    background: no-repeat;
    background-size: contain;
}

css 模仿echarts 编写legend样式

效果图
在这里插入图片描述

<div class="process-line" data-title="item.date + '月 : ' + item.value + '例'"></div>

.process-line {
	position: relative;
	
	&:hover::after {
		content: attr(data-title); // !!!重点
	    position: absolute;
	    top: 0;
	    left: 15px;
	    z-index: 5;
	    color: #000;
	    border: 1px solid #242424;
	    border-radius: 5px;
	    background-color: #e5e5e5;
	    text-align: center;
	    padding: 5px 8px;
		white-space: nowrap; // ！！！重点 设置文字不换行
	}
}

文字渐变（有背景图的按钮）

在这里插入图片描述

<div class="button-wrapper">
	<div class="button-word">这是按钮</div>
</div>

.button-wrapper {
	width: 200px;
	height: 40px;
	background: url('/img/button-bg.png') no-repeat;
	background-size: 100% 100%;
	
	.button-word {
		width: 100%;
		height: 100%;
		// 背景颜色渐变 从下到上每个颜色所占百分比
		background-image: -webkit-linear-gradient(#e3cdaa 40%, #de8d0c 65%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

文字渐变2

在这里插入图片描述

.common-font-style {
    font-family: serif;
    background: linear-gradient(0deg, #7ddbff 0%, #53a4e3 18.2373046875%, #cbe4f8 34.3505859375%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

布局 (Flex 和Grid)

实现容器里面自由排列分配（如下图）

在这里插入图片描述

display: flex;
justify-content: space-between; // 水平方向
align-content: space-between; // 垂直方向
flex-wrap: wrap; // 自动换行

flex实现这种布局

在这里插入图片描述
在上面的布局上加一点修饰

<div class="container">
	<div class="item" v-for="item in 5"></div>
</div>

.container {
	width: 400px;
	height: 200px;
	
	// 重点！！！
	display: flex;
	justify-content: space-between; // 水平方向
	align-content: space-between; // 垂直方向
	flex-wrap: wrap; // 自动换行

	&:after {
		content: '';
		width: 100px;
		height: 80px;
	}

	.item {
		width: 100px;
		height: 80px;
	}
}

grid 布局实现上面的布局

.container {
	width: 400px;
	height: 200px;
	
	// 重点！！！
	display: grid;
	grid-template-columns: repeat(auto-fill, 100px); // 每一列 宽100px
	grid-template-rows: repeat(auto-fill, 80px); // 每一行 高80px
	place-content: space-between space-between; // place-content 是align-content属性和justify-content属性的合并简写形式
	grid-gap: 10px 67px; 这是上一句的替代方案，行间距和列间距
	
	// 对应里面的子元素 宽100px 高80px
	.item {
		width: 100px;
		height: 80px;
	}
}

flex 布局实现这种对称布局

在这里插入图片描述

<div class="container">
	// 两边的
	<div v-for="(item, index) in dataList" :key="item.key">
		<span :style={"textAlign": index === 0 ? "left" : "right">title</span>
		<div :style={"flexDirection": index === 0 ? "row" : "row-reverse">
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</div>
	
	// 中间的圆
	<div class="echart-container"></div>
</div>

.container {
	position: relative;
	display: flex;
	justify-content: space-between;  // 两边靠
	align-items: center;
	
	.echart-container {
		postion: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

flex 布局超出自动换行

.box {
	display: flex;
	
	flex-direction: row;	// flex 布局的默认值
	
	flex-wrap: wrap;   // 超出自动换行
	
	justify-content: space-between;  // 两边靠
	justify-content: space-around;  // 带间隔两边靠
	justify-content: center;  // 中间
	align-items: center;   // 垂直方向中间站

	align-content: space-between; // 当flex ：row 时垂直方向 两边靠
}

毛玻璃效果

效果图
在这里插入图片描述

// 毛玻璃效果
backdrop-filter: blur(10px);

在这里插入图片描述

css动态计算长度（calc()）

css动态获取自定义css属性值 (var())

// css动态获取自定义属性并计算
animation-delay: calc(var(--x) * -1s);
// 调整颜色色相
filter: hue-rotate(calc(var(--x) * 80deg));

让图片等比例缩放

<div class="img-wrappper">
	<img url="/image/1.jpg"/>
</div>

方法一

.img-wrappper {
	object-fit: contain;
	img {
		width: 100%;
		height: 100%;
	}
}
方法二
```css
.img-wrappper {
	width: 100%;
	padding-bottom: 75%; // 图片的缩放比例是4:3, 这里面将padding-bottom 理解成height,
	img {
		width: 100%;
		height: 100%;
	}
}

css特殊符号

+

在这里插入图片描述

<div class="parent">
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
	<div class="child"></div>
</div>

.parent {
	width: auto;
	height: 20px;
}

.child {
	width: 10px;
	height: 20px;
}

.child + child {
	margin-left: 10px;
}

css 选择器

匹配类名以xx开头[class^="yugang-"]
匹配类名任意处包含xx [class*=" yugang-"]

画背景框（高度自适应）

效果如图
在这里插入图片描述

<div class="dot-line"></div>

侧边的照片要尽量高

.dot-line {
	width: 100px;
	background-image: url("/img/bgimg/img2.png"), url("/img/bgimg/img1.png"),
       url("/img/bgimg/img1.png"), url("/img/bgimg/img2.png");
    background-position: top, right, left, bottom;
    background-repeat: no-repeat;
    background-size: auto 3px, 3px auto, 3px auto, auto 3px;
    border-radius: 5px;
}

图片等比例大小放置

<div class="img-wrapper">
    <img src="/image/try/1.jpg" alt="">
</div>

方案一：

.img-wrapper {
    object-fit: contain;

    img {
        width: 100%;
        height: 100%;
    }
}

方案二：百分比

4:3的图片

.img-wrapper {
    width: 100%;
    padding-bottom: 75%; // 此处 padding-bottom 可以理解为高度

    img {
        width: 100%;
        height: 100%;
    }
}

滚动条样式编写（鼠标移入显示滚动条，移出隐藏滚动条）

<div class="swiper-wrapper">
	<div class="content"></div>
</div>

.swiper-wrapper {
	width: 100px;
	height: 30px;
	overflow-x: hidden;
    overflow-y: hidden; //滚动条占宽度（不管内容是否溢出）
    overflow-y: overlay; //滚动条不占宽度

	// 鼠标移入显示滚动条
	&:hover {
      overflow-y: scroll;
   }

	// 整个滚动条
	&::-webkit-scrollbar {
           width: 10px;
           height: 1px;
       }
	// 滚动条上的滚动滑块
	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
           box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
           background: #535353;
	}
	
	// 滚动条背景轨道
    &::-webkit-scrollbar-track {
         box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
         border-radius: 10px;
         background: #ededed;
     }
        
	.content {
		width: 100%;
		height: 100px;
	}
}

效果图：
在这里插入图片描述

在这里插入图片描述

强制覆盖element ui的样式 ::v-deep 样式穿透

// ::v-deep 
.icon-dialog {
  ::v-deep .el-dialog {
    border-radius: 8px;
    margin-bottom: 0;
    margin-top: 4vh !important;
    .el-dialog__header {
      padding-top: 14px;
    }
    .el-dialog__body {
      padding: 0;
      overflow: auto;
    }
  }
}

动画

clip-path

// before
opacity: 0.5;
clip-path: circle(0%);
transition: all 0.2s linear;
// after
opacity: 1;
clip-path: circle(100%);

问题

absolute 定位不在可视区出现滚动条

在这里插入图片描述
解决办法：
1、将absolute换成fixed
2、将absolute相对的父级relative对象加上overflow：hidden；

css权重

如下所示，从上往下

!important
行内样式
ID选择器
类选择器/伪类选择器
标签选择器
继承 || *

css常用样式总结

css样式总结

关注前端性能！！！

用google浏览器控制台查看帧数（FPS）

前端性能优化

能用一行css的多行css一定要用一行写

font 属性的简写顺序

background 属性的简写规则

如果有stylelint校验，实在不想改

文本

文本超出不换行

单行文字超出部分…代替，鼠标滑过悬浮显示

多行文字超出部分…代替

文本域超出滚动条样式

画圆圈

文字内发光

标题文字滚动marquee标签

倒影

横线且两段加粗区分

条形进度条

进度条动画

方法一：

进度条动画方法二

div四周的小点

vh/vw 自适应布局时，背景图自适应改变

动态配置样式 :style

动态配置class :class

文字距顶部

父子div，想让子盒子相对父盒子水平居中且竖直居中

内联样式内面动态样式-background

内联样式中自定义css属性

css 模仿echarts 编写legend样式

文字渐变（有背景图的按钮）

文字渐变2

布局 (Flex 和Grid)

实现容器里面自由排列分配（如下图）

flex实现这种布局

grid 布局实现上面的布局

flex 布局实现这种 对称布局

flex 布局超出自动换行

毛玻璃效果

css动态计算长度 （calc()）

css动态获取自定义css属性值 (var())

让图片等比例缩放

css特殊符号

+

css 选择器

画背景框（高度自适应）

图片等比例大小放置

方案一：

方案二：百分比

滚动条样式编写（鼠标移入显示滚动条，移出隐藏滚动条）

强制覆盖element ui的样式 ::v-deep 样式穿透

动画

clip-path

问题

absolute 定位不在可视区出现滚动条

css权重

flex 布局实现这种对称布局

css动态计算长度（calc()）