点击打开视频讲解面试技巧+面试全过程

一、HTML

1、语义话的目的是什么？

语义化的主要目的可以概括为用正确的标签做正确的事

HTMl语义化可以让页面的内容结构化，以便于浏览器解析和搜索引擎解析，
并且提高了代码的可读性便于代码维护，
1
2
3
4

2、HTML5新增元素

Canvas绘图以及SVG绘图。
拖放（Drag and drop）API
语义化标签（header、nav、footer、article、section）
音频、视频（audio、video）API
地理定位（Geolocation）
本地离线存储（localStorage）,长期存储数据，关闭浏览器后不丢失。
会话储存（sessionStorage）,数据在关闭浏览器后自动删除。
表单控件（calendar、date、time、email、url、search）
1
2
3
4
5
6
7
8

3、cookie与sessionStorage和localStorage的区别

保存方式
cookie存放在客户的浏览器上。
session都在客户端中保存，不参与服务器通讯。

生命周期
cookie可设置失效时间
localStorage除非手动清除否则永久保存
sessionStorage关闭当前页面或浏览器后失效

存储的大小
cookie 4kb左右
session 5M

易用性
cookie需自己封装
session可以接受原生接口

因为cookie每次请求都会携带在http请求中,所以它的主要用来识别用户登录,localStorage可以用
来跨页面传参,sessionStorage可以用来保留一些临时数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

点击打开视频讲解更加详细

点击打开文章详解

二、CSS

1、CSS有哪些基本的选择器，执行先后顺序？

id选择器 => #myId {}
类选择器 => .myClass {}
标签选择器 => p,h1 {}
后代选择器 => div h1 {}
子选择器 => div>h1 {}
兄弟选择器(所有的兄弟) => ul~h1 {}
相邻兄弟选择器 => ul+h1 {}
属性选择器 => li[name='sss'] {}
伪类选择器 => h1:hover {}
伪元素选择器 => h1::before{}
通配符选择器* => * {}
1
2
3
4
5
6
7
8
9
10
11

!important>内联样式（非选择器）>ID选择器>类选择器>标签选择器>通配符选择器（*）

2、垂直水平居中方式有哪些？

CSS 中几种最常用的水平垂直居中的方法

3、常用布局方式有哪些？什么是盒模型？

点击打开视频详解

点击打开文章详解

4、常用的块元素与行内元素有哪些？有什么特征

块元素：div、h1~h6、ul、li、table、p、br、form。
特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行

行内元素：span、a、img、textarea、select、option、input。
特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）。
1
2
3
4
5

5、清除浮动

父级div定义overflow:hidden（如果父级元素有定位元素超出父级，超出部分会隐藏，）
给浮动元素父级增加标签（由于新增标签会造成不必要的渲染，不建议使用）
伪元素清除浮动：给浮动元素父级增加 .clearfix::after（content: ‘’; display: table; 
clear: both;）（不会新增标签，不会有其他影响，）
1
2
3
4

6、CSS3新特征

圆角（border-radius）
阴影（box-shadow）
文字特效(text-shadow)
线性渐变（gradient）
变换(transform)
更多的CSS选择器
更多背景设置（background）
色彩模式（rgba）
伪元素（::selection）
媒体查询（@media）
多栏布局（column）
图片边框（border-image）
1
2
3
4
5
6
7
8
9
10
11
12

7、CSS中有哪些长度单位？

绝对长度单位：px
百分比: %
相对父元素字体大小单位: em
相对于根元素字体大小的单位: rem
相对于视口*宽度的百分比（100vw即视窗宽度的100%）: vw
相对于视口*高度的百分比（100vh即视窗高度的100%）: vh
1
2
3
4
5
6

8、px、em、rem的区别

点击打开文章详解

9、display:none和visibility:hidden的区别

display:none：隐藏元素，在文档布局中不在给它分配空间（从文档中移除），会引起回流（重排）
visibility:hidden: 隐藏元素，但是在文档布局中仍保留原来的空间（还在文档中），
不会引起回流（重绘）
1
2
3

10、用CSS 实现三角形

点击打开视频讲解

点击打开文章讲解

11、伪类和伪元素的区别

点击打开文章讲解

12、什么是重绘，重排？如何解决？

重绘（repaint/redraw）

某个dom节点的颜色，背景颜色变了，字体大小，只影响自己，不影响其他元素。

注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。

重排（回流/reflow/重构）

某个dom节点的宽高，布局，隐藏等发生改变，不仅自身发生了改变，而且其他元素也会受到影响随之发生改变。每个页面最少一次回流，就是页面第一次加载的时候。

触发重排的原因

页面初始化渲染（无可避免）
添加或删除可见的DOM元素
元素尺寸的改变------大小，外边距；边框
浏览器窗口尺寸的变化
填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变
读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,
　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　
　currentStyle(IE)　)
1
2
3
4
5
6
7
8

1.重绘不一定重排，但是重排一定会重绘
2.重绘和重排的成本都是非常高的，要尽量减少dom的增删改

如何解决

不要直接操作样式，先设置好class，然后修改DOM的className;
position:absolute 与flex 不会导致重排
不要把DOM 节点的属性放在一个循环当成循环的变量；
需要动画的元素脱离文档流；
不使用table 布局，
尽量不修改影响范围比较大的DOM;
如果要多次添加DOM,先使用  document.createDocumentFragment() 创建一个盒子，
完盒子里面先添加子元素，添加完成在插入元素中；
1
2
3
4
5
6
7
8

13、transition 都有哪些过度属性？

点击打开视频讲解更详细

点击打开文章详解

14、link和@import的区别？

link属于html标签，而@import是css提供的。
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载的。
兼容性问题：@import只在IE5以上才能识别，而link是html标签，无兼容性问题。
权重问题:@import的权重要高于link。
DOM操作:DOM可以操作link中的样式，而不可以操作@import中的样式。
1
2
3
4
5

<!-- html 文件 -->

<!-- link 方式，推荐 -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<!-- @import 方式 -->
<style type="text/css" media="screen">
    @import url(style.css);
</style>
1
2
3
4
5
6
7
8
9

15、常用的动画库有哪些？

点击打开视频讲解更详细

点击打开文章详解

16、什么是BFC

点击打开视频讲解更加详细

点击打开文章讲解

17、href与src的区别

点击打开文章讲解

18、如何让 CSS 只在当前组件中起作用？

将当前组件的