前端跳槽面试必备技巧-笔记

面试准备
分析职位要求等

一面/二面
面试技巧
 准备要充分（基础知识）
 知识要系统（前端知识碎）
 沟通要简洁（理论知识 一语中的）
 内心要诚实（不会可以请教面试官）
 态度要谦虚（不要嘚瑟）
 回答要灵活（不要把话说满 掌握多少就说多少）

面试模拟

页面布局

解决方案:

1. 浮动
2. 绝对定位
3. Flexbox
4. 表格布局
5. 网格布局

延伸：

1. 这五种方案各自有什么优点和缺点？
2. 假设高度未知，以上五种方案哪个还适用？哪个已经不适用了？
3. 这五种方案的兼容性如何？应用到业务中，最优你会选择哪一个？

问题1：这五种方案各自有什么优点和缺点？
浮动：
缺点：
脱离文档流，需要清除浮动。如果处理不好，会带来很多问题。
优点：
兼容性比较好。如果清除浮动处理地好，浮动与周边元素的关系处理地好，兼容性比较好。

绝对定位：
优点：
快捷，配合js使用非常快，不容易出问题。
缺点：
脱离文档流，导致子元素也脱离文档流，实使用性比较差。
Flexbox:
解决了上述两个布局的不足，比较完美。移动端一般用flexbox布局。

表格布局：
缺点：
历史上：麻烦，操作繁琐，对SEO不够友好。
比如中间单元格高度超出时，两边的单元格也会调整到同样的高度。（有些情况不需要）
优点：
三栏布局用表格布局轻易解决，兼容性好，pc上IE8不支持flex，此时可以用表格布局

网格布局：
新出的技术
对新技术有追求，主动学习的意识

问题2：假设高度未知，以上五种方案哪个还适用？哪个已经不适用了？
浮动：不作处理不能用了

提问：为啥下面中间的内容超出来了
答：浮动的基本原理，中间内容向左浮动的时候被左侧的红块挡住了
内容超出以后，在下面排的时候，左侧没有了遮挡物（没有float的元素），就在左侧渲染了
提问：怎么让黄色继续向下延伸，不影响红色和蓝色？
答：创建BFC（CSS盒模型中解说）

绝对定位：超出，超出部分背景还是黄色

表格布局和flexbox布局一样，中间被撑高，两边也被撑到相同的高度

网格布局：超出，超出部分无背景

综上所述：浮动、绝对定位、网格都不能用
表格布局、flexbox可以继续使用

问题3：这五种方案的兼容性如何？应用到业务中，最优你会选择哪一个？

页面布局小结：
 语义化掌握到位（不要通篇div）
 页面布局理解深刻（每个原理，代码理解清楚）
 CSS基础知识扎实
 思维灵活且积极上进（方案多）
 代码书写规范（缩进，命名）

页面布局的变通
三栏布局
 左右高度固定，中间自适应(五种)
 上下高度固定，中间自适应(4种方法,除了浮动不行)
两栏布局
 左宽度固定，右自适应(五种)
 右宽度固定，左自适应(五种)
 上高度固定，下自适应(4种,除了浮动不行)
 下高度固定，上自适应(4种,除了浮动不行)

---

CSS盒模型
题目：谈谈你对CSS盒模型的认识
基本概念：标准模型+IE模型
标准模型包括：content padding border margin
标准模型和IE模型的区别：计算宽度和高度的不同（怎么不同 怎么计算）
CSS默认的模型是哪一种，如何设置成类外一种
JS如何设置获取盒模型对应的宽和高（几种方法）

问题1：基本概念：标准模型+IE模型

问题2：标准魔性和IE模型区别
 标准模型和IE模型计算宽高是不同的
 标准模型的宽高就是content的宽高
 IE模型的宽高是content+padding+border

问题3：CSS如何设置这两种模型

问题4：JS如何获取盒模型对应的宽和高
CSS三种写法：内联CSS、页级CSS、外联CSS
内联CSS

页级CSS

外联CSS

---

dom.style.width/height
只能取出内联样式的宽和高，外联和页级的样式取不出来
dom.currentStyle.width/style
计算的是浏览器渲染出来的样式，所以以上三种CSS写法都能取出
缺点：只支持IE浏览器
window.getComputedStyle(dom).width/height
跟上面一样，但是能兼容火狐和谷歌浏览器
dom.getBoundingClientRect().width/height
也是能拿到及时渲染的样式，以viewport（视窗）左顶点为基准，能得到width、height、top、left
知道以上四种的区别，以及哪个通用性更强

问题5：实例题（根据盒模型解释边距重叠）

父元素套了一个子元素，子元素高度为100px，子元素与父元素上边距的距离是10px

问题6：BFC（边距重叠解决方案）
BFC的基本概念（类似的IFC）
Block Formatting Context，BFC 块级格式化上下文
BFC的原理（BFC的渲染规则）

1. 在BFC这个元素垂直的方向上边距不会发生重叠
2. BFC区域不会与浮动元素的box重叠（清除浮动）
3. BFC在页面中是一个独立的容器（外面的元素不会影响里面的，里面的也不会影响外面的）
4. 计算BFC高度的时候，浮动元素也会参与计算

如何创建BFC

1. Float值不为none(设置浮动)
2. Position的值不是static也不是relative（比如设置成fixed/absolute）
3. Table-cell也能创建
4. Overflow:hidden/auto

BFC的使用场景（见代码）

1. 清除浮动（子元素是浮动元素，也会参与高度计算）
2. 自适应两栏布局（BFC区域不会与浮动元素的box重叠）