本文详细介绍了前端面试中常见的技术点，包括一面/二面的面试技巧，通信与安全（跨域、CSRF、XSS），页面布局的多种解决方案及其优缺点，CSS盒模型的细节，DOM事件的捕获、冒泡和事件流，以及如何利用BFC解决边距重叠问题。此外，还涵盖了DOM事件的处理、原型链、面向对象、HTTP协议、跨域通信、安全问题（CSRF、XSS）以及算法基础（排序、堆栈、队列、链表等）。
来自慕课课程：前端跳槽面试必备技巧
1.一面/二面 面试技巧
面试技巧：准备要充分、知识要系统、沟通要简介、内心要诚实、态度要谦虚、回答要灵活
通信：跨域、前后端通信
安全：CSRF、XSRF、XSS
2.页面布局
题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应
答案：浮动解决方案、绝对定位解决方案、flexbox解决方案、表格布局解决方案、网格布局解决方案
引申思考：
1.各个方法的优缺点
2.假设高度已知去掉，不再只考虑水平方向，还要考虑中间高度问题，例如中间的内容有点多，撑开了，上面哪个方案还可以适应。
3.五个方案的浏览器兼容性如何？
4.实际应用中，哪个方案最优？
浮动布局常见问题是清除浮动，优点是兼容性比较好。
绝对定位好处是快捷，本身脱离文档流了，要求下面的定位要注意定位好位置，可使用性比较差。
Flex布局常用于移动端，针对上面两个布局不足提出的布局方案。
表格布局其实在一些场景很适应的，表格布局兼容性也不错，还有缺点是，三栏高度一个变化时另外两个也会变化。
网格布局借鉴CSS栅格，可以对比比较。
假设高度已知去掉，Flex和表格布局还可以用。
如果要求上图中间的字不往两边扩展，只显示在中间，解决方案是：BFC
页面布局小结：
1.语义化掌握到位
2.页面布局理解深刻
3.CSS基础知识扎实
4.思维灵活且积极向上
5.代码书写规范
常见布局：（可作为思考题）
3.CSS盒模型
基本概念：
margin、padding、border、content，还有标准模型+IE模型
标准模型和IE模型的区别（后面专门写篇文章比较）：
可以参考：https://www.cnblogs.com/ruanxh123/p/5639150.html
CSS如何设置这两种模型？：
box-sizing:context-box;(标准模型，浏览器默认是标准模型)
box-sizing:border-box;(IE模型)
JS如何设置获取盒模型对应的宽和高？：
1.dom.style.width/height(只能取出内联样式设置的宽和高)
2.dom.currentStyle.width/height(只有IE支持)
3.window.getComputedStyle(dom).width/height(其他浏览器也可以用)
4.dom.getBoundingClientRect().width/height(计算元素的绝对位置，left、top、width、height)
实例题（根据盒模型解释边距重叠）：
还需要观看视频讲解
BFC（边距重叠解决方案）：
a.BFC的基本概念
b.BFC的原理：
1.BFC这个元素的垂直方向的边距会发生重叠
2.BFC的区域不会与浮动元素的box重叠
3.BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，里面的因素也不会影响外面的元素
4.计算BFC高度的时候，浮动元素也会参与计算
c.如何创建BFC：
参考文章：https://blog.csdn.net/L1651430795/article/details/52016466
1.overflow:hidden、overflow的值不为”visible
2.float的值不为none时，即设置浮动就创建一个BFC、
3.position的值不是static或者relative时就是创建了BFC、
4.display属性“table-cell”, “table-caption”, or “inline-block”中的任何一个
d.BFC的使用场景
讲几个例子。
BFC更多详细介绍参考：
https://www.cnblogs.com/dojo-lzz/p/3999013.html
https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
BFC使用实例代码：
还需要查看代码视频讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS盒模型</title>
<style media="screen">
html *{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<section class="box" id="sec">
<style media="screen">
#sec{
background: #f00;
}
.child{
height: 100px;
margin-top: 10px;
background: yellow
}
</style>
<article class="child"></article>
</section>
<!-- BFC垂直方向边距重叠 -->
<section id="margin">
<style>
#margin{
background: pink;
overflow: hidden;
}
#margin>p{
margin: 5px auto 25px;
background: red;
}
</style>
<p>1</p>
<div style="overflow:hidden">
<p>2</p>
</div>
<p>3</p>
</section>
<!-- BFC不与float重叠 -->
<section id="layout">
<style media="screen">
#layout{
background: red;
}
#layout .left{
float: left;
width: 100px;
height: 100px;
background: pink;
}
#layout .right{
height: 110px;
background: #ccc;
overflow: auto;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
<!-- BFC子元素即使是float也会参与计算 -->
<section id="float">
<style media="screen">
#float{
background: red;
overflow: auto;
/*float: left;*/
}
#float .float{
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
</body>
</html>
4.DOM事件
DOM事件最重要是事件原理的掌握（捕获、冒泡的流程）、怎么注册事件（就是监听用户行为）、做响应时Event对象的应用
基本概念：DOM事件的级别
https://www.cnblogs.com/holyson/p/3914406.html
DOM0
element.onclick = function(){}
DOM2
//false指定冒泡或者是捕获
element.addEventListener('click',function{}.false)
DOM3
//事件类型加了很多
element.addEventListener('keyup',function(){},false)
DOM事件模型：
捕获（从上往下）、冒泡（从下往上）
DOM事件流：
可以参考文章：
https://www.cnblogs.com/starof/p/4066381.html
https://www.cnblogs.com/lihongfei0602/p/4062345.html
事件是文档或者浏览器窗口中发生的，特定的交互瞬间。
事件是javaScript和DOM之间交互的桥梁。
事件流描述的是从页面中接收事件的顺序。
问题：单击页面元素，什么样的元素能感应到这样一个事件？
答案：单击元素的同时，也单击了元素的容器元素，甚至整个页面。
事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。
事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。
冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】
捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
事件捕获的思想就是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。
<
最低0.47元/天 解锁文章
扫一扫
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
