2024年前端最全2024css面试题理论题必修课经典面试题(1)，前端架构师必备框架技能核心笔记

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总

有没有创建一个文档树之外的元素(伪类的操作对象是文档树中已有的元素,伪元素则创建了一个文档树外的元素)

:before是CSS2的写法，::before是CSS3的写法

:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

-----------------------------------------------------

举例:

伪元素:

::after

::before

::first-letter

::first-line

::selection

::backdrop

伪类:

:root ------------------------------ 文档的根

:nth-child(n) --------------------- 作为其父元素的第n个孩子的一个元素

:nth-last-child(n) ---------------- 作为其父元素的第n个孩子的一个元素，从最后一个数起

:nth-of-type(n) ------------------ 作为其类型的第n个兄弟的一个元素

:nth-last-of-type(n) ----------- 作为其类型的第n个兄弟的一个元素，从最后一个数起

:first-child ---------------------- 作为其父元素的第1个孩子的一个元素

:last-child ----------------------- 作为其父元素的最后1个孩子的一个元素

:first-of-type -------------------- 作为其类型的第1个兄弟的一个元素

:last-of-type ------------------- 作为其类型的第1个兄弟的一个元素，从最后一个数起

:only-child -------------------- 作为其父元素的唯一1个孩子的一个元素

:only-of-type ------------------- 作为其类型的唯一1个兄弟的一个元素

:empty -------------------------- 没有孩子或文本的一个元素

:link{ color:red;}

:visited{ color:blue;}

:hover{ color:black;}

:active{ color:#6600CC;}

19. 什么是回流什么是重绘以及区别？

回流:

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree.

重绘:

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘.

区别:

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流

当页面布局和几何属性改变时就需要回流

20. rgba、opacity、transparent透明效果有什么区别？

rgba()、opacity、transparent都能实现透明效果.

opacity 用来设置元素的不透明级别，从 0.0 （完全透明）到 1.0（完全不透明），属性的所有后代元素都会继承 opacity 属性.

rgba()只作用于当前元素，后代元素不会继承透明属性.

transparent 是颜色的一种，这种颜色叫透明色

21. CSS Sprites使用步骤？为什么使用CSS Sprites？

使用步骤:

1. css 精灵图，把一堆小的图片整合到一张大的图片（png）上

2. 再利用css的"background-image","background-position"的组合进行背景定位

为什么要使用css sprites:

1. css精灵把一堆小的图片整合到一张大的图片上，减少请求次数减轻服务器压力

2. 合理的组合为一张图片，比多张图片总体要小

缺点：

1. 图片合并稍显麻烦

2. 维护麻烦，修改一个图片可能需要重新布局整个图片，样式

22. 上下margin重合问题：两个元素，垂直布局，第一个margin-bottom：30px;第二个margin-top：50px;，请问这两个元素垂直之间的间距是多少？

· 问题（按说之间的间距应该是80px）

· 解决方案（按说之间的间距应该是80px）

消除边距重叠，添加一个父元素，在父元素上创建bfc

23. 什么是标签语义化？标签语义化有什么好处？

什么是标签语义化:

标签语义化就是给某块内容用上最恰当合适的标签

标签语义化的好处:

有利于搜索引擎优化，网页良好的结构和语义自然容易被搜索引擎收录

24. 怎么让Chrome支持小于12px的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

25. display有哪些值分别是什么意思？

| 值 | 描述 |

| — | — |

| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |

| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |

| none | 此元素不会被显示（隐藏）。 |

| inline-block | 行内块元素。（CSS2.1 新增的值） |

| list-item | 此元素会作为列表显示。 |

| table | 此元素会作为块级表格来显示（类似table），表格前后带有换行符 |

26. 用纯CSS实现三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式为透明，代码如下:

div{

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #ff0000;

}

2种更简单

div{

width: 0;

height: 0;

border: 100px solid transparent;

border-bottom-color:red;

}

27. CSS overflow属性溢出元素内容区的内容会如何处理？

参数是scroll时候，必会出现滚动条

参数是auto时候，子元素内容大于父元素时出现滚动条

参数是visible时候，溢出的内容出现在父元素之外

参数是hidden时候，溢出隐藏

28. style标签写在body前和body后有什么区别？

页面加载自上而下 当然是先加载样式.

写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导

致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

29. 引入CSS的方式有哪几种？

1. 内嵌式

通过来书写CSS代码

只能应用于当前网页，不能被其它网页共享。

2. 外联式

通过标记来引入外部的CSS文件

可以被其它网页共享。

3. 行内样式

通过style的属性来把CSS样式写在标签上

4. 导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件

@import url(style.css)

30. CSS样式外联式和导入式有什么区别？

引入方式不同:

link(外部引用):

@import(导入式): @import url(xxx.css)

放置位置不同:

link 一般放在 head 标签中，而 @import 必须放在

加载方式不同:

link 会和 dom 结构一同加载渲染，而 @import 只能等 dom 结构加载完成以后才能加载渲染页面。

兼容性不同:

@import 只能在 IE6 以上才能识别，而 link 是 XHTML 标签，无兼容问题

改变样式:

link 支持使用 JavaScript 改变样式，而 @import 不可以

31. 在任何浏览器中，图片为何都会有间距？如何解决？

根本原因在于img标签为inline元素，该元素默认垂直对齐方式为以父元素的baseline，但是展示时又是以bottomline为对齐方式，因此造成了上下两个img标签之间的间隙

解决方案:

1. 将其改变为block元素，但是该方法太过粗暴，相当于从根本上改变了img

img { display:block}

2. 改变其垂直对齐方式

img {vertical-align:top;}

3. 把父元素的文字大小设置为0

div {font-size:0};

32.line-height和height的区别

line-height一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，

height一般是指容器的整体高度

33.设置一个元素的背景颜色，背景颜色会填充哪些区域？

background-color设置的背景颜色会填充元素的content、padding、border区域，

34.知道属性选择器和伪类选择器的优先级吗

属性选择器和伪类选择器优先级相同

35.设置中英文之间字词的间距

word-spacing: 词间距 英文单词之间

letter-spacing:字间距 所有字符之间

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

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系/方便计算

37.form中method属性的属性值有哪两个？优缺点是什么？

post, get

post:安全级别高，速度慢,传输信息量大

get:安全级别低，速度快,传输信息量少

38.单选按钮如何实现单选效果？

设置相同的name属性值

39.float 对块属性标签的影响？

浮动可以使块元素脱离文档流，在一行显示。

40.复选框和单选按钮默认被选中的属性是什么？下拉框中的选项被选中是什么？

checked

selected

41.文字样式属性有哪些

font-size font-family font-style font-weight color

42.设定单元格可跨列合并的属性是?设定单元格可跨行合并的属性是?

colspan, rowspan,

43.写出背景图片重复的属性及属性值。

background-repeat: repeat no-repeat repeat-x repeat-y

44.Web标准的组成部分是什么？

HTML + CSS + JS(JavaScript)

45.设置段落的垂直对齐方式

vertical-align :middle, top ,bottom

46. z-index的定位方法

z-index属性设置元素的堆叠顺序。z-index只有在定位的情况下使用，取值是正值到负值还有auto，默认，堆叠顺序与父元素相等，number，inherit，从父元素继承z-index属性的值，默认值是0.z-index值越大离用户越近。

47.div+css布局优点？

1、符合W3C标准

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

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