Web前端最新2024 最新 Web 前端经典面试试题及答案——CSS篇，阿里后端面试题

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

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

• float 的值不为 none

• position 的值为 absolute 或 fixed

• overflow 的值不为 visible

• display 的值不为 inline-block 、flex、inline-flex

1.2、BFC的特性

• 内部的 box 会在垂直方向，一个接一个的放置。

• box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠

• BFC 的区域不会与浮动区域的 box 重叠

• BFC 在页面上是一个独立的容器，外面的元素不会影响 BFC 内的元素，里面的子元素也不会影响外边元素。

• 计算 BFC 的高度时，浮动元素也会参与计算

1.3、BFC 的作用

• 取消盒子的 margin 塌陷

• 清除内部浮动，不会影响外面元素，可以阻止元素被浮动元素覆盖。

二、两栏布局，有几种实现方式？

---

常见的有 5 种方式，分别为：

• flex 布局

• grid 布局

• 圣杯布局

• 双飞翼布局

• 系统的浮动布局

2.1、使用 flex 布局

使用 flex 布局，是目前主流的方式。

实现方式：父容器设置 display:flex，定宽元素设置 width，自适应的子元素设置 flex:1 或 flex-grow:1。

2.2、使用 grid 布局

实现方式：父级元素设置 display:grid ，使用 grid-template-columns 和 grid-template-rows 设置格子，子项设置 grid-column 和 grid-row 设置在格子中的位置。IE 不支持这种，如果项目需要兼容 IE 浏览器，就不能选它了。

2.3、圣杯布局

实现方式：定宽元素和自适应元素都设置左浮，自适应元素设置宽度 100% ,定宽元素设置固定宽度，定宽元素因为 DOM 位置靠后被挤下去，给定宽元素设置 margin-left:-100% 此时定宽元素和自适应元素左侧重叠，给容器设置 padding-left 的值为定宽元素宽度，给定宽元素设置定位和固定宽度。

圣杯布局本质上利用了浮动和负 margin 的特性，同时也有一个要求，自适应元素的宽度最小不能小于固定宽度侧边栏的宽度，否则会出现错乱。

2.4、双飞翼布局

解决了圣杯布局自适应元素宽度小于固定宽度侧边栏时出现错乱的问题。

实现方式：给自适应元素内再多加一层 div ，定宽元素和自适应元素都设置左浮，自适应元素宽度 100% ,定宽元素设置宽度，margin-left:-100% ，此时定宽元素和自适应元素左侧重叠，给自适应元素内的 div 加 margin 来规避重叠。

2.5、系统的浮动布局

实现方式：定宽元素左浮或右浮，自适应的元素设置 margin 预留空间，为避免父元素高度塌陷，需要给父级元素加清除浮动。

该方式对 DOM 的结构顺序有一定的要求，布局方式较老，现在基本都不用了。

三、什么是 css reset ？

---

它的全称就是 reset.css ，是一个 css 文件，用来重置浏览器默认的 css 样式。

reset 被大厂基本都给抛弃了，什么原因呢？

性能差，使用 resst.css 文件，会把使用到和使用不到的样式文件都加载进来，出现代码冗余，所以被一起企业已经抛弃了。

normalize 与 reset.css 一样，是一个样式的重置库。主要是为了增强跨浏览器渲染的一致性。

四、网页中应该使用奇数还是偶数的字体？为什么呢？

---

答案是：偶数。

原因：

• 偶数让文字在浏览器上更好看。

• ui 给前端的设计图一般都是偶数，这样不管布局也好，转换 px 也好，会方便一些。

感兴趣了，大家找一个左右对称的文字，比如"中"、“十”设置一个偶数一个奇数，观察下。

五、css 优先级算法，如何计算？

---

总结性地回答：

选中且设置 !important 的 > 权重高的 > 权重相同位置靠后的 > 来自继承的。

如果两组选择器都定位到同一元素，且对同一属性设置不同的样式，则需要分别计算两组选择器的权重来确定优先级。

一个选择器的优先级可以由四部分计算得分：

• 千位：如果声明在 style 的属性里，则该部分得一分。

• 百位：选择器包含 id 选择器，则该位得一分。

• 十位：选择器包含类、属性选择器和伪类，则该位得一分。

• 个位：选择器包含标签、伪元素选择器，则该位得一分。

面试题：

爱学习的前端人

答案是：蓝色！

六、css 盒模型是啥？

---

网页中每个元素都占有一定的空间，可以看成盒子，这个盒子的组成有：外边距、元素的边框、元素的内边距、元素的内容，这四个部分一起构成了盒子模型。

css 的盒子模型分为两种：标准盒子模型和 IE盒子模型。

6.1、两种盒子模型的区别：

标准盒子模型的内容有：margin、border、padding、content。

它的 width 一般只包含内容，不包含 padding border 和 margin 。盒子的大小会以内容优先，自动扩展，子元素可以撑开父元素。

（标准）盒子总宽度 = margin + border + padding + width

IE盒子模型的内容有：margin、content （padding + border + content ）

IE 盒子中子元素无法撑开父元素的盒模型，元素的宽度实际上包含了 content 、padding 和 border 。所以：

（IE）盒子总宽度 = margin + width

6.2、通过 css 如何转换呢？

使用 box-sizing 属性可以任意转换盒子模型。具体的属性值有：

1、content-box ：定义盒子为标准盒子模型，也是默认值。

2、border-box ：定义盒子为 IE 盒子模型。

3、inherit ：规定从父元素继承 box-sizing 属性的值。

通过 box-sizing 属性，可以将标准盒子模型和 IE 盒子模型之间进行任意转换。

七、一个盒子不给宽高，水平垂直居中方式有几种？

---

共有 6 种方式，分别为：

1. flex 布局。实现方式为 display:flex 、align-item:center 和 justify-content:center 。

2. flex 布局的另外一种实现方式是 display:flex 和 margin:auto。

3. grid 布局其中一种实现方式为 display:grid 、align-item:center 和 justify-content:center 。

4. grid 布局另外一种实现方式是 display:grid 和 margin:auto。

5. table-cell。实现方式为 display:table-cell 、vertical-align:middle 和 text-align:center 。

6. translate + 绝对定位 。实现方式为相对和绝对定位相结合，绝对定位的元素添加 left:50%、 top:50% 和 transform:translate(-50% , -50%)。

八、css 中的单位有哪些？以及它们之间的区别。

---

css 中的单位共有 15 种。它们可分为两大类：

绝对长度：cm、mm、in、px、pt、pc。

相对长度：ex、ch、em、rpx、rem、vw、vh、vmin、vmax、% 。

它们之间的介绍以及区别：

1、px：像素，是网页内常用的单位，也是基本单位。常听到的电脑像素是 1024*768 ，表示的就是水平方向 1024 个像素点，垂直方向 768 个像素点。

2、rpx：是微信小程序解决自适应屏幕尺寸的尺寸单位，微信小程序规定的屏幕宽度为 750rpx 。rpx 单位可以根据屏幕进行自动适应。

3、em：默认字体大小的倍数。1em 的值并不是固定的，需要根据父级元素字体大小确定。

场景1：字体设置 font-size:2em ，字体大小继承父级元素的字体大小（默认大小是16px）的2倍。

场景2：元素的 width:2em ，这里默认的字体大小是自身元素的字体大小，所以宽度是自身元素字体大小的 2 倍。

4、rem：是相对于根元素 html 。这就意味着，我们只需要设置根元素字体大小，就可以把整个页面进行按比例调整。移动端适配这种方法挺常见的。

5、% ：百分比一般来说都是相对于父级元素的。

css 的新单位：

6、vw：view width 的简写。 1vw 代表浏览器视口宽度的 1% 。如：浏览器的宽度为 1200px ，则 1vw = 12px。

7、vh：view height 的简写。1vh 代表浏览器视口高度的 1% 。如浏览器高度 900px ，则 1vh = 9px。

8、vmin：相对单位，当前 vw 和 vh 中较小的一个值 ，其中较小的被分为 100 份 。

TCP协议

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

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

浏览器篇

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

CP 的拥塞控制

• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

[外链图片转存中…(img-q8CurrgZ-1715899347320)]

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

浏览器篇

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

[外链图片转存中…(img-mkzgL27y-1715899347321)]