前端面试题总结（含部分答案）

前言

写这篇文章也是想要分享给经验不多没有足够时间准备面试的小伙伴，可以了解我在面试中涉及到的一些内容，做个参考，也是给自己留个笔记随时复习。由于我只会vue框架，所以没有涉及到其他框架的问题

面试流程

面试过的都知道，一般都是先hr面，觉得薪资ok，然后约技术面，技术面过了offer差不多到手了。
技术面的流程：首先可能是做面试题，有的公司会根据这个刷人，有的是作为面试的参考，可能会根据你的答案进行一些提问——然后就是与面试官面对面交谈，先介绍项目，描述自己在项目中担任的职责——最后就是面试官提问
技术面大多不止一轮，第一轮比较基础，第二轮考验解决问题的能力，第三轮大概看眼缘吧

面试题

css

1. css盒模型

   html元素都可以看成是一个盒子，盒模型就是用来设计和布局时使用。
   盒模型主要包括：外边距（margin）、边框（border）、内边距（padding）、内容（content）
   盒模型又分为两种：标准盒模型（content-box）、怪异盒模型（border-box）
   盒模型可以通过box-sizing制定
   标准盒模型：width就是content的内容，所以计算标准盒模型的总长/宽=margin+border+padding+width
   怪异盒模型/IE盒模型：width就是content+border+padding的宽度，所以计算怪异盒模型的总长/宽=margin+width

2. 实现垂直居中的几种方式
   从两个方面讲：一种是普通流，一种是脱离文档流，具体如下：
   1.inline-block + text-align + table-cell + vertical-align

   <div class="parent">
     <div class="child">Demo</div>
   </div>
   <style>
     .parent {
       text-align: center;
       display: table-cell;
       vertical-align: middle;
     }
     .child {
       display: inline-block;
     }
   </style>
   

   2.absolute+transform

   <div class="parent">
     <div class="child">Demo</div>
   </div>
   
   <style>
     .parent {
       position: relative;
     }
     .child {
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
     }
   </style>
   

   3.flex布局(兼容性好，自适应布局)

   <div class="parent">
     <div class="child">Demo</div>
   </div>
   <style>
     .parent {
       display: flex;
       justify-content: center; 
       align-items: center; 
     }
   </style>
   

   css 常见布局可参考这篇文章css常见布局及解决方案，基本上常见布局都有讲到，超级详细，布局看这篇真的够了，我都是面试之前看一遍

3. padding的几种取值

   padding:10px;//上下左右都是10px
   padding:10px 20px;//上下10px 左右20px
   padding:10px 20px 30px;//上10px 左右20px 下30px
   padding:10px 20px 30px 40px;//上10px 右20px 下30px 左40px

4. flex布局的一些属性

   flex-direction
   flex-wrap
   flex-flow
   justify-content
   align-items
   align-content

   flex入门可以参考大神的文章

5. position

   position的取值有：static,absolute,relative,fixed,sticky
   static: 默认属性，节点处于正常文档流中
   relative: 相对定位，节点不脱离文档流，相对于自身所在文档流中的位置进行定位
   absolute: 绝对定位，节点脱离文档流，相对于其最近的脱离文档流的父级元素进行定位
   fixed: 固定定位，相对于浏览器窗口进行定位
   sticky: CSS3新发布的属性，粘性定位，会在relative和fixed之间切换。必须设置left,right,top,bottom中的一种，否则就相当于relative。基于用户滚动的位置，当超过阈值会相当于fixed，固定不动。

6. display:none和visibility:hidden的区别

   两者都是将元素隐藏，
   visibility:hidden;隐藏后元素的空间会被保留，即不会影响其他元素的布局
   display:none;隐藏后元素不占空间

7. em、rem、px的区别

   px（pixel）像素：是相对于显示器分辨率而言的，浏览器无法调整使用px作为单位的元素的大小
   em是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。em会继承父级元素的字体大小。
   rem是css3新增的相对于html根元素的相对长度单位

html

1. DOCTYPE是什么，作用是什么

   DOCTYPE文档类型，作用是告知浏览器以哪种方式解析html
   DOCTYPE有3种类型：Strict、transitional、Frameset
   如果不制定DOCTYPE，浏览器默认使用混杂模式

2. 如何理解html语义化

   正确使用html标签，易于阅读，利于seo，方便其他设备解析，有利于开发维护

3. html标签有哪些

   行级标签：a,span,em,strong
   块级标签：,div,table,ul,ol,li,tbody,h1~h6,form,p
   行内块级标签：img,input,textarea

4. img标签属于行级标签还是块级标签
   行内块级标签
5. h5有哪些新标签
   header,address,footer,audio,canvas,video,mark,section,dialog
6. link和@import的区别

   1.link是html标签，@import是css提供的一种方式
   2.@import有兼容性要求
   3.link引入的资源在解析html时到了这个位置就会加载，而@import引入的资源是在html解析完成后才下载
   4.link引入的资源种类可以是css文件，还有rel连接属性等，而@import只能引入css文件

7. css兼容各版本浏览器的前缀

   浏览器	前缀	内核