zoukankan      html  css  js  c++  java
  • 面试题-4-27

    总结今日面试题。

    1、如何让一个物体水平垂直居中某个区域?

    这是一个老生常谈了。分物体不确定宽高和确定宽高。

    不确定宽高:利用flex布局

      <div class="wraper">
        <div class="inner">内容</div>
      </div>
    
    
        .wraper{
           400px;
          height: 400px;
          border: solid 1px red;
          display: flex;
          justify-content: center;
          align-items: center;
        }

    不确定宽高:利用CSS3的transform属性和绝对定位配合。

        .wraper{
           400px;
          height: 400px;
          border: solid 1px red;
          position: relative;
        }
        .inner{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }

    不确定宽高:利用table、table-cell。这里需要嵌套三层。

      <div class="wraper">
        <div class="ok">
          <span class="innerBox">内容</span>
        </div>
      </div>
    
        .wraper{
          display: table;
        }
        .wraper .ok{
          display: table-cell;
          text-align: center;
          vertical-align: middle;
        }
        .wraper .innerBox{
          background: blue;
        }

    确定宽高:绝对定位四个方向设为0;margin设为auto。

        .wraper{
           400px;
          height: 400px;
          border: solid 1px red;
          position: relative;
        }
        .inner{
           100px;
          height: 100px;
          background: yellow;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }

    确定宽高:利用负margin值,margin负值为元素宽高的一半。和transform有相通之处。

        .wraper{
           400px;
          height: 400px;
          border: solid 1px red;
          position: relative;
        }
        .inner{
           100px;
          height: 100px;
          background: yellow;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -50px;
          margin-top: -50px;
        }

    2、什么是盒模型?

    盒模型本质就是指一个盒子,它包括元素内容、内边距、边框、外边距。

    盒模型有两种:标准盒模型和怪异盒模型(IE)。

    标准盒模型:box-sizing:content-box; 也是默认的,此时设置的width/height就只是content的宽度和高度。

    怪异盒模型:box-sizing:border-box; 此时设置的width/height包括content+padding+border。

    3、说明= 、==、===、的区别?

    = :是赋值操作。

    == :先转换类型再比较。

    类型相同则比较大小。

    null == undefined  返回true

    一个字符串一个数值,则会把字符串转化为数值型在进行比较。

    如果一方为true则转化为1,为false则转化为0,再比较。

    如果一个是对象一个是字符串或者数值,则会把对象转化为基础类再进行比较。

    其他比较都不相等。

    === :类型不同,不相等。

    都是数值,值相同则相等。

    类型一样,值一样 才相等。

    对于引用类型,引用同一个对象或者函数才相等。

    都为null 或者都为undefined ,相等。

    都为NaN不相等,因为每一个NaN都不相等,只能用isNaN判断NaN。isNaN(NaN)返回true。

    4、JavaScript中undefined和not defined的区别?

    undefined并不是程序报错,而是程序允许的一个值。它是js语言中定义的五个原始类中的一个。这个类中只有一个值就是undefined

    not defined 是运行代码时,遇到没有定义就拿来运算的变量时,抛出的错误。如下代码:

    1 var a;
    2 console.log(a)
    3 console.log(typeof a)
    4 console.log(typeof b)
    5 console.log(b)

    第一个返回undefined值。第二个返回的是undefined是这个类,第三个也是undefined这个类,第四个会报错。

    5、写出下面代码的结果。

    console.log([]==true)
    // false
    console.log(null==undefined)
    // true
    console.log(0 === -0)
    // true
    console.log(1/0 === 1/-0)
    // false
    console.log(true=='1')
    // true
    console.log((12,5,6,7,13))
    // 这里考察的是逗号运算符。
    // 逗号运算符多用于声明多个变量。
    var num1 = 1, num2 = 2;
    // 此外还可以用于赋值。
    // 用于赋值时,总返回表达式的最后一项
    // 因此输出 13
    function show(a){
      var b = a();
      return b();
    }
    var a = function () {
      console.log('test');
      return function(){
        console.log('show');
        // return 2;
      }
    }
    console.log(show(a))

    上面代码会先 console一个 test 然后是 show 最后是 undefined。

    函数show执行时,给它传了一个函数a作为参数,a执行返回一个函数赋给b,并且console出 test,show 把函数b的执行结果返回出来,b执行结果会console出 show,但是由于没有return返回值,因此会返回一个undefined。函数没有返回值时会返回一个undefined。

    如果加上return 2,结果就会是 test 、show 、2。

    var a= function () {
      console.log('test');
    }
    function show(a){
      console.log(a);
      return function(){
        console.log(2);
      }
    }
    console.log(show(a)())

    结果是先console出 函数a,然后是2,然后是undefined。过程和上面类似。

    var json = {
      a:1,
      b:2,
      c:function(){console.log('test');return 10;}
    };
    var arr = [3,2,1];
    function show(a){
      console.log(a[0]+json.a+arguments[1].c());
      return arguments[1].c()+arguments[0][0];
    }
    console.log(show(arr,json))

    先说结果是:test、14、test、13。

    首先来说,JavaScript函数有个内置的对象arguments对象。它包含了函数调用的参数数组。在函数show里console一下就可以直到了。

    因此,arguments[0] 就是 arr arguments[1] 就是 json,所以里面的两个数据就可以使用了。

    6、document.write() 和 innerHTML 的区别?

    document.write() 是直接写入到页面的内容流,会导致页面的重绘。

    innerHTML 是页面DOM元素的一个属性,可以精确到某一个元素身上进行修改,只是重绘页面的一部分。

    7、什么是图片预加载和懒加载?

    预加载:就是在页面加载完成之前,提前加载图片。当用户需要查看时直接从本地缓存中渲染,从而减少用户等待时间,提高体验效果。这种做法是牺牲服务器性能换取更好的用户体验。

    懒加载:就是延迟加载图片或符合某些条件才加载图片。好处是:减少不必要的访问数据库次数。主要目的是作为服务器前端优化,减少请求数。

    8、cookie、sessionStorage、localStorage 的区别?

    cookie:保存在浏览器端,只能保存字符串类型,以文本的方式,存储较小,安全性低(cookie欺骗,cookie截获)。始终在同源的HTTP请求中携带。

    sessionStorage(会话存储):关闭浏览器窗口即销毁。

    localStorage(本地存储):长期有效,用户不删除就会一直存在。

    上面两个是H5 webstorage提供:存储数据大小差不多,都是存在客户端,不与服务端交互通信。只能存储字符串类型,对于复杂对象可以使用JSON对象的stingfy和parse来处理。

    三个的共同点:都是保存在浏览器端,都是同源的。

    9、Ajax是什么?同步异步的区别?

    Ajax是一种无需重新加载整个页面就可以进行局部页面刷新的技术。它是异步的JavaScript和xml技术。

    Ajax原理:简单来说就是通过XmlHttpRequest对象向服务器发送异步请求,从服务器获取数据,然后通过JavaScript来操作DOM而更新页面。

    XmlHttpRequest是Ajax的核心机制.

    Ajax优点:页面无刷新、异步方式与服务器通信。

    Ajax缺点:干掉了back按钮,即对浏览器后退机制的破坏。安全问题、如跨站点脚本攻击、SQL注入等。对搜索引擎支持较弱。

    同步和异步:

    JavaScript是单线程的。也就意味着执行完一个任务之后才会执行另一个任务。所有任务分为两种,一种是同步任务,一种是异步任务。

    同步任务是指在主线程上排队执行的任务,只有前一个任务执行完毕才能执行后一个任务;异步任务是不进入主线程,而是在任务队列,主线程执行完毕,任务队列请求执行,该任务才会进入主线程执行。

    10、事件委托、事件冒泡、事件捕获。

    事件委托:利用事件冒泡来给父元素绑定事件,监听子元素的事件行为,并确定是哪个子元素的事件。优点:能够减少dom操作、提高代码性能。

    事件冒泡:IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到不具体的节点。由内到外。所有现代浏览器都支持事件冒泡。

    事件捕获:它的思想是从不具体的节点应该更早的接收事件,而最具体的节点应该最后接收到事件。由外到内。

  • 相关阅读:
    Java实现 蓝桥杯 历届试题 连号区间数
    Java实现 蓝桥杯 历届试题 连号区间数
    Java实现 蓝桥杯 历届试题 连号区间数
    Java实现 蓝桥杯 历届试题 连号区间数
    Java实现 蓝桥杯 历届试题 连号区间数
    Java实现 蓝桥杯 历届试题 大臣的旅费
    Java实现 蓝桥杯 历届试题 大臣的旅费
    Java实现 蓝桥杯 历届试题 大臣的旅费
    Java实现 蓝桥杯 历届试题 大臣的旅费
    Navicat查询哪些表有指定字段名
  • 原文地址:https://www.cnblogs.com/xguoz/p/8964962.html
Copyright © 2011-2022 走看看