2021前端基础面试题

617 阅读2分钟

1.请简单画一下标准的W3C盒子模型

2.清除浮动的几种方式

2.0 简单粗暴 clear:both; 不推荐

2.1使用after伪元素清除浮动(推荐使用)

 .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
}

2.2.父级添加overflow属性(父元素添加overflow:hidden)(不推荐)

    .fahter{        width: 400px;        border: 1px solid deeppink;        overflow: hidden;    }

1.怎么让Chrome支持小于12px的文字

但是在最新版的谷歌里。已经不在支持这个属性啦,需要通过css3的transform来解决,方法如下

1.{webkit-transform:scale(``0.8````); display:inline-block} //````0.8``位缩放倍数,具体自己根据实际需求修改,只能缩放可以定义宽高的元素,而span是行内元素,

3.css伪类有哪些

  :before,在某元素之前插入某些内容。

:after,在某元素之后插入某些内容。

 :hover,当鼠标悬浮在元素上方是,向元素添加样式

:focus,将样式添加到被选中的元素

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

vue篇

1.Vue 中 key 值的作用?

**答:**用于 管理可复用的元素,标识数据的唯一性。因为Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染,key的作用主要是为了高效的更新虚拟DOM。

2.说说你对Vue 的生命周期的理解

答:juejin.cn/post/690083…

3.Vue 组件间通信有哪些方式?

答:juejin.cn/post/690083…

4.vue 中怎么重置 data?

答:在vue实例中找到 this.$options.data() 获取该组件初始状态下的data

利用es6中的 Object.assign(this.data,this.data, this.options.data()) 浅拷贝到目标中,实现初始化data

5.vue-router 有哪些钩子函数?

****答:******router.beforeEach 是页面加载之前  他有三个参数(******to, from, next)应用场景:可进行一些页面跳转前处理,例如判断需要登录的页面进行拦截,做登录跳转!!

******相反router.afterEach是页面加载之后 :****应用场景,进入页面登录判断、管理员权限判断、浏览器判
**

****6.****Vue 的 nextTick 的原理是什么?

答: 当你修改了data的值然后马上获取这个dom元素的值,是不能获取到更新后的值, 你需要使用$nextTick这个回调,让修改后的data值渲染更新到dom元素之后在获取,才能成功。

**7.Vuex 有哪几种属性?
**

答:juejin.cn/post/690083…