灵活运用CSS开发技巧，前端面试题2024基础

最新推荐文章于 2024-08-14 20:13:10 发布

2401_84007015

最新推荐文章于 2024-08-14 20:13:10 发布

阅读量673

点赞数 30

分类专栏： 2024年程序员学习文章标签：前端 css

本文链接：https://blog.csdn.net/2401_84007015/article/details/137201368

版权

2024年程序员学习专栏收录该内容

222 篇文章 0 订阅

订阅专栏

使用pointer-events禁用事件触发

要点：通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于<button>的disabled
场景：「限时点击按钮」(发送验证码倒计时)、「事件冒泡禁用」(多个元素重叠且自带事件、a标签跳转)
兼容：pointer-events
代码：在线演示

使用+或~美化选项框

要点：<label>使用+或~配合for绑定radio或checkbox的选择行为
场景：「选项框美化」、「选中项增加选中样式」
兼容：+、~
代码：在线演示

使用:focus-within分发冒泡响应

要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within捕获该冒泡事件来设置样式
场景：「登录注册弹框」、「表单校验」、「离屏导航」、「导航切换」
兼容：:focus-within、:placeholder-shown
代码：在线演示

使用:hover描绘鼠标跟随

要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover触发单元格的样式变化来描绘鼠标运动轨迹
场景：「鼠标跟随轨迹」、「水波纹」、「怪圈」
兼容：:hover
代码：在线演示

使用max-height切换自动高度

要点：通过max-height定义收起的最小高度和展开的最大高度，设置两者间的过渡切换
场景：「隐藏式子导航栏」、「悬浮式折叠面板」
兼容：max-height
代码：在线演示

使用transform模拟视差滚动

要点：通过background-attachment:fixed或transform让多层背景以不同的速度移动，形成立体的运动效果
场景：「页面滚动」、「视差滚动文字阴影」、「视差滚动文字虚影」
兼容：background-attachment、transform
代码：在线演示

使用animation-delay保留动画起始帧

要点：通过transform-delay或animation-delay设置负值时延保留动画起始帧，让动画进入页面不用等待即可运行
场景：「开场动画」
兼容：transform、animation
代码：在线演示

使用resize拉伸分栏

要点：通过resize设置横向自由拉伸来调整目标元素的宽度
场景：「富文本编辑器」、「分栏阅读」
兼容：resize
代码：在线演示

Color Skill

使用color改变边框颜色

要点：border没有定义border-color时，设置color后，border-color会被定义成color
场景：「边框颜色与文字颜色相同」
兼容：color

.elem {

border: 1px solid;

color: #f66;

}

使用filter开启悼念模式

要点：通过filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们
场景：「网站悼念」
兼容：filter
代码：在线演示

使用::selection改变文本选择颜色

要点：通过::selection根据主题颜色自定义文本选择颜色
场景：「主题化」
兼容：::selection
代码：在线演示

使用linear-gradient控制背景渐变

要点：通过linear-gradient设置背景渐变色并放大背景尺寸，添加背景移动效果
场景：「主题化」、「彩虹背景墙」
兼容：gradient、animation
代码：在线演示

使用linear-gradient控制文本渐变

要点：通过linear-gradient设置背景渐变色，配合background-clip:text对背景进行文本裁剪，添加滤镜动画
场景：「主题化」、「特色标题」
兼容：gradient、background-clip、filter、animation、text-fill-color
代码：在线演示

使用caret-color改变光标颜色

要点：通过caret-color根据主题颜色自定义光标颜色
场景：「主题化」
兼容：caret-color
代码：在线演示

使用::scrollbar改变滚动条样式

要点：通过scrollbar的scrollbar-track和scrollbar-thumb等属性来自定义滚动条样式
场景：「主题化」、「页面滚动」
兼容：::scrollbar
代码：在线演示

使用filter模拟Instagram滤镜

要点：通过filter的滤镜组合起来模拟Instagram滤镜
场景：「图片滤镜」
兼容：filter
代码：在线演示、css-gram

Figure Skill

使用div描绘各种图形

要点：<div>配合其伪元素(::before、::after)通过clip、transform等方式绘制各种图形
场景：各种图形容器
兼容：clip、transform
代码：在线演示

使用mask雕刻镂空背景

要点：通过mask为图像背景生成蒙层提供遮罩效果
场景：「高斯模糊蒙层」、「票劵」(电影票、购物卡)、「遮罩动画」
兼容：mask、perspective、transform-style、animation
代码：在线演示

使用linear-gradient描绘波浪线

要点：通过linear-gradient绘制波浪线
场景：「文字强化显示」、「文字下划线」、「内容分割线」
兼容：gradient
代码：在线演示

使用linear-gradient描绘彩带

要点：通过linear-gradient绘制间断颜色的彩带
场景：「主题化」
兼容：gradient
代码：在线演示

使用conic-gradient描绘饼图

要点：通过conic-gradient绘制多种色彩的饼图
场景：「项占比饼图」
兼容：gradient
代码：在线演示

使用linear-gradient描绘方格背景

要点：使用linear-gradient绘制间断颜色的彩带进行交互生成方格
场景：「格子背景」、「占位图」
兼容：gradient
代码：在线演示

使用box-shadow描绘单侧投影

要点：通过box-shadow生成投影，且模糊半径和负的扩张半径一致，使投影偏向一侧
场景：「容器投影」、「背景补间动画1」、「背景补间动画2」、「立体投影」、「文字立体投影」、「文字渐变立体投影」、「长投影」、「霓虹灯」、「灯光阴影」
兼容：box-shadow、filter、text-shadow
代码：在线演示

使用filter描绘头像彩色阴影

要点：通过filter:blur() brightness() opacity()模拟阴影效果
场景：「头像阴影」
兼容：filter
代码：在线演示

使用box-shadow裁剪图像

要点：通过box-shadow模拟蒙层实现中间镂空
场景：「图片裁剪」、「新手引导」、「背景镂空」、「投射定位」
兼容：box-shadow
代码：在线演示

使用outline描绘内边框

要点：通过outline设置轮廓进行描边，可设置outline-offset设置内描边
场景：「内描边」、「外描边」
兼容：outline
代码：在线演示

Component Skill

迭代计数器

要点：累加选项单位的计数器
场景：「章节目录」、「选项计数器」、「加法计数器」
兼容：counters
代码：在线演示

下划线跟随导航栏

要点：下划线跟随鼠标移动的导航栏
场景：「动态导航栏」
兼容：+
代码：在线演示

气泡背景墙

要点：不间断冒出气泡的背景墙
场景：「动态背景」
兼容：animation
代码：在线演示

滚动指示器

要点：提示滚动进度的指示器
场景：「阅读进度」
兼容：calc()、gradient
代码：在线演示

故障文本

要点：显示器故障形式的文本
场景：「错误提示」
兼容：data-*、attr()、animation
代码：在线演示

换色器

要点：通过拾色器改变图像色相的换色器
场景：「图片色彩变换」
兼容：mix-blend-mode
代码：在线演示

状态悬浮球

要点：展示当前状态的悬浮球
场景：「状态动态显示」、「波浪动画」
兼容：gradient、animation
代码：在线演示

粘粘球

要点：相交粘粘效果的双球回弹运动
场景：「粘粘动画」
兼容：filter、animation
代码：在线演示

商城票券

要点：边缘带孔和中间折痕的票劵
场景：「电影票」、「代金券」、「消费卡」
兼容：gradient
代码：在线演示

倒影加载条

要点：带有渐变倒影的加载条
场景：「加载提示」

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

4278)]
[外链图片转存中…(img-1Q04I66W-1711869864278)]
[外链图片转存中…(img-kFKv5yhx-1711869864279)]
[外链图片转存中…(img-Xw0WTR8d-1711869864280)]
[外链图片转存中…(img-RTl5tYIa-1711869864280)]