前端面试基础(1年以内需掌握)

金三银四 公司让我面试 1年经验的前端，特此花时间研究了一番面试题，近日整理了一下想分享出来，让更多小掘友看到，在我看来 这些基本都是必备的知识点

css常用布局

使用inline-block 的问题以及解决方案

• 水平间隙问题 这是因为编写代码时输入空格、换行都会产生空白符。而浏览器是不会忽略空白符的，并且对于多个连续的空白符自动合并成一个，故产生了所谓的间隙。

一般来说我们有两种方法来去掉这个换行引起间隙： 代码不换行 和 设置 font-size。

(推荐)通过设置父元素的 font-size 为 0 来去掉这个间隙，然后重置子元素的 font-size，让其恢复子元素文字字符。 只要设置 inline-block 就要去间隙

float清除浮动详解

主要是为了解决由于浮动元素脱离文流导致的元素重叠或者父元素高度坍塌的问题

• 清除前面兄弟元素浮动

清除前面兄弟元素浮动很简单，只需要在不想受到浮动元素影响的元素上使用 clear:both 即可

• 闭合子元素浮动

1. 给元素设置 clearfix 常用

通过父元素的伪元素（::after）实现的著名 clearfix 方法，代码如下：
<div class="container clearfix">
    <div class="box"></div>
</div>
.clearfix::after {
    content:"";
    display:table;
    clear: both;
}
给父元素增加一个专门用于处理闭合子元素浮动的 clearfix 类名，该类使用 ::after 伪元素类选择器增加一个内容为空的结构来清除浮动.

2. 给父元素新建一个 BFC(块格式化上下文)

请详情讲一下定位方式

实现一个弹窗 全屏居中的效果。

1. div使用绝对布局，设置 margin:auto; 并设置 top、left、right、bottom 的值相等即可，不一定要都是0。

.center{
    text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

2. 绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。

.center{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

说下几种常用选择器

五大类选择器：

1. 基本选择器

• 元素选择（直接获取元素名 P、h1）【过于直接】
• ID选择（#id）【取值唯一不能复用】
• 类选择（.class）【组合、复用】
• * 通用选择器(所有元素)

2. 关系选择器

   

3. 伪类选择器

• :nth-child(n) ： n可以是数字(4)、关键词(old,even)或公式(2n+1)
• :active: 将样式添加到被激活的元素
• :focus: 将样式添加到被选中的元素
• :hover: 鼠标悬浮在元素上时 添加样式
• :link: 添加到未被访问过的链接
• :visited 添加到被访问过的链接
• :first-child: 添加到元素的第一个子元素
• :lang： 定义使用的语言

4. 伪元素选择器 :first-letter : 添加到文本的首字母 :first-line : 添加到文本的首行 :before : 某元素之前插入某些内容 :after : 某元素之后插入某些内容

5. 属性选择器

   

说一下 CSS3新特性

1. HTML5 语义元素
2. HTML5 Web 存储

• sessionStorage: 客户端数据存储，只能维持在当前会话范围内。
• localStorage: 客户端数据存储，能维持在多个会话范围内。对象存储的数据没有时间限制。对于大量复杂数据结构，一般使用IndexDB

3. CSS3 多媒体查询 @media all and(min-width:800px){…}
4. CSS3 转换和变形：transform
5. CSS3 过渡：transition
6. CSS3 动画：animation

异步请求实现方式

1. 最原始的js ,new XMLHttpRequest(); //由于浏览器兼容的原因，代码复杂，多使用基于jQuery的异步请求方法（内部封装）
2. 基于jQuery的Ajax方法：
3. Vue–axios （promise）

讲一下 自己 代码 调试方法

JS数组操作

• concat() 链接两个或更多的数组,并返回结果
• join() 把数组通过指定分隔符进行分割并拼接成一个字符串
• pop() 删除并返回数组的最后一个元素
• push() 向数组的末尾添加一个或更多元素,并返回新长度
• reverse() 反转数组中元素的顺序

Jq DOM选择器、DOM文档操作

• append() : 向元素结尾插入由参数指定的内容。
• prepend():向元素开头插入由参数指定的内容。
• after() : 在匹配的元素之后插入内容。
• before(): 在每个匹配的元素之前插入内容。
• addClass():向匹配的元素添加指定的类名。
• attr() :设置或返回匹配元素的属性和值。
• removeAttr():移除指定的属性。

Vue框架的优势

1. MVVM: Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑； View 代表UI 组件，它负责将数据模型转化成UI 展现出来， ViewModel 是一个同步View 和 Model的对象。

2. mvc和mvvm其实区别并不大。都是一种设计思想。 主要就是mvc中Controller演变成mvvm中的viewModel。 mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别 vue数据驱动，通过数据来显示视图层而不是节点操作。场景：数据操作比较多的场景，更加便捷

vue生命周期（详解）

• beforeCreate：初始化了部分参数，如果有相同的参数，做了参数合并，执行beforeCreate；el和数据对象都为undefined，还未初始化；

• created：初始化了 Inject、Provide 、props、methods、data、computed和watch，执行created ；data有了，el还没有；

• beforeMount：检查是否存在el属性，存在的话进行渲染dom操作，执行beforeMount；$el和data都初始化了，但是dom还是虚拟节点，dom中对应的数据还没有替换；

• mounted：实例化 Watcher,渲染dom，执行mounted；vue实例挂载完成，dom中对应的数据成功渲染；

• beforeUpdate：在渲染dom 后，执行了mounted 钩子后，在数据更新的时候，执行 beforeUpdate；

• updated：检查当前的watcher列表中，是否存在当前要更新数据的watcher，如果存在就执行updated；

• beforeDestroy：检查是否已经被卸载,如果已经被卸载,就直接return出去,否则执行beforeDestroy；

• destroyed：把所有有关自己痕迹的地方，都给删除掉；

git常用命令

git clone:  下载初始化
Git add:添加
Git commit -m ‘ ’ :提交 带消息
Git push：推送
Git pull： 拉取

前端1W左右的面试

转载请标注 出处谢谢~ 感觉有帮助的不妨圈起来，后期不定期发布前端知识