程序媛菜鸡面经（二 - 面经概念题篇）

除了压轴的编程题以外，前端面试的重头戏就在各种概念题上。
（发现很多基础概念都容易被忘记，比如<div>为层标签、作为容器，可定义文档中的分区或节（division/section），换行是<div>固有的唯一格式表现）

概念题一：前端常用技术栈

简单来说，实习生所熟知的前端技术，包括：
HTML/HTML5、CSS/CSS3用于编写页面所需；
JavaScript/Node.js用于完成各页面间的跳转及数据传递等；
JQuery库的各类常用函数；
Bootstrap响应式开发框架；
较为准确的网页设计思路是把网页分为三个层次：结构层（HTML）、表示层（CSS）、行为层（JavaScript）。
除了前端所需的技术之外，实习生最应该掌握的包括计算机网络基础、数据结构、操作系统基础等技术等。
同时，部分大厂公司还要求实习生了解或者掌握原型JS的概念及常见应用范围（我自己目前也还没有学，下周二就要面试了，慌得一批……）

概念题二：实现水平、垂直居中

我发现好像这道题今年很火，看了好几个面经都考了这个。
总结一下好像就是这种：父子元素继承实现、div绝对定位实现、margin: auto、text-align: auto（针对文字）等。

方法一：（CSS）div元素中{margin: auto}实现绝对定位元素居中

（IE7之前版本不支持）

<style>
  	   div{
  	   	 position: absolute;
  	   	 left: 0;
  	   	 top: 0;
  	   	 right: 0;
  	   	 bottom: 0;
  	   	 margin: auto;
  	     }
</style>

方法二：（CSS）div元素中{margin: 负间距}实现绝对定位元素居中）

（目前比较流行的方法）

（这个其实我也没有很理解怎么用）

<style>
  	   div{
  	   	 width: Apx;
  	   	 height: Bpx;
  	   	 position: absolute;
  	   	 left: 50%;
  	   	 top: 50%;
  	   	 margin-left: -(A/2)px;
  	   	 margin-top: -(B/2)px;
  	     }
</style>
<!--margin负值的绝对值应该为定义width、height的一半（如果有的话），且无法应用在元素宽高自适应百分比定义的情况-->

方法三：（CSS）宽高不定，使用div元素中{transform: translate(-50%, -50%)}实现绝对定位元素居中）

（IE8不支持）

<style>
  	   div{
  	   	 position: absolute;
  	   	 left: 50%;
  	   	 top: 50%;
  	   	 transform: translate(-50%, -50%);
  	     }
</style>

方法四：（CSS）宽、高不定，水平垂直居中

<style>
	.box{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.box>div{}
	<!--有没有大佬解释一下为什么要有这个大于，不太理解-->
</style>

方法五：（CSS）不定宽高，使用margin: auto

绝对居中，但如果是可变高度必须声明高度

<style>
	.absoluteCenter{
		width: 50%;
		height: 50%;
		position:absolute;
		margin: auto;
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 0px;
		<!--为了强调默认顺时针顺序，我现在写都是“左上右下”-->
	}
</style>

方法六：父容器设为table-cell元素，可以使用text-align: center和vertical-align: middle

（利用三层结构模拟父子）

<style>
	.tableFather{
		display: table;
	}
	.tableChild{
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}
	.innerBox{
	 display: inline-block;
	}
</style>
<!--父容器为table-cell元素，子容器为inline-block元素-->
<p class = "outerBox tableFather">
	<p class = "tableChild">
		<p class = "innerBox">
			tableCell
		</p>
	</p>
</p>

方法七：（CSS3）利用calc计算位置，对子容器实现绝对定位

（Ps：通过搜索，知道了CSS3中有一个box-sizing属性，貌似也能够解决这个问题，近期内了解一下看看是不是这样的）

<style>
	.calc{
	position: relative;
	}
	.innerBox{
	position: absolute;
	left: -webkit-calc((Apx - Bpx)/2);
	top: -webkit-calc((Apx - Bpx)/2);
	<!--Google Chrome / macOS Safari-->
	left: -moz-calc((Apx - Bpx)/2);
	top: -moz-calc((Apx - Bpx)/2);
	<!--Firefox（其实我觉得火狐挺好的，可能是因为我之前在用IE）-->
	left: calc((Apx - Bpx)/2);
	top: calc((Apx - Bpx)/2);
	<!--标准浏览器（Standard）-->
	}
</style>

<p class="outerBox calc">
	<p class="innerBox">
		calc
	</p>
</p>

方法八：（CSS3）利用Flexbox

兼容性问题见图（Ps：有没有大佬解释一下图上内容……是表示宽度吗……）

  display: -webkit-box;
  display: -webkit-flex;
  <!--Safari-->
  display: -moz-flex;
  <!--Chrome / Firefox 旧版本-->
  display: -ms-flexbox;
  <!--IE10-->
  display: flex;
  <!--IE11,  Chrome29+, FireFox 20+版本-->

概念题三：兼容性问题理解

让我们来看一看前人总结的兼容性问题：
Chrome浏览器好像出现的非兼容性问题比较少，因为在总结兼容性问题的时候，大多数的示例都是以IE和Firefox的。
Chrome有两个兼容性问题：一是已填写表单再打开时背景为黄色，

1. HTML对象获取问题
   Firefox：document.getElementById(“idName”);
   IE: document.idname / document.getElementById(“idName”);
   故：统一使用document.getElementById("idName");
2. const定义常量问题
   Firefox：const / var;
   IE：var;
   故：统一用var
3. event.x与event.y问题
   （x、y与pageX、pageY均表示：事件相对于页面原点的水平/垂直坐标）
   Firefox：(event对象属性有) x / y ;
   IE：(event对象属性有) pageX / pageY ;
   故：可以使用jQuery库解决；或替代上述属性，使用var mx = event.x?event.x:event.pageX;
4. frame（帧）访问对象问题
   eg: <frame src="url" id="frameId" name="frameName" />
   Firefox：window.frameName / window.document.getElementById(“frameId”);
   IE：window.frameName / window.document.getElementById(“frameId”) / window.frameId / (且frameId与frameName可以重名)；
   故：使用window.frameName / window.document.getElementById("frameId");
5. frame（帧）切换内容问题
   eg: <frame src="url" id="frameId" name="frameName" />
   Firefox：window.document.getElementById(“testFrame”).src =“url” / window.frameName.location=“url”;
   IE：window.document.getElementById(“testFrame”).src =“url” / window.frameName.location=“url”;
   故：统一使用window.document.getElementById("testFrame").src ="url" / window.frameName.location="url";
   （Ps：如果需要将frame中的参数传回父窗口（注意不是opener,而是parent frame），可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value=“Aqing”;）

概念题四：利用CSS画一个三角形

方法很多，基本上要点就在于：

1. width/height: 0；
2. border-style: solid；
3. border-color: (other three is transparent)；

实例代码：

.triangle{
  width: 0px;
  height: 0px;
  overflow: 0;
  font-size: 0;
  border-width: 150px;
  border-color: transparent transparent blue transparent;
  border-style: solid;
}

2020.03.07更新

没想到三月收到了第一个gq校招offer……
电面20mins + HR群面谈薪酬40mins……
技术面：连等和equals的区别，override和overwrite的区别，快排逻辑，HashTable和HashMap的区别（这个我感觉我当时只回答了Hash函数的作用和映射[跪了]）……
还是安心等分数线吧……谁不想有书读呢……

之前所写的面经是在校实习期间，对于前端主要是Web方向的总结，目前在等待研考初试分数线的过程中，主要求职方向转后端或算法，近期的分享会侧重于后端或算法的相关方向。

如需转载请注明出处

长期更新