前端面试题2

一、HTML考题（8题）

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

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

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

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

 1. 行内元素（Inline Elements）通常是文本内容的一部分，它们不会影响布局，只占据内容所在的行宽度。例如：
 <span>、<a>、<img>、<b>、<strong>、<em> 等。
 ​
 2. 块级元素（Block Elements）占据一行，形成独立的块，可以设置宽高，影响布局。例如：
 <div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form> 等。
 ​
 3. 空(void)元素，也称为无内容元素，它们不包含任何内容，但可以有属性。它们通常用于定义结构，不会影响布局。例子有：
 <hr>（水平线）、<br>（换行）、<img>（图片，当src为空时）、<input type="hidden"> 等。
 ​
 元素之间的转换问题：
 display: inline;            把某元素转换成了行内元素      ===>不独占一行的，并且不能设置宽高
 display: inline-block;  把某元素转换成了行内块元素        ===>不独占一行的，可以设置宽高
 display: block;                 把某元素转换成了块元素            ===>独占一行，并且可以设置宽高

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

 导致原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

 方案一：手动取消空格和换行：
 ​
 <ul>
     <li>1</li><li>2</li><li>3</li><li>4</li>
 </ul>
 ​
 非常不推荐，原因：
 1. 部分编译器可能会代码整理的时候会强制换行
 2. 代码比较臃肿，美观度不行，一点不优雅

方案二：父元素设置font-size:0px（推荐）

<style type="text/css">
	*{margin: 0;padding: 0;}
	ul{
		list-style: none;
		font-size: 0;
	}
	ul li{
		display: inline-block;
		width: 100px;
		height: 100px;
		background: red;
		font-size: 18px;
	}
</style>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

注意：如果子盒子有文本，需要单独设置font-size

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

区别一：加载方式和顺序
	link标签会先加载（多个 <link> 标签同时引入，加载顺序由 HTML 中 <link> 标签的顺序决定）
	@import会在当前样式表加载完成后再加载引入外部样式表（@import 规则必须写在样式表的最前面，加载顺序受到 CSS 文件中 @import 规则的顺序决定。）
	加载顺序区别：页面被加载时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载。
	
区别二：权重区别
	link 方式的样式的权重高于 @import 权重。
	
区别三：从属关系区别
	link 属于 HTML 标签，而 @import 是 CSS 提供的。
	
区别四：兼容性区别
	link 没有兼容性问题，@import 不兼容 ie5 以下。

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

title与h1的区别：

定义：
	title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
	h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别：
	title他是显示在网页标题上、h1是显示在网页内容上
	title比h1更加的重要 (title > h1 ) ==》对于seo的了解
场景：
	网站的logo都是用h1标签包裹的	

b与strong的区别：

定义：
	b：标签用于为文本设置粗体样式，但它只是简单地表示文本应该呈现为粗体，并不带有语义强调的意义。
	strong：标签用于表示文本的强调语义，默认会呈现为粗体，同时也向屏幕阅读器和搜索引擎表明这段文字的重要性。
区别：
	b标签只有加粗的样式，没有实际含义。
	strong表示标签内字符比较重要，用以强调的。
	
题外话：为了符合css3的规范，b尽量少用，改用strong就行了。

i与em的区别：

定义：
	i:标签用于表示文本的斜体样式，但它只是简单地表示文本应该呈现为斜体，并不带有语义强调的意义。
	em：标签用于表示文本的强调语义，通常会呈现为斜体，同时也向屏幕阅读器和搜索引擎表明这段文字的强调重要性。
区别：
	i只是一个倾斜标签，没有实际含义。
	em表示标签内字符重要，用以强调的。
场景：
	i更多的用在字体图标，em术语上（医药，生物）。

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

区别一：表现形式不同
	title ： 鼠标移入到图片展示文字值
	alt   ： 图片无法显示时展示文字值

区别二：SEO层面 ( alt > title )
	在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

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的优点和缺点？

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

优点：

1.嵌入外部内容： <iframe> 允许你在一个网页中嵌入来自不同源或服务器的内容，这有助于创建丰富多彩的页面。
2.独立性： 内嵌的内容在 <iframe> 中运行，与主页面相互隔离，这意味着它不会受到主页面的影响，保持了独立性。
3.简便性： 使用 <iframe> 非常简单，只需提供要嵌入的资源的 URL 或相对路径即可。

缺点：

1.性能问题： 如果滥用 <iframe>，在同一个页面中加载多个 <iframe> 可能会导致性能问题，因为每个 <iframe> 都需要单独加载资源。
2.可访问性问题： 内嵌内容可能导致可访问性问题，因为屏幕阅读器等辅助技术可能无法正确解释和浏览 <iframe> 内的内容。
3.安全性风险： 如果未谨慎处理来自不受信任源的内容，可能会存在安全风险，例如点击劫持（clickjacking）攻击。

防止自己的网站被别人 iframe 嵌套

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

---

二、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 > class > 标签 > 通配

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

1. CSS选择符：
    通配（*）
    id选择器（#）
    类选择器（.）
    标签选择器（div、p、h1...）
    相邻选择器(+)
    后代选择器(ul li)
    子元素选择器（ > ）
    属性选择器(a[href])
    
2. 可以继承：
		1. font 相关属性：font-size、font-weight、line-height。
		2. color：控制文本颜色。
		3. text 相关属性：text-align、text-decoration、letter-spacing、word-spacing。
		4. visibility：控制元素是否可见。
		5. cursor：指定鼠标悬停在元素上时的光标样式。
		6. list-style 相关属性：包括 list-style-type、list-style-position、list-style-image。
        
3. 不可继承属性：border、padding、margin...

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

用边框画（border）,例如：
{
		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. 单行文本溢出

在 CSS 中，当单行文本内容超出其容器的宽度时，可以通过设置 overflow 属性来处理文本溢出的情况。常用的方法包括使用 white-space 和 text-overflow 属性。

div{
	width: 200px; /* 容器宽度 */
	white-space: nowrap; /* 不换行 */
	overflow: hidden; /* 超出部分隐藏 */
	text-overflow: ellipsis; /* 溢出部分显示省略号 */
}

6. 多行文本溢出

处理多行文本溢出的情况相对复杂一些，但也可以通过 CSS 来实现。常用的方法是结合 display: -webkit-box;、-webkit-line-clamp 和 overflow: hidden;。

.text-container {
    display: -webkit-box; /* 使用弹性盒子布局 */
    -webkit-box-orient: vertical; /* 垂直方向排列 */
    -webkit-line-clamp: 3; /* 限制显示行数 */
    overflow: hidden; /* 超出部分隐藏 */
}

/* 兼容性处理 */
.text-container {
    display: -webkit-box;
    display: -webkit-webkit-flex;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    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 轴方向从外向内的。由此，元素在用户视角就形成了层叠的关系，某个元素可能覆盖了其他元素也可能被其他元素覆盖；

1. 层叠上下文 (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 的元素；

2. 层叠等级

   层叠等级 (层叠水平, Stacking Level) 决定了在同一个层叠上下文中，元素在 z 轴上的显示的顺序；

   普通元素的层叠等级优先由其所在的层叠上下文决定；
   层叠等级的比较，只有在同一个层叠上下文元素中才有意义；
   在同一个层叠上下文中，层叠等级描述定义的是该层叠上下文中的元素在 z 轴上的上下顺序；

   另外，层叠等级并不一定由 z-index 决定，只有定位元素的层叠等级才由 z-index 决定，其他类型元素的层叠等级由层叠顺序、他们在 HTML 中出现的顺序、他们的祖先元素的层叠等级一同决定，详细的规则见下面层叠顺序的介绍。

3. z-index

   z-index 只适用于定位的元素，对非定位元素无效，它可以被设置为正整数、负整数、0、auto，如果一个定位元素没有设置 z-index，那么默认为 auto；
   
   元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的，那么它 z-index 设的再高也没用。所以如果你遇到 z-index 值设了很大，但是不起作用的话，就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。

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

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

5. 面试中 或 写面试题 的回答

   css可以影响层级的属性非常多，本身屏幕是一个二维平面，然而 HTML 元素却是排列在三维坐标系中。
   
   x为水平方向，y为垂直方向，z为屏幕由内向外方向。
   
   我们在看屏幕的时候是沿着 z 轴方向从外向内的，由此，元素在用户视角就形成了层叠的关系，某个元素可能覆盖了其他元素也可能被其他元素覆盖。
   
   那么元素在同一个层叠上下文中的顺序规则，从层叠的底部开始，共有七种层叠顺序：
   1. 背景和边框：形成层叠上下文的元素的背景和边框。
   2. 负 z-index 值：层叠上下文内有着负 z-index 值的定位子元素，负的越大层叠等级越低；
   3. 块级盒：文档流中的块级、非定位子元素；
   4. 浮动盒：非定位浮动元素；
   5. 行内盒：文档流中行内、非定位子元素；
   6. z-index: 0：z-index 为 0 或 auto 的定位元素， 这些元素形成了新的层叠上下文；
   7. 正 z-index 值：z-index 为正的定位元素，正的越大层叠等级越高；
   
   那么这里就说几个可以影响层级的css属性吧：比如：
   1. 可以给position值为absolute 或 relative的添加z-index；
   2. 也可以通过transform: translateY(-100px);
   3. opacity属性值小于 1 的元素；
   
   等等好多都可以做到，这里就不一一举例了。

9. 对BFC规范的理解？

是什么：BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

1. 了解BFC ： 块级格式化上下文。
2. BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。
3. 如何触发BFC：
		3.1 float的值非none
		3.2 overflow的值非visible
		3.3 display的值为：inline-block、table-cell...
		3.4 position的值为:absoute、fixed
		......
4. 用法
		4.1 阻止相邻元素的 margin 合并
		4.2 包含浮动元素
		......

10. 子元素设置margin-top父元素也会跟着移动，是怎么回事？

经典问题：垂直外边距叠加

原因：普通文档流盒子间，只要垂直外边距直接接触，就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。

发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。

解决办法：触发BFC就可以解决。

11. 简述什么是伪元素和伪类，并列举一些自己知道的伪元素和伪类

1. 伪元素

   什么是伪元素：是用于创建并操作元素的特定部分，它可以在DOM中创建一个不存在的元素，并为其添加样式。

   ::before：在元素内容之前插入内容
   ::after：在元素内容之后插入内容
   ::first-line：选择元素的第一个行
   ::first-letter：选择元素的第一个字母

2. 伪类

   什么是伪类：是用于选择元素的特定状态或行为的关键词，它可以应用于已存在的元素。

   :hover：当鼠标悬停在元素上时应用的样式
   :active：元素正在被用户交互（如点击）时应用的样式
   :focus：元素获得焦点（如键盘焦点或点击）时应用的样式
   :nth-child(n)：选择父元素的第n个子元素
   :not(selector)：选择不匹配给定选择器的元素

12. 清除浮动的方式有哪些？

1. 触发BFC
2. 多创建一个盒子，添加样式：clear: both; (不推荐使用，很老的处理方式了)
3. after方式
	ul::after{
			content: '';
			display: block;
			clear: both;
	}

13. css sprite是什么,有什么优缺点

1. 是什么
	把多个小图标合并成一张大图片。
2. 优缺点
	优点：减少了http请求的次数（减少了服务器和客户端之间的通信开销），提升了性能。
	缺点：维护比较差（例如图片位置进行修改或者内容宽高修改）

14. 什么是CSS reset？

reset.css   		是一个css文件，用来重置css样式的。
normalize.css 	为了增强跨浏览器渲染的一致性，一个CSS重置样式库。

15. 回流和重绘

15.1 浏览器渲染流程

浏览器是向服务端发送请求，下载解析资源显示在浏览器上。将网页内容展示到浏览器上的过程，这其实就是渲染引擎完成的。渲染引擎有很多种，这里以 webkit 为例。

从上面这个图上，我们可以看到，浏览器渲染流程如下：

1. 解析 HTML Source，生成 DOM 树。
2. 解析 CSS，生成 CSSOM 树。
3. 将 DOM 树和 CSSOM 树结合，去除不可见元素，生成渲染树( Render Tree )。
4. Layout (布局)：根据生成的渲染树，进行布局( Layout )，得到节点的几何信息(宽度、高度和位置等)。
5. Painting (重绘)：根据渲染树以及回流得到的几何信息，将 Render Tree 的每个像素渲染到屏幕上。

15.2 什么是回流和重绘

1. 回流：渲染对象在创建完成并添加到渲染树时，只是将 DOM 节点和它对应的样式结合起来，"并不包含位置和大小信息"。所以还需要 layout 这一过程计算他们的位置和大小，这一过程称为回流，有些地方也称为重排，可以理解为重新布局。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建渲染树。

2. 重绘：通过构造渲染树和回流阶段，知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个过程就叫做重绘。

15.3 什么样情况会造成回流和重绘

要知道：回流一定会造成重绘，重绘不一定会造成回流。

结合上面说的：
1. 造成回流的情况有：回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。一个 DOM 元素的几何属性变化，常见的几何属性有 width、height、padding、margin、left、top、border 等等。
2. 造成重绘的情况有：例如改变 visibility、outline、background-color 等属性，这些属性只是影响元素的外观，风格，并且没有影响几何属性的时候，会导致重绘 ( repaint )

15.4 如何减少回流与重绘

开启GPU加速：开启 GPU 加速元素会被单独提升到一层。
WebKit 内核的浏览器中，CSS3 的 transform、opacity、filter 这些属性就可以实现合成的效果，浏览器会将渲染层提升为合成层。

另外需要注意的是：硬件加速不是万金油，单独创建合成层是有代价的，每创建一个合成层，就要为其分配内存，内存大小取决于复合层的数量。复合层的大小、层的管理也更为复杂，在一些低端和终端移动端设备中更为明显，滥用 GPU 加速会引起页面卡顿甚至闪退。

可以把：top left 使用 transform 代替。

15.5 面试回答：

回流就是：渲染对象在创建完成并添加到渲染树时，只是将 DOM 节点和它对应的样式结合起来，并不包含位置和大小信息。所以还需要 layout 这一过程计算他们的位置和大小，这一过程称为回流，有些地方也称为重排，可理解为重新布局。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建渲染树。

造成回流就是可能改变了盒子的大小和位置。

重绘就是：通过构造渲染树和回流阶段，知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个过程就叫做重绘。

造成重绘就是可能改变了盒子的颜色，背景颜色等等之类的。

那么要避免回流和重绘：

css方面
 * 使用transform替代top等位移 ; 
 * 使用visibility替换display: none;
 * 避免使用table布局 ;
 * 尽可能在DOM树的最末端改变class；
 * 避免设置多层内联样式，尽量层级扁平；
 * 将动画效果应用到position属性为absolute或fxed的元素上；
 * 避免使用CSS表达式；
 * 将频繁重绘或者回流的节点设置为图层，比如 video, iframe ；
 * CSS3硬件加速(GPU加速) ，可以是transform: translateZ(0)、opacity、 flters、 Will-change提前告诉浏览器元素会发生什么变化;
 
JS方面：
* 避免频繁操作样式，合并操作；
* 避免频繁操作DOM，合并操作；
* 防抖节流控制频率；
* 避免频繁读取会引发回流/重绘的属性，比如上面的C、O、S属性
* 对具有复杂动画的元素使用绝对定位。

16. display-none;与visibility-hidden;的区别

1. 占用位置的区别

	display: none; 				隐藏元素，“不”占用位置
	visibility: hidden;   隐藏元素，占用位置

2. 重绘和回流的问题

	visibility: hidden;	产生重绘
	display: none;     	产生一次回流、重绘

17. opacity和rgba区别

共同性：实现透明效果

1. opacity 取值范围0到1之间，0表示完全透明，1表示不透明
2. rgba   R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间

区别：继承的区别
opacity 会作用于元素及其子元素的透明度，整个元素及其内容都会变得透明。
rgba() 只会作用于元素的颜色，而不会影响元素本身的透明度。

18. flex后面都有