文章12
标签10
分类3

整理遇到的面试题目(1)

未来的路还很长很长,菜到自闭。

1.css实现水平垂直居中的方法:

定宽高的情况

绝对定位+margin:auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中</title>
    <style>
       .test {
           width: 300px;
           height: 200px;
           background: red;
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           margin: auto;
       }

    </style>
</head>
<body>
      <div class="test"></div>
</body>
</html>

绝对定位+负margin;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中</title>
    <style>
       .test {
           width: 300px;
           height: 200px;
           background: red;
           position: absolute;
           margin: 0 auto;
           top: 50%;
           left: 50%;
           margin-left: -150px;
           margin-top: -100px;
       }

    </style>
</head>
<body>
      <div class="test"></div>
</body>
</html>

绝对定位+calc计算函数;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中</title>
    <style>
       .test {
           width: 100px;
           height: 100px;
           background: red;
           position: absolute;
           top: calc(50% - 50px);
           left: calc(50% - 50px);
       }

    </style>
</head>
<body>
      <div class="test"></div>
</body>
</html>

子元素未定宽高的情况(适用宽高);

绝对定位+transform:translate;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中</title>
    <style>
       .test {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%,-50%);
           background: red;
       }

    </style>
</head>
<body>
      <div class="test">asdas</div>
</body>
</html>

flex布局;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中</title>
    <style>
        .box {
          width: 500px;
          height: 500px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid red;
       }

    </style>
</head>
<body>
      <div class="box">
          <div class="test">asdasd</div>
      </div>
</body>
</html>

grid布局;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中</title>
    <style>
        .box {
           width: 300px;
           height: 300px;
           display: grid;
           border: 1px solid red;
       }
       .test {
           align-self: center;
           justify-self: center;
       }

    </style>
</head>
<body>
      <div class="box">
          <div class="test">asdasd</div>
      </div>
</body>
</html>

css的table布局;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平垂直居中</title>
    <style>
        .box {
           width: 300px;
           height: 300px;
           display: table-cell;
           text-align: center;
           vertical-align: middle;
           border: 1px solid red;
       }
       .test {
           display: inline-block;
       }

    </style>
</head>
<body>
      <div class="box">
          <div class="test">asdasd</div>
      </div>
</body>
</html>

2.使用css画一个三角形;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用css画三角形</title>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border: 125px solid transparent;
            border-top: 125px solid red;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

3.单行文字超出显示省略号;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用css画三角形</title>
    <style>
        .ellipsis {
           width: 100px;
           overflow: hidden;
           text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="ellipsis">asdasdassdasdasdasdasdasd</div>
</body>
</html>

4.ul > li * 10结构中,使前5个li背景色为红(纯css实现);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用css画三角形</title>
    <style>
       ul>li:nth-child(-n+5) {
           background-color: red;
       }
    </style>
</head>
<body>
     <ul>
         <li>a</li>
         <li>b</li>
         <li>c</li>
         <li>d</li>
         <li>e</li>
         <li>f</li>
         <li>g</li>
         <li>h</li>
         <li>i</li>
         <li>j</li>
     </ul>
</body>
</html>

5.为动态生成的节点绑定点击事件(JQ);

$("#test").on("click", function(){

})

6.写一个方法,实现数组arr=[1,1,3,4,2,4,7]去重并从小到大排列,结果为newArr=[1,2,3,4,7];

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js去重排序</title>
    <script>
        function drsort() {
            let arr = [1,1,3,4,2,4,7];
            let newArr = [];
            for (let i=0;i<arr.length; i++) {
                if (newArr.indexOf(arr[i]) === -1) {
                    newArr.push(arr[i]);
                }
            }
            newArr.sort(function (a,b) {
                return a-b;
            })
            console.log(newArr);
        }
        window.onload = function () {
            drsort();
        }
    </script>
</head>
<body>

</body>
</html>

7.JS实现以YYYY-MM-DD的格式输出当天的日期(如2019-10-09);

 function getDay() {
            let today = new Date();
            let newDate = today.getFullYear() + '-' + (today.getMonth() +1) + '-' + today.getDate();
            console.log(newDate);
        }
        window.onload = function () {
            getDay();
        }

8.字符串str=’abcdefg’,请截取newStr=’efg’;

window.onload = function () {
            let str = 'abcdefg';
            console.log(str.substring(4, 7));
        }

9.如何全局设置一个接口域名(Vue); //待更新—-

10.写一个登录拦截的路由卫士,未登录即跳转到登录页面(Vue);//待更新—-

还问了关于怪异盒子的问题,何为怪异盒子;

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。当不对doctype进行定义时,会触发怪异模式即成为怪异盒子;

1.在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
2.在怪异模式下,一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)

本文作者:Bunrun
本文链接:https://www.bugrun.cn/posts/f4ad.html
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可