前端面试内容整理

前端面试内容整理

以下是收集的一些面试中经常会遇到的经典面试题以及自己面试过程中没有回答上来的问题，通过对知识的整理以及经验的总结，重新巩固自身的前端知识。（如有错误或者更好地答案，欢迎指正）

目录

• HTML/CSS部分
• JavaScript部分

HTML/CSS部分

1、什么是盒子模型

在网页中，一个元素占有空间的大小有几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border）以及元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分知识用来分隔相邻的区域。4个部分一起构成了css中元素的盒子模型。

2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素：a、b、span、img、input、strong、select等

块级元素：div、ul、li、dl、p、h1-h6等

空元素：既没有内容的HTML元素，例如：br、hr、link等

3、CSS实现垂直水平居中

这是一道经典的问题，实现方法有很多种，一下是其中的一种

//HTML结构
<div class="wrapper">
    <div class="content"></div>
</div>

//CSS:
.wrapper {position:relative}
.content {
    background-color:#ff0000;
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px; //二分之一的height  width
    margin-left:-100px;
}

4、简书一下src和href之间的区别

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

5、简书同步和异步的区别。（面试经常会遇到的问题）

同步是阻塞模式，异步是费阻塞模式。

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，知道收到返回信息才会继续执行。

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回是系统会通知进程进程处理，这样可以提高执行的效率。

6、px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em，10px=0.625em。

7、绝对定位和相对定位的区别

相对定位：该元素相对于自己原有位置，偏移一定距离。相对的是自己。

绝对定位：该元素相对于其父元素，偏移一定距离。相对的是父元素，重点是这个父元素也需要是设置了position属性。从最近的父元素开始找，直到找到body位置为止。

HTML和Css的面试内容还有很多，犹豫时间有限在此就不一一例举。如果上面那些说的不正确欢迎指正。下章更新JavaScript和Vue相关内容。

---