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

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

css经常使用布局

基本值	flexbox	grid	table	float布局
none	flex	grid	table	float-fixed
inline	inline-flex	inline-grid	table-row	float-fluid
block			table-cell	960网格布局
inline-block

使用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左右的面试

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