目录
8、CSS :after、:before、::after、::before的使用
1、文本超出省略号代替
/*单行文本省略号*/
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
/*多行文本省略号*/
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2;
display: -webkit-box;
-webkit-box-orient: vertical;
/* 显示两行文本,超过两行使用省略号 */
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 2; /* 显示的行数 */
-webkit-box-orient: vertical;
overflow: hidden;
}
2、自定义滚动条样式
/*谷歌、safari、qq浏览器、360浏览器滚动条样式*/
/* 滑道样式 */
.el-aside::-webkit-scrollbar{
width:5px;
background:#304156;
border-radius: 6px;
}
/* 定义滑块的样式 */
.el-aside::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
background-color:rgba(0,0,0,0.3);
}
/* 定义滑块鼠标移入时的样式 */
.el-aside::-webkit-scrollbar-thumb:hover{
border-radius: 10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
background-color:rgba(0,0,0,0.4);
}
::-webkit-scrollbar {
width: 5px;
height: 110px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #bdbdbd;
}
/*滑块效果*/
::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
/*IE滚动条颜色*/
html {
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#000;
scrollbar-Shadow-color:#adadad;/*滑块边色*/
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
scrollbar-track-color:#eeeeee;/*背景颜色*/
}
3、文本无法选中
user-select:none;
4、字体间距
letter-space:12px;
5、放大动画效果
使用:<div class="animation-scale-up"></div>
@keyframes fade-scale {
0% {
opacity: 0;
-webkit-transform: scale(.2);
-o-transform: scale(.2);
transform: scale(.2);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.animation-scale-up {
-webkit-animation-name: fade-scale;
-o-animation-name: fade-scale;
animation-name: fade-scale;
}
6、CSS引用数字字体
@font-face{
font-family:electronicFont;
src:url('../font/DS-DIGIT.TTF)
}
/*需要下载:( DS-DIGIT.TTF )字体库*/
7、CSS去角
8、CSS :after、:before、::after、::before的使用
:before == ::before :after == ::after
css2的写法::after :before
css3的写法:::after ::before
.box{
width:200px;
height:200px;
background:rgba(0,0,255,0.3);
margin:30px auto;
position:relative;
}
.box:before{
content:"";
position:absolute;
top:0px;
width:20px;
height:10px;
border-left:2px solid red;
border-top:2px solid red;
}
.box:after{
content:"";
position:absolute;
top:0px;
right:0px;
width:20px;
height:10px;
border-right:2px solid red;
border-top:2px solid red;
}
.box_in{
width:100%;
position: absolute;
bottom:0px;
left:0px;
}
.box_in:before{
content:"";
position:absolute;
bottom:0px;
left:0px;
width:20px;
height:10px;
border-left:2px solid red;
border-bottom:2px solid red;
}
.box_in:after{
content:"";
position:absolute;
bottom:0px;
right:0px;
width:20px;
height:10px;
border-right:2px solid red;
border-bottom:2px solid red;
}
9、CSS使用::after去除浮动
解决因为子元素浮动导致父元素高度塌陷的问题
.box::after{
content:"";
display: block;
clear:both;height:0,
visibility: hidden;
}
10、时间动画属性 transition
div{
transition:all 0.4s;
}
div:hover{
background:red;
}
11、颜色渐变
background:linear-gradient(to right,#fff,#000); /*默认是从上向下*/
background:-webkit-linear-gradient(45deg,red,green);
12、解决移动端弹出层出现后滑动屏幕底层依旧可以滑动的方法
当弹窗显示的时候,获取屏幕scrollTop,给底层的元素使用fixed定位 ,top为-scrollTop
当弹窗消失的时候,给底层的元素恢复原定位scrollTop
13、div元素浮动不换行解决方法
<div class="parent">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
<style>
.parent{
width:1000px;
height:200px;
display:flex;
flex-grow:nogrow;
}
.children{
width:500px;
height:200px;
float:left;
}
</style>
14、css calc( )函数的使用
注意:calc 和 运算符 一定需要使用空格隔开才能生效
width: calc(100% - 100px); /*父元素宽度的100% 减去 120px*/
height: calc(100% - 120px); /*父元素高度的100% 减去 120px*/
15、CSS 禁止文本选中
user-select:none |text| all | element
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element:可以选择文本,但选择范围受元素边界的约束
16、鼠标移入 缓慢移动、阴影特效
.tool-box{
border-radius: 2px;
overflow: hidden;
top:0px;
position: relative;
transition:all .2s linear;
z-index:999999;
}
.tool-box:hover{
// box-shadow:0 2px 14px rgba(0,0,0,0.1);
box-shadow:0 15px 30px rgb(0 0 0 / 10%);
top:-2px;
}
17、CSS代码样式字体
.pre{
font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
}
18、CSS弹窗动画
参考文章:几种CSS弹窗动效 - 知乎
19、Flex平均间隔自动换行布局
.course-list-container{
width:100%;
display:flex;
justify-content: space-between;
flex-wrap: wrap;
gap:18px;
.course-item{
flex:1 1 48%;
height:300px;
margin-bottom:18px;
border-radius: 8px;
}
}
参考文章:flex布局设置一行显示多个,水平布局,自动换行_flex布局自动换行-CSDN博客
20、图片铺满参数
object-fit:cover 会占满div,会产生一个图片的裁剪
object-fit:contain 会产生空隙