总结的前端面试题目学而不思则罔，思而不学则殆。当走完基本所有大厂之后，发现其实每个公司对基础能力的考察都比较注重，只有基

前言

学而不思则罔，思而不学则殆。当走完基本所有大厂之后，发现其实每个公司对基础能力的考察都比较注重，只有基础掌握好了，把前端所有的知识能够一连串的理清。那么不管面试题是什么，都可以游刃有余的去回答。这里就是把我所有面试过的问题的一些底层原理阐述，并不会去描述我在面试中碰到的题目。这样一方面可以帮你过一遍js的基础也可以帮助我加深理解。下面我就分模块的去讲解没一个知识点。篇幅过长，请耐心阅读！！！

css面试题目

一：前端一像素问题（画一条0.5px的线）

方法一：transform:scaleY（0.5）使用伪元素设置1px的边框，然后对边框进行缩放(scaleY)
实现思路：

1、设定目标元素的参考位置
2、给目标元素添加一个伪元素before或者after，并设置绝对定位
3、给伪元素添加1px的边框
4、用box-sizing: border-box 属性把边框都包进宽和高里面
5、宽和高设置为 200%
6、整个盒子模型缩小为0.5
7、调整盒子模型的位置，以左上角为基准 transform-origin: 0

方法二： border-image 设置图片的边框

二：清除浮动

    特性：浮动元素影响的不仅是自己，他会影响周围元素对其进行环绕
    为什么要清除浮动？（解决父元素高度坍陷问题）
    一个块级元素如果没有设置height,其height由子元素撑开，对子元素使用了浮动之后，子元素就会脱离文档流也就是说，父及元素中没有内容可以撑开其高度，这样父级元素height就会被忽略。这就是所谓的高度坍塌
    如何清除浮动
    


1.给父级元素定义高度 
2.让父级元素也浮动 
3.父级定义display:table 
4.父元素设置overflow:hidden 
5.clearfix:使用内容生成的方式清除浮动
	.clearfix:after {  // :after选择器向选定的元素之后插入内容
   		    content:""; // 生成内容为空
   		    display: block; // 块级元素显示
   		    clear:both; // 清除前面元素
	}
不破坏文档流，没有副作用

三：如何画一个三角形

    设置宽高，然后用border去画
      		width: 0;
            	height: 0;
            	border-bottom: 100px solid cyan;
            	border-left: 50px solid transparent;
            	border-right: 50px solid transparent;

四：使元素消失的方法

    visibility:hidden、display:none、z-index=-1、opacity：0
    
    1.opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
    2.visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
    3.display:node, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉

五：为什么css放在顶部而js写在后面

1.浏览器预先加载css后，可以不必等待HTML加载完毕就可以渲染页面了
2.其实HTML渲染并不会等到完全加载完在渲染页面，而是一边解析DOM一边渲染。
3.js写在尾部，主要是因为js主要扮演事件处理的功能，一方面很多操作是在页面渲染后才执行的。另一方面可以节省加载时间，使页面能够更加的加载，提高用户的良好体验

Html面试题目

js面试题目

一：前端事件流问题

事件流描述的是从页面中接受事件的顺序，可以分为：事件捕获阶段处于目标阶段事件冒泡阶段其中需要主要的是addeventListener这个函数最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

1、事件捕获阶段：实际目标div在捕获阶段不会接受事件，也就是在捕获阶段，事件从document到再到就停止了
2、处于目标阶段：事件在div发生并处理，但是事件处理会被看成是冒泡阶段的一部分。

冒泡阶段：事件又传播回文档

  阻止冒泡事件event.stopPropagation()
   		  function stopBubble(e) {
     		if (e && e.stopPropagation) { // 如果提供了事件对象event 这说明不是IE浏览器
    		e.stopPropagation()
      		} else {
    		window.event.cancelBubble = true //IE方式阻止冒泡
      	      }
    		   }
  阻止默认行为event.preventDefault()
  	 function stopDefault(e) {
  	    if (e && e.preventDefault) {
           e.preventDefault()
          } else {
              // IE浏览器阻止函数器默认动作的行为
              window.event.returnValue = false
          }
      }

二：Http协议

详细资料请参考网址：www.cnblogs.com/ranyonsue/p…

三：js全面的面试题目

参考网址：segmentfault.com/a/119000001…

react面试题目

后期补上~

node 方面的基础面试题目

1.什么是Nodejs？

Nodejs是一个JavaScript的运行环境，是一个服务器端的“JavaScript解释器”，用于方便高效地搭建一些响应速度快、易于扩展的网络应用。它采用事件驱动、异步编程，为网络服务而设计。

2.Nodejs的优缺点

优点：

（1）nodejs是基于事件驱动和无阻塞的，非常适合处理并发请求，因此构建在Nodejs上的代理服务器相比其他技术实现的服务器要好一点。

（2）与nodejs代理服务器交互的客户端代码由js语言编写，客户端与服务端都采用一种语言编写。缺点：

（1）nodejs是一个相对新的开源项目，不太稳定，变化速度快

（2）不适合CPU密集应用。如果有长时间运行的计算（比如大循环），将会导致CPU时间片不能释放，使得后续I/O无法发起。

3.nodejs适用场景：高并发、聊天、实时消息推送

4.npm是什么？

npm是nodejs包管理和分发的工具，用于管理node包。如安装、卸载、发布、查看等。

5.npm的好处？

通过npm，可以安装和管理项目的依赖，且可以指明依赖项的具体版本号。

6.Node.js中导入模块和导入js文件写法上有什么区别？

nodejs引入模块，直接使用名字导入即可。如：

const express = require("express"); 导入js文件，需要使用文件的路径，如：

const student = require("./mongoose");

其他面试题目总结

一：验证码的使用为什么要使用手机号码发送验证？直接获取不更好么？除了使用手机号码安全，还有啥其他的用处？解答：在这个人工智能盛行的社会，机器人拥有和人一样的智商，另一方面是为了判断使用者是不是一个人哈哈，如果答案不对，可以提出来

后期补充~

目的：纯粹当做个人笔记收藏，如有不对的地方，欢迎随时提出~