前端校招面试知识点汇总

最新推荐文章于 2024-07-25 14:02:05 发布

啥哎_J

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量204

点赞数 2

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_43468609/article/details/115448512

版权

自己整理的前端复习知识点，内容可能有错误，希望大家多多指正
持续更新中…

HTML部分

这部分设计的内容比较少，大家只需要熟练掌握常用标签的使用就好啦

1.html5的新特性

html5新增了一些标签
- 语义化标签：header、footer、section、nav、aside、article
- 增强型表单标签：input（color、date、datetime…）
- 新增的表单元素：datelist、keygen、output
- 音频视频标签：audio、video
- 绘图标签：canvas
新增拖拽api：drag
新增地理位置api
新增本地存储：localStorage、sessionStorage
新增 WebSocket

CSS 部分

css盒模型

盒子模型包括IE盒模型和标准盒模型，通过box-sizing属性设置

IE盒模型
- width 和 height 设置的范围包括 content、padding、border
- 设置属性：border-box
标准盒模型
- width 和 height 设置的范围仅包括 content
- 设置属性：content-box（默认值）

flex布局

常用属性及其作用
- 父元素属性：display: flex,flex-direction,flex-wrap,flex-flow,justify-content,align-content,align-items
- 项目属性：order,flex-grow,flex-shrink,flex-basis,flex,align-self
flex 属性简写含义
- 默认：0 1 auto
- none：0 0 auto
- auto：1 1 auto
- 数值：数值 1 0%
- 长度/百分比：1 1 长度/百分比

水平垂直居中的方法

我把它分为两类，一类是宽高确定，一类是宽高根据内容自适应

宽高确定

margin:auto 法

.parent{
    position: relative;
    height: 400px;
    width: 400px;
}
.son{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

负边距法

.parent{
    position: relative;
    height: 400px;
    width: 400px;
}
.son{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

宽高自适应

transform 法

.parent{
    position: relative;
    height: 400px;
    width: 400px;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}

flex 法

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 400px;
}
.son{
}

table-cell 法

.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 400px;
    width: 400px;
}
.son{
    display: inline-block;
}

什么是BFC

块级格式化上下文，内部是一个独立的渲染区域

开启BFC元素的特点
- 不会被浮动元素覆盖（可用于两栏布局）
- 内部可包含浮动元素（可用于清除浮动）
- 子元素和父元素的外边距不会发生重叠（可解决margin重叠问题）
- 内部的盒子会在垂直方向上一个接一个放置
- 每个盒子的左边与包含块的左边相接触
开启BFC的方法
- 开启浮动
- position为absolute、fixed
- display为inline-block、flex、table-cell…
- overflow不为visible

块元素、行内元素、行内块元素的区别

块元素：独占一行，可以设置高度、宽度、margin和padding
行内元素：不独占一行，不能设置高度、宽度，不能设置垂直方向的margin、padding
行内块元素：不独占一行，可以设置高度、宽度、margin和padding

单行文本省略和多行文本省略

单行文本省略

.test{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

多行文本省略

.test{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

元素隐藏的方法及区别

display: none，改变页面布局、不会响应事件
visiblity: hidden，不会改变页面布局、不响应事件
opacity: 0，不会改变页面布局、响应事件

外边距重叠问题

普通流种相邻的兄弟/父子元素垂直方向会发生margin重叠问题

重叠结果
- 都为正值，取最大值
- 都为负值，取绝对值较大的
- 一正一负，取两者之和
解决方法
- 给父元素添加border或padding
- 开启BFC

position属性及含义

relative 相对定位

开启相对定位的元素仍然占据原来的空间，设置移动后相对元素原始位置进行移动，会覆盖其他普通元素，但移动后仍会占据原来的空间
absolute 绝对定位

开启绝对定位的元素不会占据原来的空间，设置移动后相对于开启了定位的父元素进行移动，会覆盖掉其他元素（包括相对定位元素），移动后不会占据原来的空间
fixed 固定定位

开启固定定位的元素不会占据原来的空间，设置移动后相对窗口进行定位，即使窗口滚动也不会移动，移动后不会占据原来的空间
sticky 粘滞定位

开启粘滞定位的元素按普通文档流定位，在跨越阈值之间表现为相对定位，之后表现为固定定位

清除浮动的方法

清除浮动主要是为了解决父元素因为子元素浮动导致内部高度为0的问题

使用 clear 属性
- 在浮动元素后面添加一个空div，设置样式clear: left
开启BFC
- 给父元素设置overflow
- 设置父元素浮动

使用伪类

.box::after{
    content: '';
    display: block;
    clear: both;
}

CSS3新特性

伪类、伪元素选择器
背景、边框、透明度属性
2D、3D变换
动画
flex布局

CSS选择器及优先级

选择器
- !important（10000）
- 内联（1000）
- id 选择器（100）
- 类选择器（10）
- 伪类选择器（10）
- 元素选择器（1）
- 伪元素选择器（1）
- 通配选择器（0）

两栏布局（左侧固定，右侧自适应）

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 300px;
        }
        .left{
            width: 200px;
            float: left;
            background: rebeccapurple;
        }
        .right{
            margin-left: 200px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 300px;
        }
        .left{
            width: 200px;
            float: left;
            background: rebeccapurple;
        }
        .right{
            overflow: hidden;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

三栏布局

重绘和重排

CSS画三角形

移动端适配（rem、em、vh、vw）

JavaScript 部分

闭包，使用场景

类的创建和继承方式

事件流

事件委托含义、优点和缺点

new 操作符做了什么

改变 this 指向的方法

节流和防抖

异步加载 js 的方法

跨域

ES6新特性

数组去重

排序算法

数组扁平化

深/浅克隆

下划线转驼峰，驼峰转下划线

参数分解

箭头函数

获得对象身上的属性

基本数据类型和引用数据类型的区别

js 操作 dom 相关 api

查找节点
- getElementById（大小写敏感，返回第一个）
- getElementsByClassName
- getElementsByTagName
- getElementsByName
- querySelector
- querySelectorAll
创建节点
- createElement
- createTextNode
- createDocumentFragment
- cloneNode
修改节点
- appendChild
- insertBefore(newNode, refNode)
- removeChild
- replaceChild(newChild, oldChild)
关系节点
- parentNode
- children ——> 子节点都是 Element
- childNodes ——> 可能包含文本节点、注释节点
- firstChild ——> firstElementChild
- lastChild ——> lastElementChild
- previousSibling ——> previousElementSibling
- nextSibling ——> nextElementSibling
属性节点
- setAttribute(name, value)
- getAttribute(name)
- hasAttribute(name)
- removeAttribute(name)
- dateset
样式属性
- style：可读可写，内联样式
- window.getComputedStyle(element, 伪类)
- document.defaultView.getComputed(element, 伪类)
- element.currentStyle

事件循环

promise

== 、 === 、Object.is()

计算机网络部分

HTTP 状态码

HTTP 和 HTTPS 的区别

GET 和 POST 的区别

HTTP2.0 的新特性

HTTP 的请求方式

TCP 和 UDP

浏览器输入 url 点击回车发生了什么

cookie 和 session 的区别

sessionStorage 和 localStorage 的区别

XSS 和 CSRF

强缓存和协商缓存

前端框架部分

MVC 和 MVVM

Vue的响应式原理

Vue如何实现双向数据绑定

v-if 和 v-show

为什么vue组件的data是函数

vue生命周期函数

vue组件通信

vue插槽

vue-router的两种模式

虚拟dom和diff算法

其他

进度条与文字反色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .process{
            width: 100px;
            height: 20px;
            position: relative;
            overflow: hidden;
            background: pink;
        }
        .process1{
            width: 100%;
            height: 100%;
            color: rebeccapurple;
            text-align: center;
            position: absolute;
        }
        .process2{
            width: 100%;
            height: 100%;
            background-color: rebeccapurple;
            position: absolute;
            left: -60%;
            overflow: hidden;
        }
        .text{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 60%;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="process">
        <div class="process1">40%</div>
        <div class="process2">
            <div class="text">40%</div>
        </div>
    </div>
</body>
</html>