2024年Web前端最全CSS 基础语法，高级前端开发面试解答

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

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

理论上来说 style 放到 html 的哪里都行；但是一般都是放到 head 标签中

p标签内容

| 优点 | 缺点 |

| — | — |

| 这样做能够让样式和页面结构分离 | 分离的还不够彻底. 尤其是 css 内容多的时候 |

2.行内样式表

---

通过 style 属性，来指定某个标签的样式

只适合于写简单样式，只针对某个标签生效

p标签内容

这种写法优先级较高，会覆盖其他的样式:

| 优点 | 缺点 |

| — | — |

| 只适合于写简单样式，只针对某个标签生效 | 不能写太复杂的样式. 这种写法优先级较高, 会覆盖其他的样式 |

3.外部样式

---

实际开发中最常用的方式:

1. 创建一个 css 文件.

2. 使用 link 标签引入 css

< link rel=“stylesheet” href=“[CSS文件路径]”>

1.创建 css 文件:

p {

color: red;

font-size: 30px;

}

2.使用 link 标签:

p标签内容

| 优点 | 缺点 |

| — | — |

| 样式和结构彻底分离 | 受到浏览器缓存影响, 修改之后 不一定 立刻生效 |

浏览器缓存:

网络访问一些静态的资源 (内容不会变化的文件，如 html 文件，css 文件，js 文件等)，浏览器为了提高性能，就提前缓存这些内容到磁盘上，下次访问发现访问的还是不会变的内容，就直接从本地获取，从而提高访问效率

使用 ctrl + F5 强制刷新，强制浏览器重新获取 css 文件

CSS 选择器

==================================================================

CSS 选择器详解 - 点击跳转

---

CSS 选择器详解

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 删除线 [不常用]

举例:

啥都没有

上划线

删除线

下划线

文本缩进 & 行高

1. 缩进:

控制段落的 首行 缩进 (其他行不影响)

text-indent: [值];

举例:

首行向右缩进2个文字

首行向左缩进2个文字

注意事项

• 单位可以使用 px 或者 em.

• 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.

• 缩进可以是负的，表示往左缩进.

2. 行高

行高指的是上下文本行之间的基线距离

line-height: [值];

注意事项

• 行高 = 上边距 + 下边距 + 字体大小

• 行高也可以取 normal 等值

• 行高等与元素高度，就可以实现文字居中对齐

举例:

行高效果:

行高效果:

背景属性

---

背景颜色

默认是 transparent (透明) 的，可以通过设置颜色的方式修改

background-color: [指定颜色]

举例:

背景图片 & 背景平铺

1. 背景图片

比 image 更方便控制位置(图片在盒子中的位置)

background-image: url(…);

举例:

注意事项

• url 不要遗漏.

• url 可以是绝对路径，也可以是相对路径

• url 上可以加引号，也可以不加.

2. 背景平铺

background-repeat: [平铺方式]

重要取值: 默认是 repeat

• repeat: 平铺

• no-repeat: 不平铺

• repeat-x: 水平平铺

• repeat-y: 垂直平铺

背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

举例:

不平铺

水平平铺

垂直平铺

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

背景颜色的上方

举例:

不平铺

水平平铺

垂直平铺

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

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

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！