[轻松拿offer]Web前端面试真题CSS系列---带详解！，2024年最新中高级前端面试题及答案

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

父级 div 定义 height

结尾处加空 div 标签 clear:both

父级 div 定义伪类 :after 和 zoom

父级 div 定义 overflow:hidden

父级 div 也浮动，需要定义宽度

结尾处加 br 标签 clear:both

8 为什么要初始化CSS样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化

往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对 SEO 有⼀定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

9 css3有哪些新特性

新增各种 css 选择器

圆角 border-radius

多列布局

阴影和反射

文字特效 text-shadow

线性渐变

旋转 transform

10 CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:after 在元素之前添加内容,也可以用来做清除浮动。

:before 在元素之后添加内容。

:enabled 已启用的表单元素。

:disabled 已禁用的表单元素。

:checked 单选框或复选框被选中

11 display有哪些值？说明他们的作用

block 转换成块状元素。

inline 转换成行内元素。

none 设置元素不可见。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

table 此元素会作为块级表格来显示

inherit 规定应该从父元素继承 display 属性的值

12 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

有两种， IE 盒子模型、 W3C 盒子模型；

盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；

区 别： IE 的c ontent 部分把 border 和 padding 计算了进去;

13 CSS优先级算法如何计算？

优先级就近原则，同权重情况下样式定义最近者为准

载入样式以最后载入的定位为准

优先级为: !important > id > class > tag ;

!important 比内联优先级高

14 谈谈浮动和清除浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

15 position的值， relative和absolute定位原点是

absolute ：生成绝对定位的元素，相对于static 定位以外的第一个父元素进行定位

fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位

relative ：生成相对定位的元素，相对于其正常位置进行定位

static 默认值。没有定位，元素出现在正常的流中

inherit 规定从父元素继承 position 属性的值

16 display:inline-block 什么时候不会显示间隙？(携程)

移除空格

使用 margin 负值

使用 font-size:0

letter-spacing

word-spacing

17 PNG\GIF\JPG的区别及如何选

1.GIF

8 位像素，256色

无损压缩

支持简单动画

支持 boolean 透明

适合简单动画

2.JPEG

颜色限于 256

有损压缩

可控制压缩质量

不支持透明

适合照片

3.PNG

有 PNG8 和 truecolor PNG

PNG8 类似 GIF 颜色上限为 256 ，文件小，支持 alpha 透明度，无动画

适合图标、背景、按钮

18 行内元素float:left后是否变为块级元素？

行内元素设置成浮动之后变得更加像是 inline-block （行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

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

偶数字号相对更容易和 web 设计的其他部分构成比例关系

20 ::before 和 :after中双冒号和单冒号 有什么区别？解释一下这两个伪元素的作用

单冒号( : )用于 CSS3 伪类，双冒号( :: )用于 CSS3 伪元素

用于区分伪类和伪元素

21 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms

22 CSS合并方法

避免使用 @import 引入多个 css文件，可以使用 CSS 工具将 CSS 合并为一个 CSS 文件，例如使用 Sass\Compass 等

23 CSS不同选择器的权重(CSS层叠的规则)

！important 规则最重要，⼤于其它规则行内样式规则，加 1000

对于选择器中给定的各个 ID 属性值，加 100

对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10

对于选择其中给定的各个元素标签选择器，加1

如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则

24 列出你所知道可以改变页面布局的属性

position 、 display 、 float 、 width 、 height 、 margin 、 padding 、top 、 left 、 right 、

25 CSS在性能优化方面的实践

css 压缩与合并、 Gzip 压缩

css文件放在 head 里、不要用 @import

尽量用缩写、避免用滤镜、合理使用选择器

26 CSS3动画（简单动画的实现，如旋转等）

依靠 CSS3 中提出的三个属性： transition 、 transform 、 animation

transition ：定义了元素在变化过程中是怎么样的，包含 transition-property 、transition-duration 、 transition-timing-function 、 transition-delay 。

transform ：定义元素的变化结果，包含 rotate 、 scale 、 skew 、 translate 。

animation ：动画定义了动作的每⼀帧（ @keyframes ）有什么效果，包括animationname ， animation-duration 、 animation-timing-function 、 animationdelay 、 animation-iteration-count 、 animation-direction

27 base64的原理及优缺点

优点可以加密，减少了 HTTTP 请求

缺点是需要消耗 CPU 进行编解码

28 几种常见的CSS布局

流体布局

.left {

float: left;

width: 100px;

height: 200px;

background: red;

}

.right {

float: right;

width: 200px;

height: 200px;

background: blue;

}

.main {

margin-left: 120px;

margin-right: 220px;

height: 200px;

background: green;

}

圣杯布局

.container {

margin-left: 120px;

margin-right: 220px;

}

.main {

float: left;

width: 100%;

height:300px;

background: green;

}

.left {

position: relative;

left: -120px;

float: left;

height: 300px;

width: 100px;

margin-left: -100%;

background: red;

}

.right {

position: relative;

right: -220px;

float: right;

height: 300px;

width: 200px;

margin-left: -200px;

background: blue;

文末

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

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

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

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

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

前端面试题汇总

JavaScript

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
afe404cb51d1.png)

前端面试题汇总

JavaScript

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-JPw7STSx-1713418507359)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！