金三银四跳槽季，前端面试题记录（2021），网络 & html & CSS篇

最新推荐文章于 2024-07-04 16:37:43 发布

柯闪电

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量174

点赞数

分类专栏：面试文章标签：前端面试

本文链接：https://blog.csdn.net/a895865025/article/details/115798822

版权

面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浏览器 & 网络

Q、常见的各个状态码理解

200 OK： 请求成功
204 No Content： 成功，但不返回响应实体

301 Moved Permanently： 永久重定向，资源将永久指向新分配的uri，下次访问将请求新的uri
302 Found： 临时重定向，资源临时被分配新的uri，但不是永久移动，下次访问还是会现请求本次uri
303 See Other： 与302相同，但303 状态码明确表示客户端应当采用 GET 方法获取资源，比如本次获取是用post请求，返回303，则会再次使用get去请求新uri
304 Not Modified： 协商缓存相关，如果请求中包含 If Modified Since，就说明已经有缓存在客户端。服务端只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。返回304，则代表浏览器可以继续使用缓存数据。

400 Bad Request： 请求头或者请求体语法错误，服务器无法理解请求
401 Unauthorized： 未经授权，需要授权
403 Forbidden： 服务器拒绝访问资源
404 Not Found： 服务器找不到该资源
405 Method Not Allowed： 请求的方法（post、put、delete等）被该服务禁止使用

500 Internal Server Error： 服务器错误，无法处理本次请求
502 Bad Gateway： 网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
503 Service Unavailable： 服务不可用，比如后端服务在重新启动
504 Gateway Timeout： 请求超时

Q、CORS的简单请求以及复杂请求

当请求地址的协议、域名、端口任意一项与当前应用不一致，则会造成跨域，此时会发起一个跨域 HTTP 请求；
而CORS则是一种解决跨域问题的方案，也是W3C标准方案；
而针对CORS请求，浏览器将其分成两个类型：简单请求和复杂请求；

简单请求的条件（来源MDN文档）：

符合上面的条件，则可以直接请求服务器，而针对复杂请求（非简单请求），会先发送一个options请求，询问服务器是否允许options请求带上如下信息

Request Header	作用
Access-Control-Request-Method	告诉服务器实际请求所使用的 HTTP 方法
Access-Control-Request-Headers	告诉服务器实际请求所携带的自定义首部字段，本次实际请求首部字段中content-type为自定义

如服务器返回允许，则才会发送真正的请求

Q、三次握手与四次握手

视频资料：三次握手与四次挥手

Q、HTTPS

在http的基础上加上ssl加密传输
视频资料：一个完整的SSL连接过程

Q、HTTP2的新特性

多路复用、二进制分帧传输、支持服务器推送、头部压缩、可设置优先级；
HTTP2 详解

Q、HTTP3

由谷歌推出的一种新的传输方式，与之前的http所用的TCP不同，是基于UDP > QUIC(Quick UDP Internet Connections)的协议，特点是比tcp更快，没有三次握手与四次握手，在安全性也有一定保证

Google、Facebook等均开始支持的HTTP3到底是个什么鬼？

Q、在浏览器地址栏输入网页地址到渲染完成呈现到用户，这其中发生了什么

这个问题是面试经典典中典，因为这里涉及到很多网络、浏览器、html.css.js代码解析运行相关知识，如背下来，能说个30分钟都不为过，刷时长必备
当···时发生了什么？github

Q、cookies和session的区别

储存位置： cookies储存在浏览器中，session在服务器内存里，所以session对服务器的压力更大；
大小类型： cookies最大为4kb，并且是字符串格式或者二进制格式，而由于session储存在服务器内存中，所以无限制数据类型和大小；
跨域支持： cookie支持跨域名访问。session不支持跨域名访问；
安全性：cookies是明文保存在浏览器，所以容易被别人修改欺骗。而session在服务器内存里，别人无法修改

html & CSS

Q、对html语义化的理解

用正确的标签做正确的事，页面内容结构化，帮助搜索引擎抓取，增加可读性；
html5增加了main、header、footer、nav、article、section，增强了html的语义；

Q、盒模型

在这里插入图片描述

IE模型：width包括content、padding、border；
标准模型：width只是content内容，是现在普遍使用的；

设置： 

box-sizing: border-box; IE模型
box-sizing: content-box; 标准模型

Q、BFC，块级格式化上下文

被激活了BFC的元素，可以看做是一个沙箱，里面的样式无论如何设置，都不会影响外面的布局，并带有特殊作用，如不会有浮动高度坍塌，元素间margin重叠等问题；

触发条件

根元素<html><body>天生激活BFC

设置浮动的元素
float: left;
float: right;

设置绝对、固定定位的元素
position: absolute;
position: fixed;

display设置为以下属性的元素
display: flex;
display: inline-flex;
display: inline-block;
display: table-cell;
display: table-caption;

overflow设置为以下的元素
overflow: hidden;
overflow: auto;
overflow: scroll;

Q、移动端1px问题

现代手机屏幕上的一个css相对单位px由4个（2x）或者9个像素点（3x）组成，所以设置1px是，在手机上实际是几个像素点去显示边框色，为了达到真正的1px边框，需要利用css3的scale(0.5)去缩小至手机屏幕的物理像素1px；


/* 全边框 */
.border-1px {
    position: realative;
}
.border-1px:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    border-radius: 4px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: top left;
}

/* 上边框 */
/* 剩下三个都是可以举一反三，就不写了 */
.border-1px-top {
    position: realative;
}
.border-1px-top:after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: 0;
    left: 0;
    /* 跟父级元素一样宽 */
    width: 100%;
    height: 1px;
    background: #000;
    /* 缩小高度0.5 */
    -webkit-transform: scale(1, 0.5);
    transform: scaleY(1, 0.5);
}

Q、实现一个自适应正方形

/* 方法一：vw单位 */
.square-1{
  width: 100vw;
  height: 100vw;
}

/* 方法二：padding撑开 */
.square-2{ 
    width: 50%;
    padding-bottom:100%;
    height: 0;
}

/* 方法二：伪元素撑开 */
.square-3 {
	width: 100%;
	/* 需要overflow: hidden;来形成BFC区域*/
	overflow: hidden;
}

.square-3:after {
	 content: '';
	 display: block;
	 margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}

Q、实现一个固定宽度，当文字只有一行居中，文字两行左对齐的模态框

主要文本元素设置text-align: left;margin: 0 auto;

<style>
    .modal {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        z-index: 999;

        width: 300px;
        padding: 30px;
    }

    .modal__content {
        margin: 0 auto;
        text-align: left;
        
        font-size: 16px;
        color: #333;
    }
</style>
<body>
    <div class="modal">
        <p class="modal__content"></p>
    </div>
 </body>

Q、实现左边固定宽度，右边宽度自适应布局

<style>
    .wrapper {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    .wrapper__left {
        flex: 0 0 300px;
    }
    .wrapper__right {
        flex: auto;
    }
</style>
 <body>
    <div class="wrapper">
        <div class="wrapper__left"></div>
        <div class="wrapper__right"></div>
    </div>
 </body>

Q、实现底部始终显示在底部，头部和content高度跟随内容变化

<style>
    .body {
        height: 1000px;
        padding-bottom: 100px;
    }
    footer {
        position: sticky;
        bottom: 0;
        left: 0;
    }
</style>
<body>
   <header></header>
   <div class="body"></div>
   <footer></footer>
</body>

Q、各种居中

水平居中
margin: 0 auto;


水平垂直居中： 
定位方法
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

calc方法，需要已知高度宽度
position: absolute;;
top: calc(50% - 一半高度);
left: calc(50% - 一半宽度);

flex布局
display: flex;
justify-content: center;
align-items: center;

Q、flex布局

使用display:flex 弹性布局

柯闪电

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
金三银四跳槽季，前端面试题记录（2021），网络 & html & CSS篇

浏览器 & 网络Q、常见的各个状态码理解200 OK：请求成功**204 No Content: 成功，但不返回响应实体301 Moved Permanently：永久重定向，资源将永久指向新分配的uri，下次访问将请求新的uri302 Found：临时重定向，资源临时被分配新的uri，但不是永久移动，下次访问还是会现请求本次uri303 See Other：与302相同，但303 状态码明确表示客户端应当采用 GET 方法获取资源，比如本次获取是用post请求，返回303，则会
复制链接

扫一扫