前端面试题（超全！）

技术猿禁

已于 2024-10-12 17:17:56 修改

阅读量4.8k

点赞数 44

文章标签：前端

于 2024-09-09 15:01:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_57136547/article/details/142059319

版权

一、HTML考题（8题）

1. 前端页面有哪三层构成，分别是什么？作用是什么？

// 前端三层构成：
有三层，分别是：html、css、js，那html为dom，css是样式，js是交互

// 浏览器进程模型：
（1）浏览器是一个大进程，中包含多个进程，进程中也有很多线程。
（2）那么就拿html和css来说，是靠GUI来渲染的，那么如果要避免回流重绘，
     需要靠GPU进程完成，这样性能会好。
（3）js是靠渲染进程的渲染主线程工作的。其中包含：事件执行线程、定时器线程等等。
     而且JS线程和GUI渲染线程互斥，所以就有了js脚本的异步加载操作。

2. 行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

 1. 行内元素：只有宽度，高度随文字大小。
    例如：<span>、<a>、<img>、<b>、<strong>、<em> 等。
 
 2. 块级元素：可以设置宽高，独占一行。
    例如：<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form> 等。
 
 3. 单标签，它们不包含任何内容，但可以有属性。它们通常用于定义结构，不会影响布局。
    例子有：<hr>、<br>、<img>、<input type="hidden">等。

3. 怎么解决2个行内块元素中间的空白

问题描述：

原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

解决方案：

// 方案1：父元素设置font-size:0px（推荐）。
<style>
  .image-container {
    font-size: 0;
  }
</style>

<div class="image-container">
  <img src="image1.jpg" alt="Image 1" />
  <img src="image2.jpg" alt="Image 2" />
</div>

// 方案2：脱离文档流。

4. 页面导入样式时，使用link和@import有什么区别？

1.加载顺序不同：
    link会先加载，多个link按书写顺序加载。 
    @import会在当前页面加载完成后才加载。

2.权重不同：
    link的权重 > @import的权重

3.从属关系不同：
    link 属于 HTML 标签，而 @import 是 CSS 提供的。

4.兼容性问题：
    link 没有兼容性问题，@import 不兼容 ie5 以下。

5. title与h1的区别、b与strong的区别、i与em的区别？

title和h1的区别：

title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么。
h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么。

区别：title他是显示在网页标题上、h1是显示在网页内容上，
      title比h1更重要，用于seo优化。

场景：h1包裹logo。

b和strong、i和em的区别：

区别：b、i只有功能，没有语义； 
     strong、em不仅有功能，也有语义。

题外话：为了符合css3的规范，b尽量少用，改用strong就行了。

6. img标签的title和alt有什么区别？

区别1：title是鼠标移入时显示的提示内容，
       alt是图片没加载出来时显示的提示内容。

区别2：alt用于seo优化(alt > title)。

7. png、jpg、gif 这些图片格式解释一下，分别什么时候用？

一、png：
	特点：png格式支持无损压缩，同样尺寸情况下，体积要比jpg/jpeg的大。
	适用场景：png格式适合保存，需要保持高质量细节和透明背景的图像，如图标、线条图、文字、Logo 等。
	
二、jpg：
	特点：jpg格式支持有损压缩。
	适用场景：jpg式适合保存照片、图像和艺术作品等真实场景图像，常用于网站上发布的照片、背景图等。

三、gif：
	特点：gif格式支持无损压缩和动画功能，能够保存多帧图像并以动画形式显示。
	适用场景：gif格式适合保存简单的动画、图标、表情包等图像。适用于网页上的小型动画、简单图标等。

四、webp：
	特点：webp是一种由 Google 开发的图像格式，支持有损压缩和无损压缩，通常比 PNG 和 JPG 文件大小更小，同时保持较高的图像质量。它还支持动画和透明度。
	适用场景：webp格式适合用于网站优化和速度提升，可以帮助减小图像文件大小，提高网页加载速度。特别适合用于要求高速加载和移动设备访问的网页，可以有效减少网页加载时间。

五、总结：
	PNG 适合保存高质量细节和透明背景的图像
	JPG 适合保存照片和真实场景图像；
	GIF 适合保存简单的动画和图标；
	WebP 适合用于网站优化和速度提升，特别适合要求高速加载和移动设备访问的网页（存在兼容性）。

8. iframe的优点和缺点？

iframe的优缺点：

// 什么是iframe?
用于嵌入另一个 HTML 文档或外部资源（如网页、视频、地图等）到当前页面中。

// 优点：
（1）<iframe> 允许你在一个网页中嵌入来自不同源或服务器的内容。
（2）独立：内嵌的内容在 <iframe> 中运行，与主页面相互隔离，这意味着它不会受到主页面的影响。
（3）简便：使用 <iframe> 非常简单，只需提供要嵌入的资源的 URL 或相对路径即可。

// 缺点：
（1）性能：可能会导致性能问题，因为每个 <iframe> 都需要单独加载资源。
（2）安全：如果未谨慎处理来自不受信任源的内容，可能会存在安全风险，
          例如点击劫持（clickjacking）攻击。

如何防止iframe嵌套？

// 方法1
if (top != self) {
    top.location = self.location;
}
//这段代码会检测页面是否被嵌套，如果是，则将页面重定向到自身。

// 方法2
try {
	top.location.hostname;
	if(top.location.hostname !== window.location.hostname) {
		top.location.href = window.location.href;
	}
} catch(e) {
	top.location.href = window.location.href;
}

9. src和href的区别?

1.作用不同
    href是用于建立文档和资源之间的关系。
    src用于指向外部资源，应用到当前文档，用于替换当前的内容。

2.浏览器解析方式不同
    href会被浏览器识别为CSS，就会并行加载资源。
    src会被浏览器识别为图片，会暂停其他资源的下载，直到当前资源加载完毕。

二、CSS考题（25题）

1. 介绍一下CSS的盒子模型

CSS的盒子模型有哪些：标准盒子模型、IE盒子模型
CSS的盒子模型区别：
	标准盒子模型：margin、border、padding、content
	IE盒子模型 ：margin、content（ border +  padding  + content ）
通过CSS如何转换盒子模型：
	box-sizing: content-box;  /*标准盒子模型*/
	box-sizing: border-box;	  /*IE盒子模型*/

2. CSS优先级算法如何计算？

优先级比较：!important > 内联样式 > id（100） > class（10） > 标签（1） > 通配（0）

3. CSS选择符有哪些？哪些属性可以继承？

CSS选择器：

 通配（*）
id选择器（#）
类选择器（.）
标签选择器（div、p、h1...）
相邻选择器(+)
后代选择器(ul li)
子元素选择器（ > ）
属性选择器(a[href])

可以被继承的CSS属性：

font- 开头的
line- 开头的
color
visibility
cursor
list-style

4. 如何用CSS画一个三角形

// 方法1：用boder来画。
{
	width: 0;
	height: 0;

	border-left:100px solid transparent;
	border-right:100px solid transparent;
	border-top:100px solid transparent;
	border-bottom:100px solid #ccc;
}

5. 单行文本溢出

div{
    overflow: hidden;        //溢出隐藏
	width: 200px;
	white-space: nowrap;     //强制一行显示
	text-overflow: ellipsis; //溢出部分省略号显示
}

6. 多行文本溢出

.text-container {
    word-break:break-all;
    display: -webkit-box;          //弹性盒布局
    display: -webkit-webkit-flex;  //兼容性处理
    -webkit-box-orient: vertical;  //垂直排列
    -webkit-line-clamp: 3;         //可以显示多少行
    overflow: hidden;              //溢出隐藏
}

7. position有哪些值？分别是根据什么定位的？

static [默认]  没有定位
fixed  		固定定位，相对于浏览器窗口进行定位。	
relative        相对于自身定位，不脱离文档流。
absolute	相对于第一个有relative的父元素，脱离文档流。


relative和absolute区别
1. relative不脱离文档流 、absolute脱离文档流
2. relative相对于自身 、 absolute相对于第一个有relative的父元素
3. relative如果有left、right、top、bottom ==》left、top
   absolute如果有left、right、top、bottom ==》left、right、top、bottom

8. 有哪些css属性可以影响层级

屏幕是一个二维平面，然而 HTML 元素却是排列在三维坐标系中，x 为水平方向，y 为垂直方向，z 为屏幕由内向外方向，我们在看屏幕的时候是沿着 z 轴方向从外向内的。由此，元素在用户视角就形成了层叠的关系，某个元素可能覆盖了其他元素也可能被其他元素覆盖；

层叠上下文 (Stacking Context)

层叠上下文 (堆叠上下文, Stacking Context)，是 HTML 中一个三维的概念。在 CSS2.1 规范中，每个元素的位置是三维的，当元素发生层叠，这时它可能覆盖了其他元素或者被其他元素覆盖；排在 z 轴越靠上的位置，距离屏幕观察者越近。

在层叠上下文中，其子元素按照上面解释的规则进行层叠。形成层叠上下文的方法有：

1. position 值为 absolute|relative，且 z-index 值不为 auto；
2. position 值为 fixed|sticky；
3. z-index 值不为 auto 的 flex 元素，即父元素属性 display: flex|inline-flex；
4. opacity 属性值小于 1 的元素；
5. transform 属性值不为 none 的元素；
6. mix-blend-mode 属性值不为 normal 的元素；
7. filter、perspective、clip-path、mask、mask-image、mask-border、motion-path 值不为 none 的元素；
8. perspective 值不为 none 的元素；
9. isolation 属性被设置为 isolate 的元素；
10. will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
11. -webkit-overflow-scrolling 属性设置为 touch 的元素；

层叠等级

层叠等级 (层叠水平, Stacking Level) 决定了在同一个层叠上下文中，元素在 z 轴上的显示的顺序；
```
普通元素的层叠等级优先由其所在的层叠上下文决定；
层叠等级的比较，只有在同一个层叠上下文元素中才有意义；
在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在 z 轴上的上下顺序；
```
另外，层叠等级并不一定由 z-index 决定，只有定位元素的层叠等级才由 z-index 决定，其他类型元素的层叠等级由层叠顺序、他们在 HTML 中出现的顺序、他们的祖先元素的层叠等级一同决定，详细的规则见下面层叠顺序的介绍。

z-index

z-index 只适用于定位的元素，对非定位元素无效，它可以被设置为正整数、负整数、0、auto，如果一个定位元素没有设置 z-index，那么默认为 auto；

元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的，那么它 z-index 设的再高也没用。所以如果你遇到 z-index 值设了很大，但是不起作用的话，就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。

层叠顺序：描述的是元素在同一个层叠上下文中的顺序规则，从层叠的底部开始，共有七种层叠顺序：

1. 背景和边框：形成层叠上下文的元素的背景和边框。
2. 负 z-index 值：层叠上下文内有着负 z-index 值的定位子元素，负的越大层叠等级越低；
3. 块级盒：文档流中的块级、非定位子元素；
4. 浮动盒：非定位浮动元素；
5. 行内盒：文档流中行内、非定位子元素；
6. z-index: 0：z-index 为 0 或 auto 的定位元素， 这些元素形成了新的层叠上下文；
7. 正 z-index 值：z-index 为正的定位元素，正的越大层叠等级越高；