今天面试的几个面试题

最新推荐文章于 2022-02-23 09:47:44 发布

weixin_43509051

最新推荐文章于 2022-02-23 09:47:44 发布

阅读量153

点赞数

分类专栏：面经和总结

本文链接：https://blog.csdn.net/weixin_43509051/article/details/94391397

版权

面经和总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.用CSS实现一个圆形中间带加号，鼠标移入的时候变为减号且具有边框阴影。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <style> 
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            border-radius: 50%;
            position: relative;
        }
        .box > #hengxian {
            width: 100px;
            position: absolute;
            top: 50px;
            transform: translateY(-50%);
        }
        .box > #shuxian {
            width: 100px;
            position: absolute;
            top: 50px;
            transform: translateY(-50%);
            transform: rotate(90deg);
        }
        .box:hover {
            box-shadow: -5px -5px 20px rgba(0, 0, 0, 0.3) inset;
            
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <hr id="hengxian">
        <hr id="shuxian">
    </div>
    <script>
        var box = document.getElementsByClassName("box")[0];        
        var shuxian = document.getElementById("shuxian");
        // shuxian.removeAttribute();
        box.onmouseover = function(){
            shuxian.style.display = "none"
        }
        box.onmouseout = function(){
            shuxian.style.display = ""
        }

    </script>
</body>
</html>

需要注意的几个点：

1.水平垂直居中都可以用子绝父相定位之后设置top或者left，然后再设置transform: translate(-50%)让元素自身宽度或者高度的一般返回来从而实现水平或者垂直居中。
2.css实现元素的旋转：transform: rotate(90deg)。
使用transform-origin属性，可以改变变形的基准点。
用法：transform-origin: 10px 10px;
共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；
两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。
3.css实现边框阴影：box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
4.鼠标移入移出显示/隐藏的写法，项目中经常会用到的一个东西。
用js操作DOM元素的。style.display属性

2.实现顶部和底部固定，中间高度自适应的布局。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>顶部和底部固定定位，中间高度自适应(使用定位)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .body {
            height: 100%;
        }
        .top {
            width: 100%;
            height: 50px;
            position: fixed;
            top: 0;
            background-color: pink;
        }
        .bottom {
            width: 100%;
            height: 50px;
            position: fixed;
            bottom: 0;
            background-color: pink;
        }
        .content {
            width: 90%;
            position: absolute;
            top: 50px;
            bottom: 50px;
            background-color: yellow;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="content"></div>
    <div class="bottom"></div>
</body>
</html>

用flex布局应该也可以实现相同的效果，但是用justify-content: space-between面试官说不对，理由是没有办法调整top和content，以及bottom和content之间的间距，用flex如何解决目前还没有研究，得到的经验教训就是以后写这种三列布局自适应或者中间自适应的就无脑用定位解决就完事了。

3.正则表达式

出了几个题，让写几个正则表达式都代表什么。没系统学过正则表达式，这一块短板应该尽早补上。

4.三个js的函数的应用

console.log(parseInt("50px"));	//50
console.log(Math.abs(20, -10));		//20
console.log([1,2].push([3,4]));		//3
console.log([1,2].concat([3,4]));	//[1,2,3,4]