【前端面试题】前端面试题总结2023-7-13
本面试题还在不断地更新中…
一、HTML面试题
1、行内元素有哪些？块级元素有哪些？空(void)元素有哪些？
在HTML中，有以下几类常见的元素类型：
- 行内元素（Inline Element）：它们会按行进行排列，不会独占一行。常见的行内元素包括：
<span>、<a>、<img>、<strong>、<em>、<input>、<button>等。 - 块级元素（Block Level Element）：它们会独占一行，每个块级元素都会从新的一行开始，并且可以设置宽度、高度、边距等样式属性。常见的块级元素包括：
<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form>等。 - 空（Void）元素：它们是没有内容的特殊元素，通常没有闭合标签或以自闭合形式存在。常见的空元素包括：
<br>、<hr>、<img>、<input>、<meta>、<link>等。
需要注意的是，并非所有元素都明确地归为行内元素或块级元素。有些元素具有混合类型，根据上下文的不同可能表现为行内元素或块级元素，例如<a>、<button>等。此外，HTML5还引入了一些新元素，如<header>、<footer>、<nav>等，它们属于块级元素。
2、页面导入样式时，使用link和@import有什么区别？
在页面导入样式时，可以使用 <link> 标签和 @import 规则来引入外部样式表，它们有以下区别：
- 加载方式：
<link>是 HTML 标签，通过在 HTML 文档中添加<link>元素来加载样式表。而@import是 CSS 中的规则，可以在 CSS 文件中使用@import规则来引入其他样式表。 - 加载时间：
<link>标签会在页面加载过程中同时加载并行下载样式表，不会阻塞页面的渲染，因此可以提高页面加载速度。而@import规则会在解析到@import语句时才开始下载并加载被引入的样式表，因此可能会导致页面出现闪动现象，影响用户体验。 - 兼容性：
<link>标签的兼容性较好，适用于所有现代浏览器，包括旧版本的 IE。而@import规则在旧版本的 IE（如 IE8 及更早版本）中存在一些兼容性问题，不推荐在这些浏览器中使用。 - 使用位置：
<link>标签可以放置在 HTML 文档的<head>或<body>中任意位置，用于加载外部样式表。而@import规则只能出现在 CSS 文件的顶部，用于在 CSS 文件中引入其他样式表。
综上所述，推荐使用 <link> 标签来加载外部样式表，以提高页面加载性能和兼容性。只有在需要动态引入样式表的特殊情况下，才考虑使用 @import 规则。
3、title与h1的区别、b与strong的区别、i与em的区别？
下面是 title 与 h1、b 与 strong、i 与 em 的区别：
- title 与 h1 的区别：
<title>标签是用于定义网页的标题，位于 HTML 文档的<head>部分。它是页面的标题，显示在浏览器的标题栏或标签页上，用于描述网页的内容。<h1>标签是用于定义 HTML 页面中的主标题（heading），它是页面中的一级标题。可以使用<h1>~<h6>标签来表示不同级别的标题，但通常只使用一个<h1>来表示页面的主要标题。
- b 与 strong 的区别：
<b>标签用于呈现粗体文本，仅改变文本的外观，不对语义进行强调。它在语义上没有特殊含义，仅用于视觉效果上的加粗文本。<strong>标签是用于强调文本的重要性，具有语义含义。它表示文本的重点、紧迫性或强调的内容。默认情况下，<strong>元素的文本会以粗体显示，但其主要目的是用于语义上的强调，而不仅仅是样式上的变化。
- i 与 em 的区别：
<i>标签用于呈现斜体文本，仅改变文本的外观，没有语义上的特殊含义。它用于在文本中添加一些视觉上的强调，但不强调具体的重要性或语义。<em>标签是用于强调文本的语气、情感或重要性，具有语义含义。它表示强调的内容，通常以斜体显示。与<strong>不同，<em>的强调更侧重于强调文本的语义或情感上的重要性。
总结：
<title>用于定义网页标题，<h1>用于定义主标题。<b>仅改变文本样式，<strong>用于语义强调。<i>仅改变文本样式，<em>用于语义强调。
4、img标签的title和alt有什么区别？
img 标签的 title 和 alt 有以下区别：
- 功能和作用：
title属性是指定图片的标题，当用户将鼠标悬停在图片上时，会显示 title 内容的工具提示。它提供了一个额外的文本说明，可以用于提供更多关于图片的信息，但不是必需的。alt属性是指定图片的替代文本，当图片无法加载或者无法显示时，会显示 alt 文本。它是为了提供无障碍性（accessibility）而设计的，能够让无法看到图像的用户了解图像的内容。
- 内容和形式：
title属性的内容可以是任意描述性的文本，用于提供关于图片的额外信息，可以包含一些提示、解释或描述性的文字。alt属性的内容应该是对图片的简短描述，通常用几个词或一句话来说明图片的内容，以便无障碍用户能够了解图像的内容。
- 显示方式：
title属性的内容在用户将鼠标悬停在图片上时会以工具提示的形式显示，通常以浮动窗口或者文字提示的形式展示。alt属性的内容只有在图片无法显示时才会显示出来，以替代图片的形式呈现给用户。屏幕阅读器也会读取alt属性的内容，以提供对图像的描述。
总结：
- title 属性用于提供图片的附加信息，作为鼠标悬停时的工具提示。
- alt 属性用于提供图片的替代文本，当图片无法加载或无法显示时显示。它还有助于无障碍用户了解图像的内容。
5、png、jpg、gif这些图片格式解释一下，分别什么时候使用？
PNG（Portable Network Graphics）、JPG/JPEG（Joint Photographic Experts Group）和GIF（Graphics Interchange Format）是常见的图片格式，它们有不同的特点和适用场景。
- PNG（Portable Network Graphics）：
- 特点：PNG 是一种非压缩的位图图像格式，支持高质量的图像展示，能够显示透明和半透明效果。
- 适用场景：PNG 格式适用于需要保留图像细节、透明背景或半透明效果的场景，比如图标、标志、网页中的图像元素等。由于 PNG 是无损压缩格式，文件通常较大，适合用于网络速度较快的环境。
- JPG/JPEG（Joint Photographic Experts Group）：
- 特点：JPG 是一种有损压缩的图像格式，采用了压缩算法，可以显著减小文件大小，但会损失一定的图像质量。
- 适用场景：JPG 格式适用于需要高度压缩的照片、图像或其他复杂场景，比如摄影作品、数字相册、网页中的背景图像等。由于 JPG 使用有损压缩，文件大小较小，在网络上传输或存储时更为高效。
- GIF（Graphics Interchange Format）：
- 特点：GIF 是一种支持动画和多帧图像的格式，采用无损压缩算法。它支持最多 256 种颜色，并且可以设定某一颜色为透明色。
- 适用场景：GIF 格式适用于需要展示简单动画、循环播放或者图像具有透明背景的场景，比如简单的动态图、表情包、小型图标等。由于 GIF 的色彩表现较为有限，不适合用于照片或图像细节较多的场景。
总结：
- PNG 适用于需要保留图像细节、透明背景或半透明效果的场景。
- JPG 适用于需要高度压缩的照片、图像或其他复杂场景。
- GIF 适用于展示简单动画、循环播放或者图像具有透明背景的场景。
二、CSS面试题
1、介绍一下CSS的盒子模型
CSS 盒子模型是用于描述 HTML 元素在页面中所占空间的模型。它将每个 HTML 元素视为一个矩形的盒子，由内容、内边距、边框和外边距组成。
盒子模型包含以下几个要素：
- 内容区域（Content）：
- 内容区域指的是盒子所包含的实际内容，比如文本、图像等。它的大小由内容的宽度和高度决定。
- 内边距（Padding）：
- 内边距是指内容区域与边框之间的空白区域。它可以在内容区域与边框之间设置一个或多个数值来控制空白区域的大小。
- 边框（Border）：
- 边框是包围内容和内边距的线条或者边界。它可以设置边框的样式、宽度和颜色。
- 外边距（Margin）：
- 外边距是盒子与其他盒子之间的空白区域。它控制元素与相邻元素之间的距离，并且会影响盒子在布局中的位置。
盒子模型的计算方式如下：
- Width = 内容宽度（Content）+ 左内边距（Padding-left）+ 右内边距（Padding-right）+ 左边框（Border-left）+ 右边框（Border-right）
- Height = 内容高度（Content）+ 上内边距（Padding-top）+ 下内边距（Padding-bottom）+ 上边框（Border-top）+ 下边框（Border-bottom）
在 CSS 中，我们可以通过设置不同的属性来控制盒子模型的各个部分，例如：
width和height控制内容区域的宽度和高度。padding控制内边距的大小。border控制边框的样式、宽度和颜色。margin控制外边距的大小。
盒子模型在网页布局中非常重要，可以帮助我们控制元素的大小、间距和位置，从而实现灵活的页面布局。
2、line-height和height的区别？
line-height 和 height 是 CSS 中用于控制元素高度的属性，但它们有不同的作用和应用场景。
line-height：
line-height用于设置行高，即行框的高度。它是指行框内容区域的高度，通常用于调整文本在行内的垂直对齐方式。line-height可以接受的值包括长度值（如像素、百分比等）和无单位的数值。line-height的默认值是 normal，浏览器会根据字体来决定行高。一般情况下，line-height的值大于字体大小时，文本会在行框中垂直居中显示；而当值小于字体大小时，文本可能会有部分文字超出行框的现象。line-height不会改变元素的实际高度，只会影响文本在行内的排布。它适用于需要调整文本行高度或垂直对齐方式的场景，如段落、标题等。
height：
height用于设置元素的高度，即元素框的高度。它决定了元素在页面中所占的垂直空间。height可以接受的值包括长度值（如像素、百分比等）和 auto。height的默认值是 auto，元素的高度会根据内容自适应，如果没有设置其他约束条件，元素的高度将根据内容撑开。height会影响元素的实际高度，它决定了元素所占的垂直空间大小。它适用于需要明确设置元素高度或限制元素高度的场景，如容器、图片等。
总结：
line-height用于控制行框的高度和文本的垂直对齐方式，不会改变元素的实际高度。height用于设置元素的实际高度，决定了元素在页面中所占的垂直空间大小。
3、CSS选择符有哪些？哪些属性可以继承？
CSS 选择符（Selector）是用于选择 HTML 元素以应用样式的一种机制。以下是一些常见的 CSS 选择符：
- 元素选择符（Element Selector）：
- 通过元素名称来选择元素，例如
p表示选择所有<p>元素。
- 类选择符（Class Selector）：
- 通过类名来选择元素，例如
.class-name表示选择具有指定类名的元素。
- ID 选择符（ID Selector）：
- 通过元素的唯一 ID 来选择元素，例如
#element-id表示选择具有指定 ID 的元素。
- 属性选择符（Attribute Selector）：
- 通过元素的属性来选择元素，例如
[attribute]表示选择具有指定属性的元素。
- 后代选择符（Descendant Selector）：
- 通过元素的后代关系来选择元素，例如
parent-element descendant-element表示选择父元素下的所有后代元素。
- 相邻兄弟选择符（Adjacent Sibling Selector）：
- 选择紧接在指定元素之后的兄弟元素，例如
element1 + element2表示选择紧接在 element1 后面的 element2。
- 通用选择符（Universal Selector）：
- 选择所有元素，例如
*表示选择页面中的所有元素。
CSS 属性的继承性是指某个属性值是否会被子元素继承。以下是一些常见的可继承属性：
- 字体相关属性：
font-family、font-size、font-weight、font-style等。 - 文本相关属性：
color、text-align、line-height、text-indent等。 - 列表相关属性：
list-style-type、list-style-image、list-style-position等。 - 表格相关属性：
border-collapse、text-align、vertical-align等。 - 元素可见性相关属性：
visibility。
需要注意的是，并非所有的 CSS 属性都具有继承性，例如 width、height、padding、margin 等就不具备继承性。此外，通过 inherit 关键字可以强制指定一个属性值继承父元素的相同属性的值。
4、CSS优先级算法如何计算？
CSS 优先级是一个用于确定当多个选择器应用于同一元素时，哪个规则将被应用的算法。优先级是根据选择器的特性和权重进行计算的。
CSS 优先级算法按以下顺序确定优先级：
- 内联样式（Inline Styles）：直接在 HTML 元素的
style属性中指定的样式具有最高优先级。内联样式没有选择器，因此其优先级最高。 - ID 选择器（ID Selectors）：使用 ID 选择器选中的元素具有较高的优先级。例如，
#my-element。 - 类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, Pseudo-Class Selectors）：使用类选择器、属性选择器或伪类选择器选中的元素具有中等优先级。例如，
.my-class、[data-attribute]、:hover。 - 元素选择器和伪元素选择器（Element Selectors, Pseudo-Element Selectors）：使用元素选择器或伪元素选择器选中的元素具有较低的优先级。例如，
p、::before。 - 通用选择器和选择器组（Universal Selectors, Selector Combinations）：通用选择器和选择器组的优先级最低。例如，
*、div, p, span。
如果存在多个选择器具有相同的优先级，那么后面出现的规则将覆盖先前的规则。另外，使用 !important 关键字可以将样式规则设置为具有最高优先级，但它不被推荐使用，因为它会破坏样式的可维护性。
根据上述规则，计算 CSS 优先级时，可以将选择器拆分为四个部分，并根据其权重进行计算。权重顺序由高到低为：内联样式、ID 选择器、类选择器/属性选择器/伪类选择器、元素选择器/伪元素选择器。在每个部分中，权重值越大，优先级越高。最后，将所有部分的权重值相加，得到最终的优先级值，优先级值越大的样式将被应用。
需要注意的是，当样式声明在外部样式表中，并由多个样式表提供时，优先级也会受到样式表的加载顺序和特殊性特征的影响。
5、用CSS画一个三角形
我们可以使用 CSS 画一个三角形，可以通过设置元素的边框和透明背景来实现。下面是两种常见的方法：
方法一：利用边框属性
<div class="triangle"></div
.triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #000; }
方法二：利用伪元素
<div class="triangle"></div>
.triangle { position: relative; width: 0; height: 0; } .triangle::before { content: ""; position: absolute; top: 0; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #000; }
在这两种方法中，我们使用 border 属性来设置三角形的边框样式，通过调整边框的宽度和高度来控制三角形的大小，并设置透明的边框来形成三角形的形状。另外，你可以根据需求自由调整宽度、高度、颜色等属性来绘制不同样式的三角形。
6、一个盒子不给宽度和高度如何水平垂直居中？
要实现一个没有指定宽度和高度的盒子的水平和垂直居中，可以使用以下方法之一：
方法一：使用 Flexbox 布局
HTML 代码：
<div class="container"> <div class="box"></div> </div>
CSS 代码：
.container { display: flex; justify-content: center; align-items: center; } .box { /* 不给定宽度和高度 */ background-color: #f00; }
方法二：使用绝对定位和 CSS 变换（Transform）
HTML 代码：
<div class="container"> <div class="box"></div> </div>
CSS 代码：
.container { position: relative; height: 100vh; /* 可根据需要调整高度 */ } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 不给定宽度和高度 */ background-color: #f00; }
这两种方法都可以将盒子水平和垂直居中。使用 Flexbox 布局时，通过设置容器的 display: flex;，并且使用 justify-content: center; 和 align-items: center; 分别设置子项在主轴和交叉轴上居中，即可实现水平和垂直居中效果。
使用绝对定位和 CSS 变换时，将容器的位置设置为 relative，然后将盒子的 top 和 left 值都设置为 50%，再使用 transform: translate(-50%, -50%); 将盒子向左和向上移动自身宽度和高度的一半，即可实现水平和垂直居中效果。
这两种方法可以根据具体需求选择适合的方式来实现盒子的水平和垂直居中。
