总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
前端工程师岗位缺口一直很大,符合岗位要求的人越来越少,所以学习前端的小伙伴要注意了,一定要把技能学到扎实,做有含金量的项目,这样在找工作的时候无论遇到什么情况,问题都不会大。
color: chocolate;
/* 设置文本大小 */
font-size: 30px;
}
p标签内容
| 优点 | 缺点 |
| — | — |
| 这样做能够让样式和页面结构分离 | 分离的还不够彻底. 尤其是 css 内容多的时候 |
通过 style 属性,来指定某个标签的样式
只适合于写简单样式,只针对某个标签生效
p标签内容
这种写法优先级较高,会覆盖其他的样式:
| 优点 | 缺点 |
| — | — |
| 只适合于写简单样式,只针对某个标签生效 | 不能写太复杂的样式. 这种写法优先级较高, 会覆盖其他的样式 |
实际开发中最常用的方式:
-
创建一个 css 文件.
-
使用 link 标签引入 css
< link rel=“stylesheet” href=“[CSS文件路径]”>
1.创建 css 文件:
p {
color: red;
font-size: 30px;
}
2.使用 link 标签:
p标签内容
| 优点 | 缺点 |
| — | — |
| 样式和结构彻底分离 | 受到浏览器缓存影响, 修改之后 不一定 立刻生效 |
浏览器缓存:
网络访问一些静态的资源 (内容不会变化的文件,如 html 文件,css 文件,js 文件等),浏览器为了提高性能,就提前缓存这些内容到磁盘上,下次访问发现访问的还是不会变的内容,就直接从本地获取,从而提高访问效率
使用 ctrl + F5 强制刷新,强制浏览器重新获取 css 文件
==================================================================
===================================================================
设置字体
微软雅黑
宋体
注意事项:
-
字体名称可以用中文,但是不建议
-
多个字体之间使用逗号分隔 (从左到右查找字体,如果都找不到,会使用默认字体)
-
如果字体名有空格,使用引号包裹
-
建议使用常见字体,否则兼容性不好
浏览器和系统不支持的字体,写了也不会生效
字体大小 & 字体粗细
字体大小
微软雅黑
宋体
注意事项:
-
不同的浏览器默认字号不一样,最好给一个明确值. (chrome 默认是 16px)
-
可以给 body 标签使用 font-size
-
要注意单位 px 不要忘记.
-
标题标签需要单独指定大小
字体粗细
微软雅黑
宋体
注意事项:
-
可以使用数字表示粗细.
-
700 = bold, 400 = normal,表示不加粗
-
取值范围是 100 -> 900,数字越大,字体越粗
字体样式
设置倾斜: font-style: italic;
取消倾斜: font-style: normal;
微软雅黑
宋体
文本颜色
设置文本颜色:
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
.
鼠标悬停在 vscode 的颜色上,会出现颜色选择器,可以手动调整颜色
color 属性值的写法:
-
预定义的颜色值(直接是单词)
-
十六进制形式 (最常用) ;如果两两相同,就可以用一个来表示:#ff00ff => #f0f
-
RGB 方式;rgb(0,0,0) — 黑色;rgb(255,255,255) — 白色
文本对齐
控制文字水平方向的对齐.
不光能控制文本对齐,也能控制图片等元素居中或者靠右
-
center: 居中对齐
-
left: 左对齐
-
right: 右对齐
举例:
文本装饰
语法:
text-decoration: [值];
常用取值:
-
underline 下划线. [常用]
-
none 啥都没有. 可以给 a 标签去掉下划线.
-
overline 上划线. [不常用]
-
line-through 删除线 [不常用]
举例:
啥都没有
上划线
删除线
下划线
文本缩进 & 行高
- 缩进:
控制段落的 首行 缩进 (其他行不影响)
text-indent: [值];
举例:
首行向右缩进2个文字
首行向左缩进2个文字
注意事项
-
单位可以使用 px 或者 em.
-
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
-
缩进可以是负的,表示往左缩进.
- 行高
行高指的是上下文本行之间的基线距离
line-height: [值];
注意事项
-
行高 = 上边距 + 下边距 + 字体大小
-
行高也可以取 normal 等值
-
行高等与元素高度,就可以实现文字居中对齐
举例:
背景颜色
默认是 transparent (透明) 的,可以通过设置颜色的方式修改
background-color: [指定颜色]
举例:
背景图片 & 背景平铺
- 背景图片
比 image 更方便控制位置(图片在盒子中的位置)
background-image: url(…);
举例:
注意事项
-
url 不要遗漏.
-
url 可以是绝对路径,也可以是相对路径
-
url 上可以加引号,也可以不加.
- 背景平铺
background-repeat: [平铺方式]
重要取值: 默认是 repeat
-
repeat: 平铺
-
no-repeat: 不平铺
-
repeat-x: 水平平铺
-
repeat-y: 垂直平铺
背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方
举例:
背景位置 & 背景尺寸
- 背景位置
对象篇
模块化编程-自研模块加载器