总结一下
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。
万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
2、可以清除浮动
一个父元素中的子元素，设置浮动时，父元素没有设置高度，这时子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷。 这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。
**3、**解决垂直边距重叠
1.父子关系的边距重叠
父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。
解决办法: 是给父元素添加一个 overflow:hidden，这样父元素就变为BFC，不会随子元素产生外边距
2.同级兄弟关系的重叠
同级元素在垂直方向上外边距会出现重叠现象，最后外边距的大小取两者绝对值大的那个
可通过添加一个空元素或伪类元素，设置overflow:hidden;解决
2、什么是渐进增强优雅降级
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
3、CSS优化、提高性能的方法有哪些？
避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免！important，可以选择其他选择器 尽可能的精简规则，你可以合并不同类里的重复规则
4、CSS特性：继承性，层叠，优先级
1、继承性：子标签会继承父标签的某些样式，如文本颜色和字号。(text- font- color)
2、层叠性：样式冲突，遵循的原则是就近原则。
3、优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，谁的权重高显示谁的样式。
（选择器相同，则执行层叠性；选择器不同，就会出现优先级的问题。）
**!Important > 行内式 > id > 类/伪类/属性 > 标签选择器 > 全局
（对应权重：无穷大∞>1000>100>10>1>0）**
5、定位有哪几种？分别举例？Z-index熟悉在使用的时候注意什么 ？
static: 默认值 没有定位，元素出现在正常的流中
relative(相对定位):生成相对定位的元素,相对于其正常（原先本身）位置进行定位
absolute（绝对定位):生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
fixed（固定定位）:生成绝对定位的元素，相对于浏览器窗口进行定位
sticky 粘性定位 当前元素设置了粘性定位，滚动到顶部就会吸附顶部，往下滑还回到原来位置。
z-index规则
1、值可以是正整数、负整数或0，数值越大，盒子越靠上；
2、如果属性值相同，则按照书写顺序，后来居上；
3、数字后面不能加单位。
4、
z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效
6、页面导入时，使用link和@import有什么区别
页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：Link引入和@import导入，两者都是外部引用CSS的方式，但是存在一定的区别：
1、从属关系: link是标签，@import是css提供的.
2. 加载差异: link： 结构和样式同时加载；而@import 先加载结构，后加载样式
3. 兼容性:link没有兼容问题，@import不兼容ie5以下的浏览器.
4.可操作性: link可以通过js操作dom插入link标签改变样式，而@import不能
7、简述src和href的区别
src用于替换当前元素
href用于在当前文档和引用资源之间确立联系.
扩展： src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置 href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
8、上下margin重合的问题
1、相邻块元素垂直外边距的合并
解决方案：尽量给只给一个盒子添加margin值
2、嵌套块元素垂直外边距的合并（塌陷）
解决方案：
可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。
9、浏览器常见的兼容性问题？
1、不同浏览器margin和padding不同
2、ie6中，父级元素浮动以后，内部元素内容撑不开宽度
3、标签嵌套不规范，如p和h1-h6里面嵌套div
4、ie6小于19px，会当成19px处理，也就元素宽高小于19px的bug
5、图片3像素问题
6、IE8下给图片添加超链接时，图片会有蓝色边框
7、鼠标滑过时，不显示小手
10、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
1、浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格
解决方案：
为li设置左浮动
将li写在同一行 中间不要有空格
将ul内font-size:0，但是单独li设置文字大小
将ul的letter-spacing:-8px，但是单独li设置字符间距normal
11、Html5新增的语义化标签。
头部标签：
导航标签：
内容区块表签：
页脚标签：
侧边栏：
页面内独立的内容区域：
12、flex弹性盒布局与传统盒模型布局的区别和优点？以及Flex布局哪些属性失效？
区别：
1. 普通盒模型中的子元素分配其父元素的空间，而弹性盒模型中的子元素分配其父元素的可用空间。
2. 普通盒模型主要针对块级元素和行级元素的布局，而弹性盒是建立在弹性流上，也就是元素可以随着可视区域的变化而呈现流式布局。
弹性盒的优点：
能为盒模型提供最大的灵活性，即使是不定宽高的元素依然好用，可以简便、完整、响应式地实现各种页面布局。
传统布局的特点：兼容性好、布局繁琐、局限性，不能在移动端很好的布局
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
13、 什么是rem、px、em区别。
rem是一个相对单位，rem的是相对于html元素的字体大小，没有继承性
em是一个相对单位，是相对于父元素字体大小有继承性
px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。
14、什么是视口
在pc端中，视口指的是在pc端中浏览器的可视区域；
在移动端中，它涉及3个视口：1是布局视口，2是视觉视口，3是理想视口
移动端指的视口就是布局视口
15、什么是媒体查询。
媒体查询是CSS3新语法。
使用媒体查询，可以针对不同的媒体类型定义不同的样式
媒体查询可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
16、响应式布局有哪些实现方式？什么是响应式设计？响应式设计的基本原理是什么？
1.百分比布局，但是无法对字体，边框等比例缩放
2.弹性盒子布局 display:flex
3.rem布局，1rem=html的font-size值的大小
4. css3媒体查询 @media screen and(max-width: 750px){}
5.vw+vh
6.使用一些框架（bootstrap，vant）
什么是响应式设计：响应式网站设计是一个网站能够兼容多个终端，智能地根据不同设备环境进行相对应的布局
响应式设计的基本原理：基本原理是通过媒体查询检测不同的设备屏幕尺寸设置不同的css样式 页面头部必须有meta声明的
17、什么叫CSS盒模型？有哪几种盒模型？有什么区别？box-sizing属性有什么用？
1、什么是CSS盒模型？
在我们的HTML页面中，每一个元素都可以被看成一个盒子，而这个盒子由:内容(content)、内边距(padding)、 边框(border)、外边距(margin) 四部分组成.
2、有哪几种盒模型？
对于盒模型，分为标准盒模型和怪异盒模型一下两种
标准(W3C)盒模型的范围包括margin、border、padding、content,并且宽高只包含content，不包含其他部分
怪异(IE)盒模型的范围包括margin、border、padding、content,和标准盒模型不同的是，怪异盒模型的宽高包含了padding和 border
box-sizing作用
用来控制元素的盒子模型的解析模式，默认为content-box context-box标准盒模型 border-box怪异盒模型
18、 Doctype作用? 标准模式与兼容模式(兼容模式)如何区分？
文档声明；用于告知浏览器该以何种模式来渲染文档.
严格模式和混杂模式的区别：
严格模式：页面排版及 JS 解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容
19、 为什么会出现浮动？浮动会带来哪些问题？清除浮动的方式有哪些？哪种最好？
1、为什么会出现浮动：
由于浮动元素脱离了文档流，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上.
2、浮动带来的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构.
- 与浮动元素同级的非浮动元素（内联元素）会跟随其后
3、清除浮动的方式:
- 父级div定义height
- 结尾处加空div标签clear：both
- 父级div定义伪类：after、before
- 父级div定义overflow：hidden
- 父级div定义overflow：auto。
- 父级div也浮动，需要定义宽度。
- 父级div定义display：table。
- 结尾处加br标签clear:both
比较好的是第3种，无需多余标签，方便维护，通过伪类就可以解决
20、元素的alt和title有什么异同
不同点: 元素的alt是表示图片加载失败显示的文本内容，而title是表示鼠标悬停图片时显示的文本内容.
相同点: 在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字
21、Div+CSS较table相比有什么样的优点？
正常场景一般都适用div+CSS布局，Div+CSS优点:
- 开发中结构与样式分离，便于后期项目的维护和迭代
- 代码语义性好
- 更符合HTML标准规范
- SEO友好
table缺点:
- 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量
- 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
- 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
- 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱，不够语义化。
22、 ::before和:before有何异同？
- 单冒号(:)用于CSS3伪类，
- 双冒号(::)用于CSS3伪元素。伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且
伪类: 用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。
例如: 当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。
伪元素: 用于创建一些不在DOM树中的元素，并为其添加样式。
例如: 我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在 DOM文档中。
23、什么是回流什么是重绘以及区别？
回流:
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree.
重绘:
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘.
区别:
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流，当页面布局和几何属性改变时就需要回流
24、.简单说一下H5新增了哪些新特性
语义化标签：header、footer、section、nav、aside、article
增强型表单：input 的多个 type calendar、date、time、url、search、tel、file、number 新增表单属性：placehoder、required、min 和 max
音频视频：audio、video
canvas 画布
kan wa si 地理定位（Geolocation）
拖拽释放：拖拽是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，
本地存储： localStorage 没有时间限制的数据存储； sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，
数据会被删除 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
WebSocket：建立持久通信协议，新的技术：webworker、websocket、Geolocation
25、css3新增了那些特征？
1、颜色：新增RGBA、HSLA模式
2、文字阴影：（text-shadow）
3、边框：圆角（border-radius）边框阴影：box-shadow
4、盒子模型：box-sizing
5、背景：background-size,background-origin background-clip(削弱)
6、渐变：linear-gradient(线性渐变):
eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);
radial-gradient (径向渐变)
7、过渡：transition可实现动画
8、自定义动画： animate@keyfrom
9、媒体查询：多栏布局@media screen and (width:800px)
10、border-image
11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放
12、3D转换
13、字体图标：font-size
14、弹性布局：flex
26、浏览器是如何渲染页面的
Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
