CSS面试题总结，助（祝）2024成功拿到offer，征服前端面试官

3、属性继承

（1）所有元素可继承：visibility、cursor
（2）块级元素可继承： text-indent 、 text-align
（3）内联元素可继承：
①字体系列属性：font、 font-family 、 font-size 、font-style、font-variant、font-weight、font-stretch、font-size-adjust
②除text-indent、text-align之外的文本系列属性：
letter-spacing、word-spacing、 white-space 、 line-height 、 color 、text-transform、direction

扩展：
不可继承的样式属性：

1、display
2、文本属性：vertical-align、 text-decoration 、text-shadow、unicode-bidi
3、盒子模型属性：border、padding、margin、width、height
4、背景属性：background
5、定位属性：float、clear、position
6、生成内容属性：content
7、轮廓样式属性：outlien-style
8、页面样式属性：size
9、声音样式属性：pause-before

5，行内元素和块级元素举几个例子？

行内元素：span,a,var ,em,input,img,img,textarea,em,strong,select,lable
块级标签：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr

6，伪类和伪元素？

伪类： :active :focus :hover :link :visited :first-child
伪元素： :before :after :first-letter :first-line

7，placeholder的实现？
3种方案：
1）为input添加一个兄弟节点span，并为span设置绝对定位（父节点为position: relative;），使其位于input之上。

2）为添加一个属性phText=“手机号码/邮箱地址”。默认状态下，value值为提示文本并且颜色为灰色；
获得焦点时，若value值等于phText属性值，则value值置空；失去焦点时，若value值为空，则value值为提示文本。

3）把placeholder值赋给并且颜色置为灰色，然后获得焦点时判断value值等于placeholder值的话，把光标移至最前面（this.createTextRange和this.setSelectionRange）。当发生输入操作时，先把value值置为空，然后再接收输入值。另外，对于 要为其新增一个 用来显示提示文本，当发生输入操作时，需要把 隐藏，然后把 显示出来并让其获得焦点。此方案也有一些小缺陷，那就是当用鼠标右键粘贴时会出现bug。

8，写出ul、ol、dl三种列表的html结构？

ul：unordered list, 无序列表

ol：ordered list, 有序列表

dl：definition list, 定义列表

计算机

用来计算的仪器...

显示器

以视觉方式显示信息的装置...

9，svg和canvas的区别？

1）canvas时h5提供的新的绘图方法 ；svg已经有了十多年的历史

2）canvas画图基于像素点，是位图，如果进行放大或缩小会失真 ；svg基于图形，用html标签描绘形状，放大缩小不会失真

3）canvas需要在js中绘制 ；svg在html绘制

4）canvas支持颜色比svg多 5、canvas无法对已经绘制的图像进行修改、操作 ；svg可以获取到标签进行操作

10，flex实现原理？
1）容器上有主轴和纵轴的概念，默认主轴（main-axis）是横向，从左到右，纵轴是竖向，从上到下。

2）其中所有的孩子的布局都会受到这两个轴的影响。

3）有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。

11，src与href的区别？
1）href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超
链接。
2）src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

有需要的可以点击这里免费领取面试题文档，包括CSS面试题总结，JavaScript经典面试题，Vue面试题汇总等等，都可以免费领取！！！

css盒模型

1，css盒模型基本概念？
2，标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的？
3，css如何设置这两种模型？
4，js如何设置获取盒模型对应的宽和高？
5，实例题（根据盒模型解释边距重叠）
6，#sec的子元素是.child,说出下面的值？

BFC（边距重叠解决方案）

1，BFC的基本概念？
2，BFC原理/ BFC渲染规则？
3，如何创建BFC？
4，BFC的使用场景？

css浮动

1，css浮动原理？
2，浮动元素引起的问题？
3，css清除浮动的方法？

css经典布局

1，三栏布局：左右各300px,中间自适应？
2，圣杯布局
3，双飞翼布局
4，css水平、垂直居中的写法，请至少写出4种？

自适应

1，经常遇到的css兼容性的问题在哪些？如何解决的？

css兼容

1，经常遇到的css兼容性的问题在哪些？如何解决的？

css hack

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

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

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

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

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

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算

开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算**