2024年前端最全【前端随记01】纯css自定义checkbox复选框样式，算法题面试

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

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

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

2. 隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素。

由于，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着可以通过label的点击事件来处理我们的Checkbox复选框。

因此，一个label不足以完成任务，我们用一个DIV元素包含checkbox，我们需要使用它们来做样式。

.checkBox {

position: relative;

width: 0.48rem;

height: 0.48rem;

background: #ffffff;

}

3. label标签用于Click事件和我们要定义的复选框的方框样式。

.checkBox label {

cursor: pointer;

position: absolute;

width: 0.48rem;

height: 0.48rem;

top:0;

left: 0;

background: #ffffff;

border: 0.01rem solid #c2c2c2;

border-radius: 0.04rem;

}

4. 接下来，我们要创建方框中的对勾，对于这一点，我们可以使用:after伪类创建一个新的元素，为了实现这个样式，我们可以创建一个的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下，这样看起来就像是一个对勾。

.checkBox label:after {

opacity: 0.5; /修改为0/

content: ‘’;

position: absolute;

width: 0.3rem;

height: 0.2rem;

background: transparent;

top: 0.09rem;

left: 0.07rem;

border: 0.05rem solid #2381D8;

border-top: none;

border-right: none;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

}

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容