美文网首页
css+js 面试

css+js 面试

作者: zlf_j | 来源:发表于2020-03-09 14:17 被阅读0次

    css

    标准盒模型:内容的宽度(content)+border+padding+margin;

    position的值?
    static(默认):按照正常文档流进行排列
    relative(相对定位)不脱离文档流,参考自身的top、right、bottom、left进行定位
    absolute(绝对定位)参考其最近的一个非static的父级元素通过top、right、bottom、left进行定位
    fixed(固定定位)所固定的参照对象是可视窗口的位置

    清除浮动
    <1> 父级div定义高度
    <2> 最后一个浮动元素后加空div标签,并添加样式clear:both
    <3> 包含浮动元素的父标签添加样式overflow为hidden和auto
    <4> 父级定义zoom

    CSS选择器有哪些?
    CSS选择符:id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel=”external”])、伪类选择器(a:hover, li:nth-child)

    display:none与visibility:hidden的区别?
    display:none 不显示对应的元素,在文档布局中不再分配空间(回流+重绘)
    visibility:hidden 隐藏对应元素,在文档布局中仍保留原来的空间(重绘)

    CSS优先级算法如何计算?
    元素选择符: 1
    class选择符: 10
    id选择符:100
    元素标签:1000
    !important声明的样式优先级最高,如果冲突再进行计算。
    如果优先级相同,则选择最后出现的样式。
    继承得到的样式的优先级最低。

    CSS3有哪些新特性?
    RGBA和透明度
    background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
    word-wrap(对长的不可分割单词换行)word-wrap:break-word
    文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)
    font-face属性:定义自己的字体
    圆角(边框半径):border-radius 属性用于创建圆角
    边框图片:border-image: url(border.png) 30 30 round
    盒阴影:box-shadow: 10px 10px 5px #888888
    媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性

    call和apply的用法
    call和apply相同点:改变函数中this的指向
    不同点:函数参数的传递形式
    call将函数参数依次传入
    apply将函数参数用一个数组的形式传入

    事件委托是什么
    利用事件冒泡的原理,将事件绑定在父容器中,让父容器代为触发

    跨域的解决方法
    JSONP,document.domain,window.postMessage,window.name,Access Control,使用 CORS 实现跨域调用
    https://blog.csdn.net/johnny_mu/article/details/104334180

    简单介绍一下继承
    js是基于对象的,它没有类的概念。所以,要想实现继承,可以用js的原型prototype机制或者用applycall方法去实现

    • 继承:子类可以使用父类的所有功能,并且对这些功能进行扩展。继承的过程,就是从一般到特殊的过程。

    flex
    控制水平居中的属性是 justify-content 而需要控制垂直居中的时候只需要将 align-items 设置为 center 即可

    组件通信

    • 父组件传子组件:
      将data里面获取到的值通过在template中的子组件标签上通过v-bind:xxx = ''
      这样父组件的操作就完成了,然后再子组件中,通过props{list:Array}来接收从父组件传过来的值,接受到的值就可在
      子组件的template中使用。这样就完成了父组件将数据传输到子组件的全部过程。
    • 子组件传父组件:
      子组件用emit来向父组件派发事件,父组件中用on来监听自定义的事件
      这里拿click举例,当子组件上绑定被点击事件触发时,可以在这个触发事件的函数中
      使用Vue自带的this.$emit(‘父组件接收的事件名’,要传输的参数),这样子组件就完成了。然后在父组件中的template里的对应
      子组件上通过@事件名 = ‘func’ 然后在父组件的method中补全这个func,这个func中将从子组件中穿过来的值赋值给父组件的data的
      kv值,然后就获得到子组件中的传过来的值了

    js

    vue当中的指令和它的用法?
    答:v-if:判断是否隐藏;v-for:数据循环出来;v-bind:class:绑定一个属性;v-model:实现双向绑定

    怎么定义vue-router的动态路由?怎么获取传过来的动态参数?
    在router目录下的index.js文件中,对path属性加上/:id。
    使用router对象的params.id
    this.$route.query.project_id

    v-model是什么?怎么使用? vue中标签怎么绑定事件?
    可以实现双向绑定,指令(v-class、v-for、v-if、v-show、v-on)。vue的model层的data属性。绑定事件

    v-show和v-if指令的共同点和不同点?
    v-show指令是通过修改元素的displayCSS属性让其显示或者隐藏
    v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

    请列举出3个Vue中常用的生命周期钩子函数?
    created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, el属性目前还不可见 mounted: el被新创建的 vm.el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

    请简述下Vuex的原理和使用方法
    一个应用可以看作是由上面三部分组成: View, Actions,State,数据的流动也是从View => Actions => State =>View 以此达到数据的单向流动.但是项目较大的, 组件嵌套过多的时候, 多组件共享同一个State会在数据传递时出现很多问题.Vuex就是为了解决这些问题而产生的.
    Vuex可以被看作项目中所有组件的数据中心,我们将所有组件中共享的State抽离出来,任何组件都可以访问和操作我们的数据中心.
    上图可以很好的说明Vuex的组成,一个实例化的Vuex.Store由state, mutations和actions三个属性组成:
    state中保存着共有数据
    改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的
    如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改.

    vuex有哪几种属性?
    答:有五种,分别是 State、 Getter、Mutation 、Action、 Module
    vuex的Getter特性是?
    getters 可以对State进行计算操作,它就是Store的计算属性

    vue-router有哪几种导航钩子?
    三种,
    第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
    第二种:组件内的钩子
    第三种:单独路由独享组件

    简述一下Sass、Less,且说明区别?
    他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
    变量符不一样,less是@,而Sass是$;
    Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持;
    Sass是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器

    vuex是什么?怎么使用?哪种功能场景使用它?
    vue框架中状态管理。在main.js引入store,注入。新建了一个目录store,….. export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

    请说出vue.cli项目中src目录每个文件夹和文件的用法?
    assets文件夹是放静态资源;components是放组件;router是定义路由相关的配置;view视图;app.vue是一个应用主组件;main.js是入口文件

    split() join() 的区别
    答案:前者是将字符串切割成数组的形式,后者是将数组转换成字符串

    1. 数组方法pop() push() unshift() shift()
      答案:push()尾部添加 pop()尾部删除
      unshift()头部添加 shift()头部删除

    . 闭包是什么,有什么特性,对页面有什么影响
    答案:闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收,如果过多使用闭包,容易导致内存泄露

    相关文章

      网友评论

          本文标题:css+js 面试

          本文链接:https://www.haomeiwen.com/subject/tupcoqtx.html