【前言】
时间过得真的很快，作为25届毕业生的我即将结束在南京接近6个月的实习。现在处于投简历背八股找工作状态，分享下我在这次充实的实习之旅中遇到的问题和解决方案，在梳理所学知识的同时也能帮助和我一样的前端新人。
1️⃣第一个坑不要太熟悉哦
没错，它就是外边距塌陷问题，我解决这个问题也很简单粗暴，
解决方法： 自己算一下外边距，尽量只设置一个边距
2️⃣渐变色边框导致边框圆角失效
很多朋友都遇到过使用渐变色边框的时候导致圆角失效，那么怎么解决呢？直接上代码截图 效果图：
解决方法： 使用 background-clip 实现 设置两层渐变
border: 1px solid transparent;
border-radius: 20px;
background-image: linear-gradient(
54deg,
#fa7332 0%,
#ed395f 34%,
#ea2837 100%
),
linear-gradient(rgba(249, 162, 156, 1) 0%, rgba(255, 129, 122, 0.43) 100%);
background- origin: border-box;//使图片完整展示
background- clip: content-box, border-box;
//第一个表示裁剪至内容区值，第二个表示裁剪至边框取值
3️⃣图片叠加问题
效果图：
解决方法： 绝对定位和z-Index
.swiper_item_cover {
position: relative;
width: 160.6px;
height: 170px;
.swiper_item_cover_1 {
position: absolute;
z- index: 2;
top: 0;
left: 0;
width: 106px;
height: 170px;
}
.swiper_item_cover_2 {
position: absolute;
z- index: 1;
top:25px;
right: 0;
width: 77px;
height: 134px;
}
}
4️⃣子元素继承父元素的透明度
解决方法： 利用rgba 间接设置透明度
5️⃣兄弟元素的默认行为导致层级覆盖
原因： 如果兄弟元素没有设置position,默认情况下，它的position的值是static。 static元素不参与堆叠上下文 ，因此它们的z-index默认值是auto,这意味着它们会在所有absolute定位元素之上。
解决方法： 给另一个兄弟元素设置 position:relative
6️⃣文本溢出显示省略号
解决方法：
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;/*修改这个数字可以变成多行省略*/
line-clamp: 1;/*这个也要改，scss中可以用@mixin封装成一个方法*/
scss封装示例
@mixin ellicpsisN($lineCount) {
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;//弹性盒模型
-webkit-line-clamp: $lineCount;//弹性盒模型方向垂直//弹性盒模型方向垂直
-webkit-line-clamp: 1;//限制显示的行数
}
//用法
@include ellicpsisN(1);
7️⃣自定义滚动条的样式
UI给图滚动条样式要调整，别急，它来啦
解决方法：
//设置滚动条的宽度高度和背景颜色
::-webkit-scrollbar {
width: 6px;
height: 8px;
background- color: #ebeef5;
}
//设置滚动条滑块的阴影和背景颜色
::-webkit-scrollbar-thumb {
box- shadow: inset 0 0 6px rgba(0, 0, 0, .3);
-webkit-box- shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background- color: #ccc;
}
//设置滚动条轨道的阴影圆角和背景颜色
::-webkit-scrollbar-track{
box- shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border- radius: 3px;
background: rgba(255, 255, 255, 1);
}
8️⃣ 通知弹窗内部自定义html样式
效果图
解决方法：
const handleClickEmployee = (row) => {
const h = this.$createElement;
this.$notify({
title: '提示',
message: h(
'i',
{ style: 'color: teal' },
'This is a reminder'
),
});
};
//利用elment-plus 的组件
ElNotification({
title: 'Title',
message: h('i', { style: 'color: teal' }, 'This is a reminder'),
})
9️⃣ 利用i标签和elment-plus来快速渲染图标
官网上有更多图标可以选，这是几个使用示例哦
解决方法：
🔟移动端项目禁用点击高亮和文本选择
解决方法：
body {
-webkit-tap-highlight- color: transparent;//禁用点击高亮
outline: 0;//移除默认轮廓线
user-select: none;//禁用文本选择
-webkit-user-select: none;
-webkit-text-size-adjust: 100%;//调整文字大小为100%
width: 100%;
}
篇幅限制，本期前端新手容易遇到的CSS坑分享到这里！这几天会逐步更新完这个系列，欢迎大家留言和指导~
