11~13k(初/中级)前端面试看这篇就够了

一、HTML + CSS

1、常用实用技巧

01、定位：

position:absolute/relative/fixed/static

static:静态定位；

absolute:绝对定位， 绝对定位的元素相对于最近的定位祖先元素进行定位。然而，如果绝对定位的元素没有定位祖先，它将相对于文档主体（body）进行定位

relative:相对定位，相对于自己的初始位置进行定位；

fixed:固定定位，固定定位的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。

02、盒模型：

margin:外边距；

border:边框；

padding:内边距；

content:内容；

盒模型的宽：左外边距+左边框+左内边距+width+右内边距+右边框+右外边距；

盒模型的高：上外边距+上边框+上内边距+height+下内边距+下边框+下外边距；

03、垂直水品居中(内容的垂直水品居中和盒子的垂直水平居中)

(1)、内容垂直水品居中：

height=line-height;

text-align:center;

(2) 、盒子垂直水平居中两种方法：

方法1：

position:absolute;

left: 50%;

top: 50%;

margin-left: -盒子宽一半；

margin-top:-盒子高一般；

方法2：

position:absolute;

left: 50%;

top: 50%;

transform:translate(-50%,-50%);

2、知识点

01. HTML5新特性有哪些

新增了语义化标签如header、footer等

新增了视频（video）音频（audio）标签

新增了canvas和svg绘图

新增了地理定位（navigator.geolocation）

新增了拖拽API     segmentfault.com/a/119000000…

新增了多线程技术web worker和即时通讯技术web socket等

02. CSS3有哪些新特性

增加了transition渐变、animation动画、选择器、阴影box-shadow、弹性布局flex、媒体查询@media等

03. W3C标准有哪些

W3C标准不是一个标准，而是一系列标准的总和；

标准分为三个层面，结构(html)、行为(js)、表现(css)

标准有:

文档类型需要声明（DOCTYPE）

编码格式需要声明

javascript代码需要定义

css代码需要定义

标签名字和标签内部属性名字小写等

04. 常见的浏览器兼容问题有哪些

不同浏览器里面的

标签的外间距和内间距表现不同，解决方案：*{margin:0;padding:0},

图片有默认间距,解决方案：父标签设置font-size:0

05. CSS伪类选择器有哪些

:before 在...之前

:after   在...之后

:active   点击

:hover   鼠标悬停

:first-letter   所有文字当中的第一个

:first-line    所选元素当中的第一行

:first-child   第一个子元素

:nth-child()   获取子元素

:nth-of-type   获取指定类型的子元素

等等几十个

06. 什么是子选择器，什么是后代选择器

表示子选择器，例如 div>span 获取div的子标签span

空格 表示后代选择器，例如 div span 获取div里面所有的span

07. CSS权重的优先级是怎样的

    !important > 内联样式 > id > class > 标签名字

    权重可以叠加

08. 浏览器怎么做兼容

IE浏览器一般使用css hack方式来解决，即在代码前面加上* 、_、 +等符号

谷歌一般在属性前面加上-webkit-来进行兼容

火狐一般在属性前面加上-moz-进行兼容

webpack使用postcss给css属性自动添加前缀，进行兼容

09. 平时是怎么做适配的

通常的方案是通过rem配合媒体查询(@media)来进行适配，

标签或者文本设置大小的时候不设置px而是设置rem，

然后使用媒体查询根据屏幕大小来动态调整rem大小，那么所有设置rem单位的元素都会根据屏幕发生改变

010. rem和em有什么区别

em是相对于父级标签的字体大小来定义的

rem是相对于html标签的字体大小来定义的

011. canvas和svg有什么区别

都可以用来绘制图形，但是canvas是基于js来绘制的，svg是基于xml来绘制的

012. 页面优化有哪些方法

（1）减少 HTTP 请求
（2）减少 DOM 元素数量
（3）从页面中剥离 JavaScript 与 CSS
（4）移除重复脚本
（5）使用恰当的图片格式

13. 语义化的理解？

（1）html语义化就是让页面的内容结构化，便于浏览器、搜索引擎解析；

（2）在没有CSS样式情况下也以—种文档格式显示，并且是容易阅读的。

（3）使阅读源代码的人更容易将网站分块，便于阅读维护理解。

二、JS+jQuery

1、常用实用技巧

01. 数组的常用函数及其作用

juejin.cn/post/701582…

2、知识点

01. js基本数据类型有哪些

基本类型Number 、String、Boolean、Null、Undefined、symbol

引用类型Object

02. JS当中的typeof返回的类型有哪些

number 、string 、boolean 、 undefined 、symbol、function 、object

03. return，break，continue的区别是什么

return 必须写在函数内部，遇到return后函数内部剩余的代码不再执行，直接返回；还可以使用return返回一个值给外面使用

break 跳出循环，剩余的循环不再执行

continue  跳出本次循环，剩余的循环继续执行