不再犹豫
分享是一种美德

面试题目自练习20221207

1、写一个左中右布局占满屏幕,其中左右两块是固定宽度200,中间自适应宽,要求先加载中间块,请写出结构及样式

<div id="left">我在左边</div>

<div id="center">我在中间</div>

<div id="right">我在右边</div>
html,body{
    margin:0;
    width:100%;
}

#left,#right{
    width:200px;
    height:200px;
    background-color:aqua;
    position:absolute;
}
#left{
    left:0;
    top:0;
}
#right{
    right:0;
    top:0;
}
#center{
    margin:0 200px;
    background-color:blue;
    height:200px;
}

或者利用弹性盒子

<style>
    *{
        margin:0;
        padding:0;
    }
    html,body{
 
        height:100%;
    }
    body{
        display:flex;
    }
    .left{
        width:100px;
        background-color:rgb(199,170,223);
    }
    .center{
        background-color:rgb(151,228,148);
        flex:1;
    }
    .right{
        width:100px;
        background-color:rgb(199,170,223);
    }
</style>
<body>

    <div class="left">我在左边</div>

    <div class="center">我在中间</div>

    <div class="right">我在右边</div>

</body>

2、为什么typeof null 是object?

不同的数据类型在底层都是通过二进制表示的,二进制前三位为000则会被判断为object类型,

而null底层的二进制全都是0,那前三位肯定也是000,所以被判断为object

3、HTTP和HTTPS的基本概念

http:是一个客户端和服务端请求和应答的标准(TCP),用于从www服务器传输超文本到本地浏览器的超文本传输协议。

https:是以安全为目标的HTTP通道,即HTTP下加入SSL层进行加密。其作用是:建立一个信息安全通道,确保数据的传输,确保网站的真实性。

补充:SSL是洋文“Secure Sockets Layer”的缩写,中文叫做“安全套接层”。

4、阐述清楚浮动的几种方式(常见问题)

(1)父级div定义height

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。

优点:简单、代码少、容易掌握

缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

(2)父级div定义overflow:hidden

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度

优点:简单、代码少、浏览器支持好

5、cookie、sessionStorage、localStorage的区别

相同点:都是在开发中用到的临时存储客户端会话信息或者数据的方法

不同点:

(1)存储的时间有效期不同

  • cookie的有效期是可以设置的,默认的情况下是关闭浏览器后失效
  • sessionStorage的有效期是仅保持在当前页面,关闭当前会话页或者浏览器后就会失效
  • localStorage的有效期是在不进行手动删除的情况下是一直有效的

(2)存储的大小不同

  • cookie的存储是4kb左右,存储量较小,一般页面最多存储20条左右信息
  • localStorage和sessionStorage的存储容量是5Mb(官方介绍,可能和浏览器有部分差异性)

(3)与服务端的通信

  • cookie会参与到与服务端的通信中,一般会携带在http请求的头部中,例如一些关键密匙验证等。
  • localStorage和sessionStorage是单纯的前端存储,不参与与服务端的通信

学无止境,

欢迎大家关注公众号:

赞(4)
转载请注明来源地址:不再犹豫 » 面试题目自练习20221207

评论 抢沙发

评论前必须登录!