2024年最新03----3小时 用 websocket 实现聊天室 之项目静态页面搭建(1)，2024年最新一份非常适合收藏的前端进阶面试题

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

前端面试题汇总

JavaScript

按下Ctrl+Enter发送

发送

css

---

• {

margin: 0;

padding: 0;

list-style: none;

}

html,

body {

height: 100%;

}

body {

background: url(‘…/images/bg.jpg’) no-repeat center center;

background-size: cover;

}

.container {

max-width: 1000px;

min-width: 800px;

height: 100%;

margin: 0 auto;

background-color: pink;

}

.user-list {

width: 280px;

height: 100%;

float: left;

position: relative;

background-color: #2e3238;

}

.box {

overflow: hidden;

height: 100%;

background-color: #eee;

position: relative;

}

.box-hd {

text-align: center;

position: absolute;

top: 0;

left: 0;

width: 100%;

line-height: 30px;

}

.box-hd h3 {

font-size: 18px;

font-weight: 400;

padding: 10px 0;

margin: 0 20px;

border-bottom: 1px solid #ccc;

z-index: 999;

box-sizing: border-box;

}

.message-box {

overflow: hidden;

}

.box-bd {

position: absolute;

width: 100%;

bottom: 180px;

top: 51px;

overflow-y: auto;

overflow-x: hidden;

}

.system {

overflow: hidden;

}

.message_system {

text-align: center;

margin: 10px auto;

max-width: 50%;

}

.message_system .content {

display: inline-block;

font-size: 12px;

padding: 1px 18px;

color: #b2b2b2;

border-radius: 2px;

}

.other {

margin-bottom: 16px;

float: left;

width: 100%;

padding-left: 20px;

box-sizing: border-box;

}

.my {

margin-bottom: 16px;

float: right;

width: 100%;

text-align: right;

padding-right: 20px;

box-sizing: border-box;

}

.my.message .avatar {

float: right;

}

.message .content {

overflow: hidden;

}

.message .content .nickname {

font-weight: 400;

padding-left: 10px;

font-size: 12px;

height: 22px;

line-height: 24px;

color: #4f4f4f;

width: 350px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

word-wrap: normal;

}

.message .avatar {

width: 40px;

height: 40px;

border-radius: 2px;

float: left;

cursor: pointer;

}

.my.message .bubble {

background-color: #b2e281;

}

.message .bubble {

max-width: 500px;

min-height: 1em;

display: inline-block;

vertical-align: top;

position: relative;

text-align: left;

font-size: 14px;

border-radius: 3px;

margin: 0 10px;

background-color: #fff;

}

.message .bubble img {

display: inline-block;

cursor: pointer;

max-width: 350px;

max-height: 240px;

}

.other .bubble:before {

position: absolute;

top: 14px;

left: -10px;

border: 6px solid transparent;

content: ’ ';

border-right-color: #fff;

border-right-width: 4px;

}

.my .bubble:before {

position: absolute;

top: 14px;

right: -10px;

border: 6px solid transparent;

content: ’ ';

border-left-color: #b2e281;

border-left-width: 4px;

}

.bubble_cont {

word-wrap: break-word;

word-break: break-all;

min-height: 25px;

padding: 9px 13px;

}

.box-ft {

border-top: 1px solid #ccc;

position: absolute;

height: 180px;

bottom: 0;

right: 0;

left: 0;

}

.box-ft .toolbar {

height: 30px;

padding: 5px 20px;

}

.box-ft .toolbar .face {

display: inline-block;

vertical-align: middle;

width: 30px;

height: 30px;

background: url(‘…/images/wechat-sprit.png’) no-repeat -404px -398px;

}

.box-ft .toolbar .screen-cut {

display: inline-block;

vertical-align: middle;

width: 30px;

height: 30px;

background: url(‘…/images/wechat-sprit.png’) no-repeat -30px -432px;

}

.box-ft .toolbar .file label {

opacity: 0;

width: 100%;

height: 100%;

display: block;

cursor: pointer;

background: rgb(255, 255, 255);

}

.box-ft .toolbar .file {

display: inline-block;

vertical-align: middle;

width: 30px;

height: 30px;

background: url(‘…/images/wechat-sprit.png’) no-repeat -120px -432px;

}

.box-ft .content {

height: 90px;

overflow-x: hidden;

padding: 0px 20px;

}

.box-ft .content .text {

resize: none;

border: none;

outline: none;

width: 100%;

height: 84px;

font-size: 16px;

background-color: #eee;

}

.box-ft .action {

text-align: right;

margin-top: 5px;

padding-right: 20px;

}

.box-ft .action .desc {

color: #888;

font-size: 12px;

margin-left: 10px;

margin-right: 7px;

}

.btn-send {

display: inline-block;

border: 1px solid #c1c1c1;

text-decoration: none;

background-color: #fff;

color: #222;

border-radius: 4px;

padding: 3px 30px;

font-size: 14px;

}

.btn-send:hover {

background-color: #d8d8d8;

}

.header {

padding: 18px;

position: relative;

}

.header .avatar {

display: table-cell;

vertical-align: middle;

word-wrap: break-word;

word-break: break-all;

white-space: nowrap;

padding-right: 10.625px;

}

.header .avatar .img {

width: 40px;

height: 40px;

border-radius: 2px;

display: block;

cursor: pointer;

}

.header .info {

display: table-cell;

vertical-align: middle;

word-wrap: break-word;

word-break: break-all;

width: 2000px;

}

.header .info h3 {

display: inline-block;

font-weight: 400;

width: 156px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

word-wrap: normal;

color: #fff;

font-size: 18px;

vertical-align: top;

line-height: 31px;

text-decoration: none;

}

.title {

padding: 13px 18px 11px;

border-bottom: 1px solid #24272c;

border-top: 1px solid #24272c;

color: #fff;

}

.title h3 {

font-weight: 400;

font-size: 18px;

}

最后

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

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

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

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