2024年最全20道高频CSS面试题快问快答，前端系统工程师面试宝典

2401_84447417

于 2024-05-14 06:31:11 发布

阅读量561

点赞数 17

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447417/article/details/138833458

版权

程序员专栏收录该内容

151 篇文章 0 订阅

订阅专栏

计算机网络

HTTP 缓存
你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？
HTTP 常用的请求方式，区别和用途？
HTTPS 是什么？具体流程
三次握手和四次挥手
你对 TCP 滑动窗口有了解嘛？
WebSocket与Ajax的区别
了解 WebSocket 嘛？
HTTP 如何实现长连接？在什么时候会超时？
TCP 如何保证有效传输及拥塞控制原理。
TCP 协议怎么保证可靠的，UDP 为什么不可靠？

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

算法

链表
字符串
数组问题
二叉树
排序算法
二分查找
动态规划
BFS
栈
DFS
回溯算法
Flow布局
Flexbox布局
Grid布局
Position布局
Table布局
等

4. CSS中的Flexbox布局和Grid布局的区别是什么？

Flexbox布局和Grid布局都是CSS中的高级布局模型，但它们适用于不同的情况。

Flexbox布局适用于一维布局，而Grid布局适用于二维布局。Flexbox布局更适用于元素的垂直排列和对齐，而Grid布局更适用于创建复杂的二维布局。

5. 什么是CSS中的BFC（Block Formatting Context）？

BFC是一个Web页面的渲染区域，并且它具有一些规则，决定了其子元素如何布局，以及与其他元素之间的关系和相互作用。要创建BFC。

可以使用以下方法：

为根元素设置overflow: auto；
将display设置为table；
将display设置为flex或grid；
将元素的width设置为一个百分比值；
为元素设置column-count或column-width属性。

6. CSS中的动画和过渡的区别是什么？

CSS中的动画和过渡都可以创建动态效果，但它们之间存在区别。

过渡是状态之间的平滑变化，它可以在一定的时间范围内应用一种新的样式变化，并产生动画效果。而动画则可以创建更复杂的变化和效果，可以在关键帧之间进行插值，并使用时间函数来控制变化的速度。

7. 什么是CSS中的预处理器和后处理器？它们的作用是什么？

CSS预处理器是一种编程语言，可以扩展CSS的功能，例如变量、嵌套规则、混合等，常见的CSS预处理器有Sass、Less等。

它们的作用是简化CSS编写和组织样式表。CSS后处理器是一种将CSS代码转换成更高级别的抽象语法树（AST），以便进行进一步分析和处理的工具，例如PostCSS、Stylelint等。它们的作用是自动化处理CSS代码，例如自动添加浏览器前缀、代码压缩等。

8. 什么是CSS中的跨浏览器兼容性？如何实现跨浏览器兼容性？

CSS中的跨浏览器兼容性是指确保网页在各种不同的浏览器和设备上能够正确显示和运行的能力。

为了实现跨浏览器兼容性，可以使用一些技巧和工具，例如使用重置CSS样式表、使用浏览器前缀、进行跨浏览器测试等。

9. CSS中的重置CSS样式表的作用是什么？如何创建重置CSS样式表？

重置CSS样式表的作用是消除浏览器默认样式的差异，使得不同浏览器的显示效果更加一致。

要创建重置CSS样式表，可以使用以下方法：使用现有的重置样式表；手动创建重置样式表；使用normalize.css或Reset.css等现有的重置工具。

10. 什么是CSS中的模块化？有哪些模块化方案？

CSS中的模块化是指将CSS代码划分为多个独立的文件或模块，以便更好地组织和管理样式表。模块化可以提高代码的可维护性和复用性。

常见的模块化方案包括：

BEM（块、元素、修饰符方法）
SMACSS（面向场景的模块化架构和分类系统）
Atomic CSS（原子类）等。

11. 如何实现一个三角形？

可以利用 CSS 的 border 属性来实现三角形。

例如，一个向下的三角形可以这样写：

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
}

12. 如何实现一个圆形？

可以利用 CSS 的 border-radius 属性来实现圆形。

例如，一个半径为 50px 的圆形可以这样写：

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

13. 如何实现一个渐变背景？

可以利用 CSS 的 linear-gradient 或 radial-gradient 属性来实现渐变背景。

例如，一个从上到下的渐变背景可以这样写：

.gradient {
  background: linear-gradient(to bottom, #000, #fff);
}

14. 如何实现一个水平垂直居中的元素？

可以利用 CSS 的 position 和 transform 属性来实现水平垂直居中。

例如，一个宽高为 100px 的元素可以这样写：

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

15. 如何实现一个响应式布局？

可以利用 CSS 的媒体查询和弹性布局来实现响应式布局。

例如，一个在不同屏幕尺寸下显示不同布局的页面可以这样写：

@media screen and (max-width: 768px) {
  .container {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .container {
    display: flex;
    flex-direction: row;
  }
}

16. 如何实现一个固定在页面底部的元素？

可以利用 CSS 的 position 和 bottom 属性来实现固定在页面底部的元素。

例如，一个固定在页面底部的按钮可以这样写：

.button {
  position: fixed;
  bottom: 0;
  width: 100%;
}

17. 如何实现一个悬浮在页面右下角的元素？

可以利用 CSS 的 position 和 right、bottom 属性来实现悬浮在页面右下角的元素。

例如，一个悬浮在页面右下角的提示框可以这样写：

.tooltip {
  position: fixed;
  right: 10px;


**TCP协议**

- TCP 和 UDP 的区别？
- TCP 三次握手的过程？
- 为什么是三次而不是两次、四次？
- 三次握手过程中可以携带数据么？
- 说说 TCP 四次挥手的过程
- 为什么是四次挥手而不是三次？
- 半连接队列和 SYN Flood 攻击的关系
- 如何应对 SYN Flood 攻击？
- 介绍一下 TCP 报文头部的字段
- TCP 快速打开的原理(TFO)
- 说说TCP报文中时间戳的作用？
- TCP 的超时重传时间是如何计算的？
- TCP 的流量控制
- TCP 的拥塞控制
- 说说 Nagle 算法和延迟确认？
- 如何理解 TCP 的 keep-alive？

![](https://img-blog.csdnimg.cn/img_convert/86915c9ca2cdbf00cefe728c833594f4.webp?x-oss-process=image/format,png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

#### 浏览器篇

- 浏览器缓存?
- 说一说浏览器的本地存储？各自优劣如何？
- 说一说从输入URL到页面呈现发生了什么？
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全？
- 实现事件的防抖和节流？
- 实现图片懒加载？

![](https://img-blog.csdnimg.cn/img_convert/27cf93fa39624acbf610a58fbaf4a463.webp?x-oss-process=image/format,png)



[外链图片转存中...(img-XkQOBeKb-1715639447365)]

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

#### 浏览器篇

- 浏览器缓存?
- 说一说浏览器的本地存储？各自优劣如何？
- 说一说从输入URL到页面呈现发生了什么？
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全？
- 实现事件的防抖和节流？
- 实现图片懒加载？

[外链图片转存中...(img-hnPYP7Em-1715639447366)]

2401_84447417

关注

17
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
2024年最全20道高频CSS面试题快问快答，前端系统工程师面试宝典

BFC是一个Web页面的渲染区域，并且它具有一些规则，决定了其子元素如何布局，以及与其他元素之间的关系和相互作用。要创建BFC。为根元素设置将display设置为table；将display设置为flex或grid；将元素的width设置为一个百分比值；为元素设置column-count或column-width属性。CSS预处理器是一种编程语言，可以扩展CSS的功能，例如变量、嵌套规则、混合等，常见的CSS预处理器有Sass、Less等。它们的作用是简化CSS编写和组织样式表。
复制链接

扫一扫