【前端面试知识题】- 3. HTML && CSS

序列号	内容	链接
1	前端知识面试题 - http&https（2022版）	https://blog.csdn.net/qq_43061290/article/details/126651783
2	前端知识面试题 - 浏览器（2022版）	https://blog.csdn.net/qq_43061290/article/details/126776538
3	前端知识面试题 - HTML && CSS（2022版）	https://blog.csdn.net/qq_43061290/article/details/126776849
4.1	前端知识面试题 - JavaScript（2022版）	https://blog.csdn.net/qq_43061290/article/details/126845296
4.2	前端知识面试题 - JavaScript（2022版）	https://blog.csdn.net/qq_43061290/article/details/126863862
5	前端知识面试题 - TypeScript （2022版）	https://blog.csdn.net/qq_43061290/article/details/126985012
6.1	前端知识面试题 - Vue&&VueJs（2022版）	https://blog.csdn.net/qq_43061290/article/details/127021227
6.2	前端知识面试题 - Vue&&VueJs（2022版）	https://blog.csdn.net/qq_43061290/article/details/127021289
7	前端知识面试题 - React（2022版）	https://blog.csdn.net/qq_43061290/article/details/126690239
8	前端知识面试题 - nodeJs（2022版）	https://blog.csdn.net/qq_43061290/article/details/127140848
9	前端知识面试题 - Augluar（2022版）	https://blog.csdn.net/qq_43061290/article/details/127191959

一、 HTML5

1. HTML5 新特性、语义化

1. 概念：

HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】

2. 语义化标签：

header nav main article section aside footer

3. 语义化的优点:

• 在没CSS样式的情况下，页面整体也会呈现很好的结构效果
• 代码结构清晰，易于阅读，
• 利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
• 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

2. HTML5新特性有哪些

• 语义化标签
• 音视频处理API(audio,video)
• canvas / webGL
• 拖拽释放(Drag and drop) API
• history API
• requestAnimationFrame
• 地理位置(Geolocation)API
• webSocket
• web存储 localStorage、SessionStorage
• 表单控件，calendar、date、time、email、url、search

2、如何处理HTML5新标签的浏览器兼容问题？

IE8、IE7、IE6支持用 document. create Element产生标签，可以利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式（最好的方式是直接使用成熟的框架，使用最多的是 html5shim框架），可以用 IE hack引入该框架

<！--[if 1t IE 9]>

<！[end if]-->

3、如何区别HTML和HTML5？

用 DOCTYPE声明新增的结构元素和功能元素来区别它们。

4、什么是HTML5？

HTML5是最新的HTML标准，它的主要目标是提供所有内容，而不需要任何Flash、 SilverLight等的额外插件，这些内容来自动画、视频、富GUI等

HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（ WHATWG）合作输出的。

5 、新的HTML5文档类型和字符集是什么？

HTML5文档类型是<！doctype html>。

HTML5使用的字符集< meta charset=“UTF8”>。

6、HTML5 Canvas元素有什么作用？

Canvas元素用于在网页上绘制图形，该元素标签的强大之处在于可以直接在HTML上进行图形操作。

7、HTML5新增了哪些功能AP？

新增的功能API包括 Media APl、 Text Track API、 Application Cache API、User Interaction、 Data Transfer API、 Command API、 Constraint Validation API、 History API

8、HTML5的离线存储有哪些？

有以下离线存储localStorage，可长期存储数据，即浏览器关闭后数据不丢失session Storage，数据在浏览器关闭后自动删除，

9、HTML5的form如何关闭自动补全功能？

将不想要提示的frm元素下的 Input元素的 autocomplete属性设置为off

10、如何在HTML5页面中嵌入音频？

HTML5包含了嵌入音频文件的标准方式，支持的格式包括MP3、Wav和Ogg等，嵌入方式如下。

Your browser does'nt support audio embedding feature.

11、如何在HTML5页面中嵌入视频？

和嵌入音频文件一样，HTML5定义了嵌入视频的标准方式，支持的格式包括MP4、WebM和Ogg等，嵌入方式如下。

< video width=”450” height=”340” contro1s>

Your browser does'nt support video embedding feature.

12、HTML5引入了哪些新的表单属性？

新增表单属性包括 datalist、 datetime、 output、 keygen、date、 month、week、time、 number、 range、 emailurl

13、如何显示我们自己画的一个弹框？

可以用一个简单的方法，在页面上单击一个按钮，弹出一个弹框，而弹框也是自己写的一个div。单击前，先把弹框隐藏， onclick事件发生之后就会显示出来

14、HTML5应用缓存和常规的HTML浏览器缓存有什么差别？

HTML5应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML、CSS、图像和 JavaScript脚本并存在本地。该特性提升了网站的性能，可通过如下方式实现。

<！doctype html>

...... 与传统的浏览器缓存比较，该特性并不强制要求用户访问网站。

15、为什么HTML5里面不需要DTD（ Document Type Definition，文档类型定义）？如果不放入<！doctype html>标签，HTML5还会工作吗？

HTML5没有使用SGML或者 XHTML，它是一个全新的类型，因此不需要参考DTD。对于HTML5，仅须放置下面的文档类型代码，让浏览器识别HTML5文档。

如果不放入<！doctype html>标签，HTML5不会工作。浏览器将不能识别出它是HTML文档，同时HTML5的标签将不能正常工作。

16、哪些浏览器支持HTML5？

几乎所有的浏览器（如 Safari、 Chrome、 Firefox、 Opera、IE）都支持HTML5

17、本地存储和会话（事务）存储之间的区别是什么？

本地存储数据持续永久，但是会话存储在浏览器打开时有效，在浏览器关闭时会话重置存储数据。

18、HTML5中的应用缓存是什么？

HTML5应用缓存的最终目的是帮助用户离线浏览页面。换句话说，如果网络连接不可用，打开的页面就来自浏览器缓存，离线应用缓存可以帮助用户达到这个目的。

应用缓存可以帮助用户指定哪些文件需要缓存，哪些不需要

19、如果把HTML5看成一个开放平台，它的构建模块有哪些？

如果把HTML5看成一个开放平台，它的构建模块至少包括以下几个，如

。

≤nav>标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确

< header>标签用来定义文档的页眉。

< section>标签用来描述文档的结构。

< footer>标签用来定义页脚。在典型情况下，该元素会包含文档作者的姓名、文档的创作日期和联系信息

20、HTML5为什么只需要写<！doctype htm>？

HTML5不基于SGML，因此不需要对DTD进行引用，但是需要 DOCTYPE来规范浏览器的行为（让浏览器按照它们的方式来运行）。而HTM4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的类型。

21、HTML5应用程序缓存为应用带来什么优势？

应用程序缓存为应用带来3个优势。

（1）离线浏览，让用户可在应用离线时（网络不可用时）使用它们。

（2）速度，让已缓存资源加载得更快。

（3）减少服务器负载，让浏览器将只下载服务器更新过的资源。

22、与HTML4比较，HTML5废弃了哪些元素？

废弃的元素包括 frame、frameset、 noframe、 applet、big、 center和 basefont。

23、HTML5标准提供了哪些新的API？

HTML5提供很多新的AP1，包括 Media APl、 Text Track API、 Application Cache API、 User InteractionAPI、 Data Transfer API、 Command APl、 Constraintion Validation API和 History API

24、请你说一下 Web Worker和 WebSocket的作用。

Web Worker的作用如下：

（1）通过 worker= new Worker（url）加载一个 JavaScript文件，创建一个 Worker，同时返回一个 Worker实例

（2）用 worker.postMessage（data）向 Worker发送数据

（3）绑定 worker.onmessage接收 Worker发送过来的数据

（4）可以使用 worker.terminate()终止一个 Worker的执行。

WebSocket的作用如下。

它是Web应用程序的传输协议，提供了双向的、按序到达的数据流。它是HTML5新増的协议， WebSocket的连接是持久的，它在客户端和服务器之间保持双工连接，服务器的更新可以及时推送到客户端，而不需要客户端以一定的时间间隔去轮询。

25、如何实现浏览器内多个标签页之间的通信？

在标签页之间，调用 localstorge、 cookies等数据存储，可以实现标签页之间的通信

26、如何让 Websocket兼容低版本浏览器？

使用 Adobe Flash Socket、 ActiveX HTMLFile（E）、 multipart编码发送XHR

与长轮询发送XHR等，可以实现不支持 WebSocket API的浏览器对 Web Socket的兼容。

27、HTML5为浏览器提供了哪些数据存储方案？

在较高版本的浏览器中，提供了 sessionStorage：和 globalStorage。在HTML5规范中，用 localStorage取代 globalStorage 。

HTML5中的 Web Storage包括两种存储方式，分别是 sessionStorage和 localStorage。

sessionStorage用于在本地存储一个会话（ session）中的数据，这些数据只有同一个会话中的页面才能访问，当会话结来后，数据也随之销毀。因此 sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

localStorage和 sessionStorage都具有相同的操作方法，例如 setItem、 getItem和removeltem等

二、CSS

3. CSS 选择器及优先级

选择器

• id选择器(#myid)
• 类选择器(.myclass)
• 属性选择器(a[rel=“external”])
• 伪类选择器(a:hover, li:nth-child)
• 标签选择器(div, h1,p)
• 相邻选择器（h1 + p）
• 子选择器(ul > li)
• 后代选择器(li a)
• 通配符选择器(*)

优先级：

• !important
• 内联样式（1000）
• ID选择器（0100）
• 类选择器/属性选择器/伪类选择器（0010）
• 元素选择器/伪元素选择器（0001）
• 关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时：

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
1、CSS3有哪些新特性？
CSS3的新特征如下：
圆角（ border- radius）；

阴影（box- shadow）；

对文字加特效（text- shadow）；

线性渐变（ gradient）；

变换（ transform ） 如（ transform:rotate（9deg）scale（0.85,0.90）translate（0px, 30px）skew（-9deg,0deg）；// 旋转、缩放、定位、倾斜。

更多的CSS选择器；

多背景设置；

色彩模式，如rgba；

伪元素::selection;

媒体查询；

多栏布局；

图片边框（ border-image）。

2、CSS3新增伪类有哪些？

新增伪类有以下几个：
p:first- of-type，选择属于其父元素的首个

元素的每个

元素。

p:last-of-type，选择属于其父元素的最后一个

元素的每个

元素。

p:only- of-type，选择属于其父元素的唯一

元素的每个

元素。

p:only- child，选择属于其父元素的唯一子元素的每个

元素。

p:nth- child（2），选择属于其父元素的第二个子元素的每个

元素。

:enabled:disabled，控制表单控件的禁用状态.

:checked，单选框或复选框被选中。

3、first-child与first-of-type的区别是什么？

二者的区别如下：
first-child匹配的是父元素的第一个子元素，可以说是结构上的第一个子元素。
first- of-type匹配的是该类型的第一个元素，类型就是指冒号前面匹配到的元素，并不限制是第一个子元素，只要是该类型元素的第一个即可。当然，这些元素的范围都属于同一级，也就是同辈。
下面给出一段示例代码。

p:first-child匹配到p元素，因为p元素是div的第一个子元素。

span:first-child匹配不到span元素，因为span是div的第二个子元素。

p:first-of-type匹配到p元素，因为p是div所有为p的子元素中的第一个。

span:first-of-type匹配到span元素，因为span是div所有为span的子元素中的第一个。

4、当使用 transform:translate属性时会出现闪烁现象，如何解决？

解决方案如下。

-webkit-backface-visibility:hidden;
//隐藏转换的元素的背面
webkit-transform-style:preserve-3d；
//使被转换的元素的子元素保留其3D转换
webkit-transtorm:translate3d（0,0,0）；
//开启GPU硬件加速模式，使用GPU代替CPU渲染动画
注意：在某些 Android系统中，有时会有莫名其妙的Bug，建议慎重使用。

5、CSS3动画如何在动作结束时保持该状态不变？

采用 animation- fill-mode。其可以设置为以下值。

none，不改变默认行为。

forwards，当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards，在 animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both，向前和向后填充模式都可以应用。

6、用两种方式实现某DⅣ元素以每秒50px的速度左移100X。

方法一，使用 jQuery

$('div‘).animate({‘left’:100},2000）;
方法二，使用 JavaScript+CSS3

CSS部分如下。

div{
transition:all 2s linear；
// linear 规定以相同速度（匀速）开始至结束的过渡效果
}
JavaScript部分如下：

div .style.left =（div. offsetLeft + 100）+‘px’；

7、介绍一下box- SIZIng属性。

box-sizing属性主要用来控制元素盒模型的解析模式。默认值是 content-box。

content-box让元素维持W3C的标准盒模型。元素的宽度/高度由 border+ padding+content的宽度/高度决定，设置 width/height属性指的是指定 content部分的宽度/高度。

border-box让元素维持IE传统盒模型（IE6以下版本和IE6、IE7的怪异模式）。设置 width/height属性指的是指定 border+ padding+ content的宽度/高度。

标准浏览器下，按照W3C规范解析盒模型。一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

8、你对 content-box盒模型了解多少？

布局所占宽度（ Width）如下：

Width =width + padding-left + padding-right+ border-left + border-right
布局所占高度（ Height）如下：

Height= height + padding-top + padding-botton + border-top + border-bottom

9、你对 padding-box盒模型了解多少？

布局所占宽度（Width）如下：

Width= width（包含 padding-left+ padding-right)+ border-top+ border-bottom
布局所占高度（ Height）如下：

Height= height（包含 padding-top+ padding-bottom)+ border-top +border-bottom

10、你对 border.-box盒模型了解多少？

布局所占宽度（ Width）如下：

Width= width（包含 padding-left + padding-right +border-left+ border-right)
布局所占高度（ Height）如下：

Height= height（包含 padding-top+ padding-bottom+ border-top +border-bottom）

11、CSS3动画的优点是什么？

优点如下:

（1）在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化。

（2）代码相对简单。

12、CSS3动画的缺点是什么？

缺点如下:

（1）在动画控制上不够灵活

（2）兼容性不好。

（3）部分动画功能无法实现

13、Animation与 Transition的异同是什么？

Animation与 Transition的功能相同，都是通过改变元素的属性值来实现动画效果的。它们的区别在于，使用 Transition的功能时只能用指定属性的开始值和结束值，然后在这两个属性值之间使用平滑过渡的方式实现动画效果，因此不能实现比较复杂的动画效果。

Animation功能通过定义多个关键帧，以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

14、Animation属性值有哪些？

两个必要属性如下。

animation-name，即动画名称。

animation- duration，即动画持续时间。

其他属性值如下。

animation- play-state，即播放状态（ running表示播放， paused表示暂停），可以用来控制动画暂停。

animation- timing- function，即动画运动形式。

animation- delay，即动画延迟时间。

mation-iteration- count，即重复次数。

animation-direction，即播放前重置（ alternate动画直接从上一次停止的位置开始执行）。

15、媒体查询的使用方法是什么？

使用方法如下：

@media媒体类型and（媒体特性）{样式规则}
这通常在移动端使用。在做移动端开发的时候，为了适配多屏幕，使用rem单位，然后根据屏幕尺寸的改变动态地设置根节点HIML的font-size值。这样可以解决多屏幕适配的问题。

html{
font-size：20px;
}
@media （min-width：320px） {
html
{
font-size：12px；
}
}
@media （min-width：360px）{
html{
font-size：16px；
}
}
但是这种做法有两个缺点。

（1）适配屏幕的尺寸不是连续的。

（2）会在CSS文件中添加大段的查询代码，增加了CSS文件的大小，为改进上述缺点，可以使用 JavaScript获取移动设备屏幕的宽度，根据设计稿的原型尺寸，动态地计算font-size的值。

16、rem的原理是什么？

在做响应式布局的时候，通过调整HTML的字体大小，页面上所有使用rem单位的元素都会做相应的调整。

17、如何设置CSS3文本阴影？

h1{text- shadow：水平阴影，垂直阴影，模糊距离，阴影颜色}

18、如何把元素从左侧移动50像素，从顶端移动100像素？

具体代码如下：

div{
transform:translate（50px,100px）；
-ms-transform:translate（50px, 100px）；/IE9/
-webkit-trans form:translate（50px, 100px）； /*Safari 和 Chrome /
-o-trans form:translate（50px, 100px）；/opera/
-moz-transform:translate（50px, 100px）；/ Firefox */

19、如何把一个元素旋转30°？

具体代码如下。

div{
transform:rotate（30deg）；
-ms-transfornm:rotate （30deg）；/IE9/
-webkit-transform:rotate（30deg）；/* Safar1和 Chrome*/
-o-transform:rotate（30deg）；/* opera*/
-moz-transform:rotate（30deg）；/Firefox/

20、如何使用matx0将di元素旋转30°？

具体代码如下。

div{
transform:matrix（0.866,0.5，-0.5,0.866,0,0）；
-ms-transform:matrix(0.866,0,5=0,5,0,866,0,0); /IE9/
-moz-trans form:matrix(0. 866,0.5，-05,0.866,0,0); /*Firefox */
-o-transform:matrix(0.866,0.5，-0,5,0.866,0,0); /Opera/

21、如何利用CSS3制作淡入淡出的动画效果？

具体步骤如下

（1）定义动画关键帧，名称为 fadeIn

@-webkit-keyframes fadeIn {
from {
opacity：0；/初始状态，透明度为0/
}
to { opacity：1；/结尾状态，透明度为1/
}
}
@-webkit-keyframes fadeout {
from { opacity：1；/初始状态，透明度为1/
}
to{
opacity：0；/结尾状态，透明度为0/
}
}
（2）为div增加如下动画代码。

div{
-webkit- animation-name:fadeIn；/动画名称/

• webkit- animation-duration：3s；/动画持续时间/
• webkit- animation-iteration- count：1；/动画次数/
• webkit- animation- delay：0s；/延迟时间/

22、说一说盒阴影。

盒阴影的语法结构与文本阴影类似，如box- shadow：5px 5px 5px rgba（255，15，255，0.5）。

但是，盒阴影多了一个属性，即外延值 inset.，如box- -shadow：5px 5px 25px rgba（0,0,255，0.5）inset。

23、如何为盒子添加蒙版？

代码如下。

demo {
height：144px ；
width：144px；
background:url（logo.png）；
-webkit-mask-image:url（shadow.png）；
-webkit-mask-position：50% 50%；
-webkit-mask-repeat:no-repeat；
蒙版复合属性的语法是- webkit-mask:url（ pro_pho_show_pic.png）50% 50% no- repeat。

蒙版相关属性如下。

-webkit-mask-clip，即蒙版裁剪位置。

-webkit-mask- origin，即蒙版原点位置。

24、如何通过CSS3实现背景颜色线性渐变？

具体代码如下：

div{
background：-webkit-linear-gradient （left, red, green 50%， blue）；
}

25、如何实现CSS3倒影？

通过-webkit-box-reflect设置方向、距离。

方向可以设置为 below、 above、left、 right。

下面给出一段示例代码

.demo {
height：144px；
width：144px；
background:url （logo. png）；
-webkit-box-reflect:below 10px；
}

26、当元素不面向屏幕时其可见性如何定义？

使用 backface-visibility:visible | hidden。

27、CSS3中 transition属性值及含义是什么？

transition属性是一个简写属性，用于设置以下4个过渡属性。

transition- property，哪个属性需要实现过渡

transition- duration，完成过渡效果需要多少秒/毫秒

transition- timing- function，速度效果的运动曲线，如 linear、ease-in、ease、ease-out、 ease-in-out, cube-bezier。

transition- delay，规定过渡开始前的延迟时间。

28、如何相对于内容框定义图像？

具体代码如下。

.demo{
height：200px；
width：200px；
padding：50px；
border: 1px solid #ccc；
background-image: url（‘logo. png’）；
background-repeat: no-repeat；
background-position: left top；
background-origin: content-box;}
语法为 background- origin:padding- box | border- box |content-box。

29、background-clip和 background- origin的区别是什么？

background-clip规定背景（包括背景颜色和背景图片）的绘制区域它有3种属性，分别是 border-box、 padding-box、 content-box。

border-box，即背景从边框开始绘制。

padding-box，即背景在边框内部绘制。

content-box，即背景从内容部分绘制。

background- origin，规定背景图片的定位区域。

它也有3种属性：border-box, padding-box, content–box。但要注意，它描述的是“背景图片”。也就是说，它只能对背景做样式上的操作。一旦规定了图片开始绘制的区域，就当于规定图片的左上角从什么地方开始，其他的它就不负责了。

30、为了把文本分隔为4列并使两列之间间隔30像素，应该如何实现？

具体代码如下：

div{
-moz-column-count：3；
/* Firefox /-webkit-column-count：3；
/* Safari和 Chrome*/
column-count：3；
-moz-column-gap：40px；
/Firefox/
-webkit- column-gap：40px；
/* Safar1和 Chrome*/
column-gap：40px；
width：600px；

31、如何用省略号显示超出文本的内容？

使用text-overflow:ellopsis。

当文本溢出时，为了不显示省略标记（…），通过clip直接将溢出的部分裁剪掉。

32、如何实现文本换行？

使用word-wrap属性。

normal，只在允许的断字点换行（浏览器保持默认处理）。

break-word，在长单词或URL地址内部进行换行。

33、说明如何用@ keyframes使dv元素移动200像素。

具体代码如下：

div{
width：100px；
height：50px；
background:#f30；
animation:move 3s；
}
@keyframes move{
from{
margin-left:0px；
}
to {
margin-left:200px；
}}

34、渐进增强与优雅降级的理解及区别

渐进增强（Progressive Enhancement）：
一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：
一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

两者区别

1、广义：
其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级

2、狭义：
渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。

/* 例子 */
.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

35、常见的兼容性问题

1. 不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}
2. IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
3. 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
4. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
5. 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

36、CSS3新特性

• 过渡

/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/ 
transition：all,.5s

• 动画

//animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;

• 形状转换

//transform:适用于2D或3D转换的元素
//transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)
transform:translate(30px,30px);
transform:rotate(30deg);
transform:scale(.8);

• 选择器:nth-of-type()
• 阴影

文字阴影: text-shadow: 2px 2px 2px #000;(水平阴影，垂直阴影，模糊距离，阴影颜色) 
盒子阴影: box-shadow: 10px 10px 5px #999

• 边框 border-image: url(border.png);
• 背景
• 文字
• 渐变
• Filter（滤镜）
• 弹性布局、栅格布局、多列布局
• 媒体查询

37、position 属性的值有哪些及其区别

固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。

默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。

38、box-sizing属性

box-sizing 规定两个并排的带边框的框，语法为 box-sizing：content-box/border-box/inherit

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。【标准盒子模型】

**border-box：**为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】

inherit：继承父元素的 box-sizing 值。

39、CSS 盒子模型

CSS 盒模型本质上是一个盒子，它包括：边距，边框，填充和实际内容。CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
在标准的盒子模型中，width 指 content 部分的宽度。
在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。

故在计算盒子的宽度时存在差异：

标准盒模型： 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)
怪异盒模型： 一个块的总宽度 = width+margin（左右）（既 width 已经包含了 padding 和 border 值）

40、BFC（块级格式上下文）

BFC的概念

BFC 是 Block Formatting Context 的缩写，即块级格式化上下文。BFC是CSS布局的一个概念，是一个独立的渲染区域，规定了内部box如何布局， 并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算。

BFC的原理布局规则

• 内部的Box会在垂直方向，一个接一个地放置
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反
• BFC的区域不会与float box重叠
• BFC是一个独立容器，容器里面的子元素不会影响到外面的元素
• 计算BFC的高度时，浮动元素也参与计算高度
• 元素的类型和display属性，决定了这个Box的类型。不同类型的Box会参与不同的Formatting Context。

如何创建BFC？

• 根元素，即HTML元素
• float的值不为none
• position为absolute或fixed
• display的值为inline-block、table-cell、table-caption
• overflow的值不为visible

BFC的使用场景

• 去除边距重叠现象
• 清除浮动（让父元素的高度包含子浮动元素）
• 避免某元素被浮动元素覆盖
• 避免多列布局由于宽度计算四舍五入而自动换行

41、让一个元素水平垂直居中

• 水平居中

  • 对于 行内元素 : text-align: center;
  • 对于确定宽度的块级元素：
    （1）width和margin实现。margin: 0 auto;
    （2）绝对定位和margin-left: margin-left: (父width - 子width）/2, 前提是父元素position: relative
  • 对于宽度未知的块级元素
    （1）table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。
    （2）inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
    （3）绝对定位+transform，translateX可以移动本身元素的50%。
    （4）flex布局使用justify-content:center

• 垂直居中

  • 利用 line-height 实现居中，这种方法适合纯文字类
  • 通过设置父容器 相对定位 ，子级设置 绝对定位，标签通过margin实现自适应居中
  • 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
  • 父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
  • table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

传送门 ☞ # 图解CSS水平垂直居中常见面试方法

42、隐藏页面中某个元素的方法

1. opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定 一些事件，如click 事件，那么点击该区域，也能触发点击事件的
2. visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已 经绑定的事件 ，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）
3. display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素。 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

该问题会引出 回流和重绘

43、用CSS实现三角符号

/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
div:after{
    position: absolute;
    width: 0px;
    height: 0px;
    content: " ";
    border-right: 100px solid transparent;
    border-top: 100px solid #ff0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

44、页面布局

1.Flex 布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

Flex 是 Flexible Box 的缩写，意为"弹性布局",用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。 简单的分为容器属性和元素属性。

容器的属性：

• flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow： .box { flex-flow: || ; }
• justify-content：对其方式，水平主轴对齐方式
• align-items：对齐方式，竖直轴线方向
• align-content

项目的属性（元素的属性）：

• order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
• flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
• flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小
• flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
• flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
• align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
• align-items，默认属 性为 auto，表示继承父元素的 align-items 比如说，用 flex 实现圣杯布局

2.Rem 布局

首先 Rem 相对于根(html)的 font-size 大小来计算。简单的说它就是一个相对单例 如:font-size:10px;,那么（1rem = 10px）了解计算原理后首先解决怎么在不同设备上设置 html 的 font-size 大小。其实 rem 布局的本质是等比缩放，一般是基于宽度。

优点：可以快速适用移动端布局，字体，图片高度
缺点：
① 目前 ie 不支持，对 pc 页面来讲使用次数不多；
② 数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；
③ 在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css 样式之前。

3.百分比布局

通过百分比单位 " % " 来实现响应式的效果。通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。 直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height 百分比相 对于 height，width 百分比相对于 width。 padding、border、margin 等等不论是垂直方向还是水平方向，都相对于直接父元素的 width。 除了 border-radius 外，还有比如 translate、background-size 等都是相对于自身的。
缺点：

（1）计算困难
（2）各个属性中如果使用百分比，相对父元素的属性并不是唯一的。造成我们使用百分比单位容易使布局问题变得复杂。

4.浮动布局

浮动布局:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变的好像浮动元素不存在一样。

优点
这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题
缺点
最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

5.自适应布局（bootstrap）

自适应布局分别为不同屏幕不同分辨率定义布局，即是创建多个静态页面，每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上，但是布局中的元素位置会发生改变，但是在每个静态布局中，页面中的元素不会随着窗口大小的调整发生变化。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

优点：
1.对网站的复杂程度兼容性更大；
2.对开发工程师来说制作的成本代价更低；
3.代码执行效果更高效；
4.测试时更加容易，运营相对更加精准。

缺点： 在现如今的移动端设计百花齐放的时期之下，同一个网站往往需要为不同的设备制作不同的页面，不但会增加开发成本，还会因为客户的需求改变时，可能会改动多套代码、流程相比较来说较繁琐。

6.流式布局（fluid）

流式布局的布局方式是页面的元素的宽度按照屏幕的分辨率进行适配的调整，但是整体布局不变，也称之为栅栏系统。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
缺点： 屏幕大小变化时，页面元素也随之变化但是布局不变。这就会因为如果屏幕太大或太小都会布局时元素无法正常显示。

7.响应式布局

响应式布局是css3增加的新布局方式，该布局方式2010年提出来的一个概念，说白了就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。响应式几乎成为优秀页面布局的标准。
设计方法： 媒体查询+流式布局。通常使用@media媒体查询，和网格系统配合相对布局单位进行布局，实际上说白了就是综合响应式等技术通过css给单一网页不同设备分辨率返回不式时的技术。
优点： 适应pc端和移动端，如果有足够的耐心，页面效果会很完美。
缺点：
1.只能适应主流的宽高；
2.如果匹配足够多的设备屏幕的大小，对于工程师来说工作量不小，设计更需要多个版本，工作量增大。

45、如何使用rem或viewport进行移动端适配

rem适配原理：
改变了一个元素在不同设备上占据的css像素的个数

rem适配的优缺点

• 优点：没有破坏完美视口
• 缺点：px值转换rem太过于复杂(下面我们使用less来解决这个问题)

viewport适配的原理

viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的，等比的
viewport适配的优缺点

• 在我们设计图上所量取的大小即为我们可以设置的像素大小，即所量即所设
• 缺点破坏完美视口

46、清除浮动的方式

• 添加额外标签

<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>

• 父级添加overflow属性，或者设置高度
• 建立伪类选择器清除浮动

//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
    content: '';
    /* 设置添加子元素为块级元素 */
    display: block;
    /* 设置添加的子元素的高度0 */
    height: 0;
    /* 设置添加子元素看不见 */
    visibility: hidden;
    /* 设置clear：both */
    clear: both;
}

47、CSS预处理器Sass、Less、Stylus的区别

什么事CSS预处理器?

CSS预处理器是一种语言用来为CSS增加一些变成的特性，无需考虑浏览器兼容问题，例如你可以在CSS中使用变量，简单的程序逻辑、函数等在编程语言中的一些基本技巧，可以让CSS更加简洁，适应性更强，代码更直观等诸多好处

基本语法区别

Sass是以.sass为扩展名，Less是以.less为扩展名，Stylus是以.styl为扩展名

变量的区别

Sass 变量必须是以**$开头的，然后变量和值之间使用冒号（：）隔开，和css属性是一样的。
Less 变量是以@**开头的，其余sass都是一样的。

Stylus 对变量是没有任何设定的，可以是以$开头或者任意字符，而且变量之间可以冒号，空格隔开，但是在stylus中不能用@开头

三种预处理器都有：嵌套、运算符、颜色函数、导入、继承、混入。Stylus还有一些高级特性。例如循环、判断等

48、前端优化的解决方案

我们的优化原则有以下几个：

• 能缓存的，尽量强缓存。

• 引入外部资源时不要出现超时、404的状况。

• 减少HTTP请求数。

• 合理设置cookie的大小以及过期时间。

• 合理利用懒加载

网页内容的优化

1、懒加载数据。
首先根据标签的left和top属性判断是否显示在了屏幕中（如果显示在屏幕中，其left和top属性值应该是在0到窗口长宽之间）。
如果显示在屏幕中，则将src标签的内容替换为图片的url。

2、使用外部引入的css和js文件，并且引入的css和js越少越好（HTTP2.0不适用）。
这里可以使用webpack打包这些文件，也可以使用强缓存与协商缓存来缓存这些文件。

3、不要在中缩放图片。
img计算缩放也需要时间

4、避免重定向。
重定向会重新渲染网页。

5、尽量不要用iframe。
因为iframe会阻塞渲染。

6、使用base64编码将图片嵌入到样式表中，减少请求数（由于base64会比一般的图片大一点，只适用于那些体积比较小但是很常用的图片）。

7、使用雪碧图（精灵图）：
通过使用background-position：-xpx -ypx;来调整图片的位置，不过HTTP2不适用，原因为HTTP2实际上是多路复用的，只用一个TCP连接，所以多个图片的请求也是在同一个TCP连接里，这样能省下非常多的请求时间，但坏处就是单连接开销很大，如果要传多个大文件，就很麻烦。

8、要有网站小图标favicon.ico。

如果没有小图标，会引起404，拖慢网页加载进度。
9、能使用jpeg就不要用png，能使用png8就不要用png24。
（1）色彩丰富的、大的图片切成jpg的；
（2）尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的；
（3）半透明的切成png24。

10、使用canvas压缩图片。

css的优化

1、避免使用@import。
使用@import相当于将引入的css放在了页面底部，因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。因此使用@import会拖慢渲染的过程。

2、将样式表放在head中。
如果放在body中，可能出现在浏览器下载好css样式表之前，组件就已经加载好了的情况，这可能会导致重新渲染。

3、避免使用css表达式。
如：expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );
解析表达式和计算都需要时间。

JavaScript的优化

1、尽量减少DOM访问。

2、使用事件代理（减少DOM操作）。

3、把脚本放在底部（加载脚本时会阻塞页面渲染）。

4、合理使用节流函数和防抖函数。

使用CDN优化加载速度

CDN即内容分发网络。它依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

针对webpack打包优化

针对webpack打包优化主要是减少打包后的代码体积，主要的措施有：
1、进行tree-shaking
2、使用UglifyJS等插件压缩代码
3、分割代码、按需加载

我们可以使用webpack-bundle-analyzer这个插件来查看每部分代码的加载耗时，进而分析可以优化的地方

49、水平垂直居中的几种方法

1. 使用flex布局
   利用flex的alignItems:center垂直居中，justifycontent:center水平居中

2. 利用相对定位和绝对定位的margin:auto
   相对定位下，使用绝对定位将上下左右都设置为0，再设置margin:auto即可实现居中

3. 利用相对定位和绝对定位，再加上外边距和平移的配合
   相对定位下，使用绝对定位，利用margin偏移外容器的50%，再利用translate平移回补自身宽高的50%即可

4. 利用textAlign和verticalAlign
   利用textAlign:center实现行内元素的水平居中，再利用verticalAlign:middle实现行内元素的垂直居中，前提是要先加上伪元素并给设置高度为100%，用过elementUI的可以去看看其消息弹窗居中实现方式就是如此

5. 其他
   上面都是在未知外容器和自身宽高下实现水平垂直居中的，如果已知其宽高，可以有更多种简单的方式实现居中，其原理无非是利用绝对定位的top/left偏移、margin偏移、padding填充，在此就不分析了。还有就是单纯文字的居中利用lineHeight和textAlign即可实现。

结束语
面对经济的下行和大学生毕业人数的突增，现在的就业状况极其严峻。所以，很多小伙伴转行到计算机行业。祝愿各个小伙伴找到理想的工作！！
最后，感谢微莱羽墨、小泽今天早睡、里见HU和牛客黑太帅等多位老师的创作！！！！此专题 后期会不定时修改、更新。

参考文献

1. 微莱羽墨：https://blog.csdn.net/qq_43654669/article/details/125718265
2. 小泽今天早睡：https://blog.csdn.net/m0_50861631/article/details/123313909
3. 里见HU：https://blog.csdn.net/qq_59079803/article/details/124992321
4. 黑太帅：https://www.nowcoder.com/users/614067014
5. https://juejin.cn/post/7016593221815910408#heading-56