前端面试整理

1. css居中方式

text-align:center; //基础属性居中当前元素内部行内元素

display:inline-block;width:***px //居中块级元素中的行内元素

margin:0 auto //块级元素居中

例如：

body代码：
	<div class="center">
　　	<span class="center_text"></span>
	</div>
style代码：
	center_text{
	　　display:block;
	　　width:500px<br>　　margin：0 auto；
	}

2. px,em,rem,%

1. px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
2. em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的
字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
3. rem是CSS3新增的一个相对单位。使用rem为元素设定字体大小时，仍然是相对
大小，但相对的只是HTML根元素。
4. 定义基于包含块（父元素）宽度的百分比宽度。

注意：如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用

3. display的值和作用

none：此元素不会展示；
block：此元素显示为块级元素，此元素前后会带有换行符
inline：默认，此元素会被显示为内联元素，元素前后无换行符
inline-block：行内块元素（css2.1新增的值）

其他display的属性值不是很常用，其具体的含义如下：
list-item：     此元素会作为列表显示。
run-in：     此元素会根据上下文作为块级元素或内联元素显示。
table：     此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table：     此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group：     此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group：     此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group：     此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row：     此元素会作为一个表格行显示（类似 <tr>）。
table-column-group：     此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column：     此元素会作为一个单元格列显示（类似 <col>）
table-cell：     此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption：     此元素会作为一个表格标题显示（类似 <caption>）
inherit：     规定应该从父元素继承 display 属性的值。

另外有两个已经废除的属性值：
compact     CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker     CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

4. 路由跳转的方式

1. router-link

• 不带参数

<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
// 注意：router-link中链接如果是'/'开始就是从根路由开始，
如果开始不带'/'，则从当前路由开始。

• 带参数

<router-link :to="{name:'home', params: {id:1}}">
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

// html 取参 $route.params.id
// script 取参 this.$route.params.id

<router-link :to="{name:'home', query: {id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id

2. this.$router.push() (函数里面调用)

• 不带参数
  this.$router.push{(}^{\prime }/hom{e}^{\prime })this.$router.push({name:‘home’})
  this.$router.push({path:’/home’})

• query传参

    this.$router.push({name:'home',query: {id:'1'}})
    this.$router.push({path:'/home',query: {id:'1'}})
  
    // html 取参 $route.query.id
    // script 取参 this.$route.query.id
  

• params传参

•   this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
    // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
    // html 取参 $route.params.id
    // script 取参 this.$route.params.id
  

5. vue生命周期的理解

1.beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
2.created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，
属性和方法的运算，