除了压轴的编程题以外,前端面试的重头戏就在各种概念题上。
(发现很多基础概念都容易被忘记,比如<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有两个兼容性问题:一是已填写表单再打开时背景为黄色,
- HTML对象获取问题
Firefox:document.getElementById(“idName”);
IE: document.idname / document.getElementById(“idName”);
故:统一使用document.getElementById("idName");
- const定义常量问题
Firefox:const / var;
IE:var;
故:统一用var
- 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;
- 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");
- 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画一个三角形
方法很多,基本上要点就在于:
- width/height: 0;
- border-style: solid;
- 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方向的总结,目前在等待研考初试分数线的过程中,主要求职方向转后端或算法,近期的分享会侧重于后端或算法的相关方向。