HTML_CSS 面试题 #

1. 什么是 <!DOCTYPE>？是否需要在 HTML5 中使用？ #

它是 HTML 的文档声明，通过它告诉浏览器，使用哪一个 HTML 版本标准解析文档。

而文档声明有多种书写格式，对应不同的 HTML 版本，<!DOCTYPE> 这种书写是告诉浏览器，HTML5 的标准进行解析。

2. 什么是可替换元素，什么是非可替换元素，它们各自有什么特点？ #

可替换元素是指这样一种元素，它在页面中的大部分展现效果不由 CSS 决定。

比如 img 元素就是一个可替换元素，它在页面中显示出的效果主要取决于你连接的是什么图片，图片是什么它就展示什么，CSS** 虽然可以控制图片的尺寸位置，但永远无法控制图片本身**。

再比如，select** 元素也是一个典型的可替换元素**，它在页面上呈现的是用户操作系统上的下拉列表样式，因此，它的展现效果是由操作系统决定的。所以，同一个 select 元素，放到不同操作系统的电脑上会呈现不同的外观。

img、video、audio、大部分表单元素都属于可替换元素。 > 非可替换元素就是指的普通元素，它具体在页面上呈现什么，完全由 CSS 来决定。

3. src 和 href 的区别 #

src 是 source 的缩写，它通常用于 img、video、audio、script 元素，通过 src 属性，可以指定外部资源的来源地址

href 是 hyper reference 的缩写，意味「超引用」，它通常用于 a、link 元素，通过 href 属性，可以标识文档中引用的其他超文本。

4. 说说常用的 meta 标签 #

能够答出 meta 标签的意义，并且举出常规的 meta 标签使用方式

1. meta 标签俗称描述网页数据的数据，比如网页本身的编码；
2. 网页本身的作者，描述；
3. 还有一些更高级的功能性特性，比如 dns 预解析，定义视口表现等
4. 能结合 meta 提到一些 seo 相关的知识也可以有加分

   meta 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

   1. content ，设置或返回 meta 元素的 content 属性的值 。
   2. http-equiv，把 content 属性连接到一个 HTTP 头部。
   3. name，把 content 属性连接到某个名称。

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

5. 说说对 html 语义化的理解 #

• 用正确的标签做正确的事情！
• html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
• 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
• 便于阅读维护理解

6. label 的作用是什么？是怎么用的？ #

如果您在 label 元素内点击文本，就会触发此控件。 就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

最常用 label 标签的地方，应该就是表单中选择性别的单选框了。

7. iframe 框架有那些优缺点？ #

• iframe 会阻塞主页面的 Onload 事件；
• iframe** 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。**
• 使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript** 动态给 iframe 添加 src 属性值**，这样可以可以绕开以上两个问题。

<iframe> 标签是 HTML 中的⼀个元素，⽤于在当前 HTML ⽂档中嵌⼊另⼀个 HTML ⽂档。它可以在⼀个 HTML ⻚⾯中嵌⼊另⼀个 HTML ⻚⾯或其他类型的⽂档，⽐如 PDF ⽂件或视频⽂件。
<iframe> 标签的主要作⽤是将⼀个⻚⾯嵌⼊到另⼀个⻚⾯中。例如，在⼀个⻚⾯中嵌⼊⼀个地图或⼀个视频，或 者在⼀个⻚⾯中嵌⼊⼀个在线表单，都可以使⽤ <iframe> 标签。
<iframe> 标签的优点包括：

 可以让⻚⾯嵌⼊其他⽹站或⽂档，从⽽扩展⻚⾯的功能。
 可以使⽤⼀个单独的⽂档来管理⻚⾯的内容，从⽽简化⻚⾯的管理。
 可以在⼀个⻚⾯中嵌⼊多个 ，从⽽允许多个不同的内容在同⼀⻚⾯中显示。 
<iframe> 标签的缺点包括：

 可能会影响⻚⾯的加载速度和性能，特别是在⻚⾯中嵌⼊⼤型媒体⽂件时。
 可能会影响⻚⾯的可访问性，因为屏幕阅读器可能⽆法读取嵌⼊的内容。
 可能会导致安全⻛险，因为嵌⼊的⽂档可以访问⽗⻚⾯的 JavaScript 对象，从⽽可能被⽤于恶意攻击。 要实现 <iframe> 的效果，可以使⽤以下代码：

 <iframe src="http://example.com"></iframe>


其中 src 属性指定要嵌⼊的⽂档的 URL，可以是⼀个 HTML ⻚⾯、⼀个 PDF ⽂件或⼀个视频⽂件等等。通过设置 width 和 height 属性可以指定 <iframe> 元素的尺⼨。

这题如果有同学能提到部分微前端的实现是基于 iframe 的，会加分

<iframe> 标签是 HTML 中的⼀个元素，⽤于在当前 HTML ⽂档中嵌⼊另⼀个 HTML ⽂档。它可以在⼀个 HTML ⻚⾯中嵌⼊另⼀个 HTML ⻚⾯或其他类型的⽂档，⽐如 PDF ⽂件或视频⽂件。
<iframe> 标签的主要作⽤是将⼀个⻚⾯嵌⼊到另⼀个⻚⾯中。例如，在⼀个⻚⾯中嵌⼊⼀个地图或⼀个视频，或 者在⼀个⻚⾯中嵌⼊⼀个在线表单，都可以使⽤ <iframe> 标签。
<iframe> 标签的优点包括：

 可以让⻚⾯嵌⼊其他⽹站或⽂档，从⽽扩展⻚⾯的功能。
 可以使⽤⼀个单独的⽂档来管理⻚⾯的内容，从⽽简化⻚⾯的管理。
 可以在⼀个⻚⾯中嵌⼊多个 ，从⽽允许多个不同的内容在同⼀⻚⾯中显示。 
<iframe> 标签的缺点包括：

 可能会影响⻚⾯的加载速度和性能，特别是在⻚⾯中嵌⼊⼤型媒体⽂件时。
 可能会影响⻚⾯的可访问性，因为屏幕阅读器可能⽆法读取嵌⼊的内容。
 可能会导致安全⻛险，因为嵌⼊的⽂档可以访问⽗⻚⾯的 JavaScript 对象，从⽽可能被⽤于恶意攻击。 要实现 <iframe> 的效果，可以使⽤以下代码：

 <iframe src="http://example.com"></iframe>


其中 src 属性指定要嵌⼊的⽂档的 URL，可以是⼀个 HTML ⻚⾯、⼀个 PDF ⽂件或⼀个视频⽂件等等。通过设置 width 和 height 属性可以指定 <iframe> 元素的尺⼨。

这题如果有同学能提到部分微前端的实现是基于 iframe 的，会加分

8. HTML 与 XHTML 二者有什么区别，你觉得应该使用哪一个并说出理由。 不同于 XML #

关于功能上的差别，主要是 XHTML 可兼容各大浏览器、手机以及 PDA，并且浏览器也能快速正确地编译网页。 XHTML** 的规则。** 下面列出了几条容易犯的错误，供理解。

1. 所有标签都必须小写

在 XHTML 中，所有的标签都必须小写，不能大小写穿插其中，也不能全部都是大写。

2. 标签必须成双成对

3. 标签顺序必须正确

4. 所有属性都必须使用双引号

9. HTML5 的 form 如何关闭自动完成功能？ #

HTML 的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。

使用 autocomplete="off"（给不想要提示的 form 或某个 input 设置为 autocomplete=off。）

很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到；

可以在 input 中加入 autocomplete=“off” 来关闭记录系统需要保密的情况下可以使用此参数

提示：autocomplete 属性有可能在 form 元素中是开启的，而在 input 元素中是关闭的。

10. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？ #

• title 属性表示网页的标题，h1 元素则表示层次明确的页面内容标题，对页面信息的抓取也有很大的影响
• strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong 会重读，而 b 是展示强调内容
• i 内容展示为斜体，em 表示强调的文本

** 相似的还有如下的元素：** 自然样式标签：b、i、u、s、pre 语义样式标签：strong、em、ins、del、code

11. 请描述下 SEO 中的 TDK #

在 SEO 中，所谓的 TDK 其实就是 title、description、keywords 这三个标签，title 标题标签，description 描述标签，keywords 关键词标签。

13. 什么是严格模式与混杂模式？ #

• 严格模式：以浏览器支持的最高标准运行
• 混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

14. 对于 WEB 标准以及 W3C 的理解与认识问题 #

1. 学习成本降低，只学习标准即可，否则将学习各个浏览器厂商的标准。
2. 统一开发流程，用标准化工具开发（例如 VSCode、WebStorm、Sublime 等）再用标准化的浏览器测试，便于多人协作。
3. 简化网站代码的维护。
4. 跨平台，可方便迁移到不同设备中

15. 列举 IE 与其他浏览器不一样的特性？ #

• IE 的排版引擎是 Trident （又称为 MSHTML）
• Trident 内核曾经几乎与 W3C 标准脱节
• Trident 内核的大量 Bug 等安全性问题没有得到及时解决
• JS 方面，有很多独立的方法，例如绑定事件的 attachEvent、创建事件的 createEventObject 等
• CSS 方面，也有自己独有的处理方式，例如设置透明，低版本 IE 中使用滤镜的方式，盒模型也和 W3C 规定的盒模型不同

17. 页面可见性（Page Visibility）API 可以有哪些用途？ #

常用的 API 有三个，document.hidden 返回一个布尔值，如果是 true，表示页面可见，false 则表示页面隐藏。不同页面之间来回切换，会触发 visibilitychange 事件，还有一个 document.visibilityState，表示页面所处的状态。

19. div+css 的布局较 table 布局有什么优点？ #

• 页面加载速度更快、结构化清晰、页面显示简洁。
• 表现与结构相分离。
• 易于优化**（SEO）**搜索引擎更友好，排名更容易靠前。
• ** 符合 W3C 标准。**

24. HTML 全局属性(global attribute)有哪些 #

所谓全局属性，就是指每个 HTML 元素都拥有的属性，大致有如下的属性：

• class :为元素设置类标识
• data-* : 为元素增加⾃定义属性
• draggable : 设置元素是否可拖拽
• id : 元素 id ，⽂档内唯⼀
• lang : 元素内容的的语⾔
• style : ⾏内 css 样式
• title : 元素相关的建议信息

28.  iframe 的作用 #

优点

• 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
• 方便制作导航栏

缺点

• 浏览器的后退按钮无效
• 无法被一些搜索引擎索引到

目前框架的所有优点完全可以使用 Ajax 实现，因此已经没有必要使用 iframe 框架了。

29. img 上 title 与 alt #

• alt：如果无法显示图像，浏览器将显示 alt 指定的内容
• title：在鼠标移到元素上时显示 title 的内容

1. 这些都是表面上的区别，alt 是 img 必要的属性，而 title 不是
2. 网站 seo 优化，搜索引擎对图片意思的判断，主要靠 alt 属性。所以在图片 alt 属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在 title 属性里，进一步对图片说明。

31. 行内元素和块级元素区别，有哪些，怎样转换？（顶呱呱） #

块级元素：

• 独占一行
• 高度，行高以及外边距和内边距都可控制；
• 宽度缺省是它的容器的 100%，除非设定一个宽度。
• 它可以容纳内联元素和其他块元素

行内元素

• 不换行
• 高，行高及外边距和内边距不可改变；
• 宽度就是它的文字或图片的宽度，不可改变
• 内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下：

• 设置宽度 width 无效。
• 设置高度 height 无效，可以通过 line-height 来设置。
• 设置 margin 只有左右 margin 有效，上下无效。
• 设置 padding 只有左右 padding 有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

通过 display 属性对行内元素和块级元素进行切换(主要看第 2、3、4 个值)： html 中常见的块级元素：p、div、form、ul、ol、table > html 中常见的行内元素：a、img、span、button

34.  h5 和 html5 区别 #

H5 是一个产品名词，包含了最新的 HTML5、CSS3、ES6 等新的技术来制作的**应用。 ** > HTML5 是一个技术名词，指代的就仅仅是第五代 HTML。

35. form 表单上传文件时需要进行什么样的声明 #

enctype="multipart/form-data"

enctype="multipart/form-data"

37. 如何在一张图片上的某一个区域做到点击事件 #

可以使用图片热区技术。步骤如下： 1、插入图片，并设置好图像的有关参数，且在 <img> 标记中设置参数 usemap="#Map"，以表示对图像地图（Map）的引用； 2、用 <map> 标记设定图像地图的作用区域，并取名为：Map； 3、分别用 <area> 标记针对相应位置划分出多个矩形作用区域，并设定好其链接参数 href。

39. 什么是锚点？ #

锚点（anchor）是一种特殊连接，能定位到 HTML 文档中某个特定位置，通过 HTML 元素的 id 来设置锚点。

40. 图片与 span 元素混排图像下方会出现几像素的空隙的原因是什么？ #

参考答案： img 作为可替换元素，它没有自己的基线，如果与不可替换元素混合排列，其行盒底端与基线对齐。由于与基线对齐，图像下方就会出现几像素的空隙。

41. a 元素除了用于导航外，还可以有什么作用？ #

当然，a 元素最常见的两个应用就是做锚点和下载文件。发短信，打电话 锚点可以在点击时快速定位到一个页面的某一个位置，而下载的原理在于 a** 标签所对应的资源浏览器无法解析，于是浏览器会选择将其下载下来。**

1.   介绍下 BFC 及其应用 #

所谓 BFC，指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。 触发 BFC 的方式有很多，常见的有：

• 设置浮动
• overflow 设置为 auto、scroll、hidden
• positon 设置为 absolute、fixed
• display: flow-root; 没有副作用，专门为 BFC

常见的 BFC 应用有：

• 解决浮动元素令父元素高度坍塌的问题
• 解决非浮动元素被浮动元素覆盖问题
• 解决外边距垂直方向重合的问题

BFC block formatting Context 块级格式化上下文 新的渲染规则：BFC 包裹子元素 (浮动元素，margin 塌陷, margin 合并) BFC + 浮动实现多栏布局 BFC 兄弟元素,位置分明

.father {
  width: 100px;
  border: 1px solid;
  float: left;
  /*设置浮动之后，父级不能包裹子集了 height由子集撑开。怎么才能保住？
  1. 清除浮动
  2. 触发BFC
  */
  /*overflow: hidden;
  position: absolute;
  display: inline-block
  display: flex; 只要display不是block
  display: flow-root; 没有副作用，专门为BFC
  */
}
.son {
  width: 50px;
  height: 50px;
  background: #fac;
}

.father {
  width: 100px;
  border: 1px solid;
  float: left;
  /*设置浮动之后，父级不能包裹子集了 height由子集撑开。怎么才能保住？
  1. 清除浮动
  2. 触发BFC
  */
  /*overflow: hidden;
  position: absolute;
  display: inline-block
  display: flex; 只要display不是block
  display: flow-root; 没有副作用，专门为BFC
  */
}
.son {
  width: 50px;
  height: 50px;
  background: #fac;
}

.father {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 100px;
  /*display: flow-root;*/
}
.son {
  width: 50px;
  height: 50px;
  background: #fac;
  margin-top: 200px;
  /*margin-top: 100px;
  margin:和父级margin-top比较，谁大，按谁;
  */
}

.father {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 100px;
  /*display: flow-root;*/
}
.son {
  width: 50px;
  height: 50px;
  background: #fac;
  margin-top: 200px;
  /*margin-top: 100px;
  margin:和父级margin-top比较，谁大，按谁;
  */
}

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>
  </head>
  <body>
    <style>
      .left,
      .right {
        width: 100px;
        height: 100px;
        background: #fac;
        float: left;
      }
      .right {
        float: right;
      }
      /*浮动了，脱离文档流*/
      .center {
        height: 150px;
        background: #cfa;
        overflow: hidden;
        display: flow-root;
      }
    </style>
    <div class="wrapper">
      去掉任何一个实现两栏布局
      <div class="left"></div>
      <div class="right"></div>
      <div class="center"></div>
    </div>
  </body>
</html>

<!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>
  </head>
  <body>
    <style>
      .left,
      .right {
        width: 100px;
        height: 100px;
        background: #fac;
        float: left;
      }
      .right {
        float: right;
      }
      /*浮动了，脱离文档流*/
      .center {
        height: 150px;
        background: #cfa;
        overflow: hidden;
        display: flow-root;
      }
    </style>
    <div class="wrapper">
      去掉任何一个实现两栏布局
      <div class="left"></div>
      <div class="right"></div>
      <div class="center"></div>
    </div>
  </body>
</html>

2. 介绍下 BFC、IFC、GFC 和 FFC #

• BFC：块级格式上下文，指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。

1. BFC 有隔离作用，内部元素不受外部元素影响，反之亦然。
2. 一个元素只能存在于一个 BFC 中，如果能同时存在于两个 BFC 中，那么就违反了 BFC 的隔离原则。
3. BFC 内的元素按正常流排列，元素间的间隙由元素外边距控制。
4. BFC 中的内容不会与外面的浮动元素重叠。
5. 计算 BFC 的高度需要包括 BFC 内的浮动子元素的高度。

• IFC：行内格式化上下文，将一块区域以行内元素的形式来格式化。
• GFC：网格布局格式化上下文，将一块区域以 grid 网格的形式来格式化
• FFC：弹性格式化上下文，将一块区域以弹性盒的形式来格式化

3. flex 骰子 #

5. 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。 #

• 结构： display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，**渲染元素继续占据空间，只是内容不可见，可以点击 **
• 继承： display: none 和 opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibility: hidden：是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible;可以让子孙节点显式。
• 性能： displaynone : 修改元素会造成文档回流,读屏器不会读取 display: none 元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取 visibility: hidden 元素内容 opacity: 0 ： 修改元素会造成重绘，性能消耗较少

1. display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）
2. visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开）
3. opacity: 0（占据空间，可以点击）（场景：可以跟 transition 搭配）

6. 已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。 #

<img src="1.jpg" style="width:480px!important;”>

<img src="1.jpg" style="width:480px!important;”>

CSS 方法

• max-width:300px; 覆盖其样式
• transform: scale(0.625) 按比例缩放图片；
• 利用 CSS 动画的样式优先级高于 _!important_** 的特性**

JS 方法

• document.getElementsByTagName("img")[0].setAttribute("style","width:300px!important;")

7. 如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性 #

CSS 实现方式 单行：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;

兼容： JS 实现方式：

• 使用 split + 正则表达式将单词与单个文字切割出来存入 words
• 加上 '...'
• 判断 scrollHeight 与 clientHeight，超出的话就从 words 中 pop 一个出来

p {
  position: relative;
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
}
p::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 40px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}

p {
  position: relative;
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
}
p::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 40px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}

8. 居中为什么要使用 transform（为什么不使用 marginLeft/Top）（阿里） #

transform 属于合成属性（composite property），对合成属性进行 transition/animation 动画将会创建一个合成层（composite layer），这使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理（texture）上传到 GPU，只要该层的内容不发生改变，就没必要进行重绘（repaint），浏览器会通过重新复合（recomposite）来形成一个新的帧。

top/left 属于布局属性，该属性的变化会导致重排（reflow/relayout），所谓重排即指对这些节点以及受这些节点影响的其它节点，进行 CSS 计算->布局->重绘过程，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的性能开销。

10. 说出 space-between 和 space-around 的区别？（携程） #

这个是 flex 布局的内容，其实就是一个边距的区别，按水平布局来说，space-between是两端对齐，在左右两侧没有边距，而space-around是每个 子项目左右方向的 margin 相等，所以两个 item 中间的间距会比较大。

11. CSS3 中 transition 和 animation 的属性分别有哪些 #

参考答案：

transition 过渡动画：

• transition-property：指定过渡的 CSS 属性
• transition-duration：指定过渡所需的完成时间
• transition-timing-function：指定过渡函数
• transition-delay：指定过渡的延迟时间

animation 关键帧动画：

• animation-name：指定要绑定到选择器的关键帧的名称
• animation-duration：动画指定需要多少秒或毫秒完成
• animation-timing-function：设置动画将如何完成一个周期
• animation-delay：设置动画在启动前的延迟间隔
• animation-iteration-count：定义动画的播放次数
• animation-direction：指定是否应该轮流反向播放动画
• animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
• animation-play-state：指定动画是否正在运行或已暂停

• CSS 动画如何实现？

参考答案：

即 animation 属性，对元素某个或多个属性的变化进行控制，可以设置多个关键帧。属性包含了动画的名称、完成时间（以毫秒计算）、周期、间隔、播放次数、是否反复播放、不播放时应用的样式、动画暂停或运行。

它不需要触发任何事件就可以随着时间变化来改变元素的样式。

使用 CSS 做动画：

• [_@keyframes _]_ _ 规定动画。
• animation 所有动画属性的简写属性。
• animation-name 规定 [_@keyframes _] 动画的名称。
• animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
• animation-timing-function 规定动画的速度曲线。默认是 ease。
• animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
• animation-delay 规定动画何时开始。默认是 0。
• animation-iteration-count   规定动画被播放的次数。默认是 1。
• animation-direction 规定动画是否在下一周期逆向地播放。默认是 normal。
• animation-play-state 规定动画是否正在运行或暂停。默认是 running。

-EOF-

12. 隐藏页面中的某个元素的方法有哪些？ #

1. 隐藏类型

屏幕并不是唯一的输出机制，比如说屏幕上看不见的元素（隐藏的元素），其中一些依然能够被读屏软件阅读出来（因为读屏软件依赖于可访问性树来阐述）。为了消除它们之间的歧义，我们将其归为三大类：

• 完全隐藏：元素从渲染树中消失，不占据空间。
• 视觉上的隐藏：屏幕中不可见，占据空间。
• 语义上的隐藏：读屏软件不可读，但正常占据空。

完全隐藏 (1) display 属性 (2) hidden 属性 HTML5 新增属性，相当于 display: none 视觉上的隐藏 (1) 设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域。 (2) 设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。 (3) 设置 margin 值，将其移出可视区域范围（可视区域占位）。

语义上隐藏 aria-hidden 属性 读屏软件不可读，占据空间，可见。

<div aria-hidden="true"></div>

<div aria-hidden="true"></div>

13. 层叠上下文 #

层叠上下文概念 在 CSS2.1 规范中，每个盒模型的位置是三维的，分别是平面画布上的 X 轴，Y 轴以及表示层叠的 Z 轴。 一般情况下，元素在页面上沿 X 轴 Y 轴平铺，我们察觉不到它们在 Z 轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。 层叠上下文触发条件

• HTML 中的根元素 HTML 本身就具有层叠上下文，称为“根层叠上下文”。
• 普通元素设置 position 属性为非 static 值并设置 z-index 属性为具体数值，产生层叠上下文
• CSS3 中的新属性也可以产生层叠上下文

层叠顺序 “层叠顺序”（stacking order）表示元素发生层叠时按照特定的顺序规则在 Z 轴上垂直显示。 说简单一点就是当元素处于同一层叠上下文内时如何进行层叠判断。 具体的层叠等级如下图：

15. 讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理 #

PNG 图片主要有三个类型，分别为 PNG 8/ PNG 24 / PNG 32。

• PNG 8：PNG 8 中的 8，其实指的是 8bits，相当于用 28（2 的 8 次方）大小来存储一张图片的颜色种类，28 等于 256，也就是说 PNG 8 能存储 256 种颜色，一张图片如果颜色种类很少，将它设置成 PNG 8 得图片类型是非常适合的。
• PNG 24：PNG 24 中的 24，相当于 3 乘以 8 等于 24，就是用三个 8bits 分别去表示 R（红）、G（绿）、B（蓝）。R(0-255),G(0-255),B(0-255)，可以表达 256 乘以 256 乘以 256=16777216 种颜色的图片，这样 PNG 24 就能比 PNG 8 表示色彩更丰富的图片。但是所占用的空间相对就更大了。
• PNG 32：PNG 32 中的 32，相当于 PNG 24 加上 8bits 的透明颜色通道，就相当于 R（红）、G（绿）、B（蓝）、A（透明）。R(0255),G(0255),B(0255),A(0255)。比 PNG 24 多了一个 A（透明），也就是说 PNG 32 能表示跟 PNG 24 一样多的色彩，并且还支持 256 种透明的颜色，能表示更加丰富的图片颜色类型。

PNG 图片的压缩，分两个阶段：

• 预解析（Prediction）：这个阶段就是对 png 图片进行一个预处理，处理后让它更方便后续的压缩。
• 压缩（Compression）：执行 Deflate 压缩，该算法结合了 LZ77 算法和 Huffman 算法对图片进行编码。

16. 说说渐进增强和优雅降级 #

渐进增强相当于向上兼容，优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本，或者说后期开发的版本能兼容早期开发的版本。

渐进增强：针对低版本浏览器进行页面构建，保证基本功能，再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验。 优雅降级：一开始就构建完整的功能，再针对低版本浏览器进行兼容。 区别：优雅降级是从复杂的现状开始并试图减少用户体验的供给，而渐进增强则是从一个基础的、能够起到作用的版本开始再不断扩充，以适应未来环境的需要。 绝大多少的大公司都是采用渐进增强的方式，因为业务优先，提升用户体验永远不会排在最前面。

• 例如新浪微博网站这样亿级用户的网站，前端的更新绝不可能追求某个特效而不考虑低版本用户是否可用。一定是确保低版本到高版本的可访问性再渐进增强。
• 如果开发的是一面面向青少面的软件或网站，你明确这个群体的人总是喜欢尝试新鲜事物，喜欢炫酷的特效，喜欢把软件更新至最新版本，这种情况再考虑优雅降级。

17. 介绍下 positon 属性 #

position 属性主要用来定位，常见的属性值如下：

• absolute 绝对定位，相对于 static 定位以外的第一个父元素进行定位。
• relative 相对定位，相对于其自身正常位置进行定位。
• fixed 固定定位，相对于浏览器窗口进行定位。

注意：fixed 元素一定是相对视口定位的吗？https://juejin.cn/post/6844904046663303181

• static 默认值。没有定位，元素出现在正常的流中。
• inherit 规定应该从父元素继承 position 属性的值。
• sticky 粘性定位，当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是 top、left 等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成 fixed，根据设置的 left、top 等属性成固定位置的效果。

• 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
• 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于 viewport 来计算元素的偏移量

19. 如何实现一个自适应的正方形 #

方法 1：利用 CSS3 的 vw 单位 > vw 会把视口的宽度平均分为 100 份

.square {
  width: 10vw;
  height: 10vw; // 注意这里是vw
  background: red;
}

.square {
  width: 10vw;
  height: 10vw; // 注意这里是vw
  background: red;
}

方法 2：利用 margin 或者 padding 的百分比计算是参照父元素的 width 属性

.square {
width: 10%;
padding-bottom: 10%;
height: 0; // 防止内容撑开多余的高度
background: red;
}

.square {
width: 10%;
padding-bottom: 10%;
height: 0; // 防止内容撑开多余的高度
background: red;
}

• 利用 vw 来实现：

.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}
复制代码

.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}
复制代码

• 利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现：

.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}
复制代码

.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}
复制代码

• 利用子元素的 margin-top 的值来实现：

.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}
复制代码

.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}
复制代码

20. 如何实现三栏布局 #

三栏布局是很常见的一种页面布局方式。左右固定，中间自适应。实现方式有很多种方法。 第一种：flex

<!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>
      .container {
        display: flex;
      }

      .left {
        flex-basis: 200px;
        background: green;
      }

      .main {
        flex: 1;
        background: red;
      }

      .right {
        flex-basis: 200px;
        background: green;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="left">left</div>
      <div class="main">main</div>
      <div class="right">right</div>
    </div>
  </body>
</html>

<!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>
      .container {
        display: flex;
      }

      .left {
        flex-basis: 200px;
        background: green;
      }

      .main {
        flex: 1;
        background: red;
      }

      .right {
        flex-basis: 200px;
        background: green;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="left">left</div>
      <div class="main">main</div>
      <div class="right">right</div>
    </div>
  </body>
</html>

第二种：position + margin

<!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>
      body,
      html {
        padding: 0;
        margin: 0;
      }

      .left,
      .right {
        position: absolute;
        top: 0;
        background: red;
      }

      .left {
        left: 0;
        width: 200px;
      }

      .right {
        right: 0;
        width: 200px;
      }

      .main {
        margin: 0 200px;
        background: green;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="main">main</div>
    </div>
  </body>
</html>

<!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>
      body,
      html {
        padding: 0;
        margin: 0;
      }

      .left,
      .right {
        position: absolute;
        top: 0;
        background: red;
      }

      .left {
        left: 0;
        width: 200px;
      }

      .right {
        right: 0;
        width: 200px;
      }

      .main {
        margin: 0 200px;
        background: green;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="main">main</div>
    </div>
  </body>
</html>

第三种：float + margin

<!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>
      body,
      html {
        padding: 0;
        margin: 0;
      }

      .left {
        float: left;
        width: 200px;
        background: red;
      }

      .main {
        margin: 0 200px;
        background: green;
      }

      .right {
        float: right;
        width: 200px;
        background: red;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="main">main</div>
    </div>
  </body>
</html>

<!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>
      body,
      html {
        padding: 0;
        margin: 0;
      }

      .left {
        float: left;
        width: 200px;
        background: red;
      }

      .main {
        margin: 0 200px;
        background: green;
      }

      .right {
        float: right;
        width: 200px;
        background: red;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="left">left</div>
      <div class="right">right</div>
      <div class="main">main</div>
    </div>
  </body>
</html>

双飞翼布局

<!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>
  </head>
  <body>
    <style>
      .left,
      .right {
        width: 100px;
        height: 100px;
        background: #fac;
        float: left;
      }
      .right {
        float: right;
      }
      /*浮动了，脱离文档流*/
      .center {
        height: 150px;
        background: #cfa;
        overflow: hidden;
        display: flow-root;
      }
    </style>
    <div class="wrapper">
      去掉任何一个实现两栏布局
      <div class="left"></div>
      <div class="right"></div>
      <div class="center"></div>
    </div>
  </body>
</html>

<!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>
  </head>
  <body>
    <style>
      .left,
      .right {
        width: 100px;
        height: 100px;
        background: #fac;
        float: left;
      }
      .right {
        float: right;
      }
      /*浮动了，脱离文档流*/
      .center {
        height: 150px;
        background: #cfa;
        overflow: hidden;
        display: flow-root;
      }
    </style>
    <div class="wrapper">
      去掉任何一个实现两栏布局
      <div class="left"></div>
      <div class="right"></div>
      <div class="center"></div>
    </div>
  </body>
</html>

圣杯布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .wrapper {
        resize: both;
        overflow: hidden;
        width: 300px;
        height: 300px;
        border: 1px solid black;
        display: flex;
        flex-direction: column;
      }

      .header,
      .footer,
      .left,
      .right {
        flex: 0 0 20%; /*不参与伸缩，占20%*/
        border: 1px solid black;
        box-sizing: border-box;
      }

      .contain {
        flex: 1 1 auto;
        display: flex;
      }

      .center {
        flex: 1 1 auto;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="header">header</div>
      <div class="contain">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
      </div>
      <div class="footer">footer</div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .wrapper {
        resize: both;
        overflow: hidden;
        width: 300px;
        height: 300px;
        border: 1px solid black;
        display: flex;
        flex-direction: column;
      }

      .header,
      .footer,
      .left,
      .right {
        flex: 0 0 20%; /*不参与伸缩，占20%*/
        border: 1px solid black;
        box-sizing: border-box;
      }

      .contain {
        flex: 1 1 auto;
        display: flex;
      }

      .center {
        flex: 1 1 auto;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <div class="header">header</div>
      <div class="contain">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
      </div>
      <div class="footer">footer</div>
    </div>
  </body>
</html>

21. import 和 link 区别 #

1. 从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 2. 加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。 3. 兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。 4. DOM 可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

23. 清除浮动的方法 #

• 给浮动元素父级设置高度
• 父级同时浮动（需要给父级同级元素添加浮动）
• 父级设置成 inline-block，其 margin: 0 auto 居中方式失效
• 给父级添加 overflow:hidden 清除浮动方法
• 万能清除法 after 伪类清浮动（现在主流方法，推荐使用）

使用 clear 属性清除浮动的原理？ #

使用 clear 属性清除浮动，其语法如下：

clear: none|left|right|both 复制代码;

clear: none|left|right|both 复制代码;

如果单看字面意思，clear:left 是“清除左浮动”，clear:right 是“清除右浮动”，实际上，这种解释是有问题的，因为浮动一直还在，并没有清除。 官方对 clear 属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置 clear 属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。

还需要注意 clear 属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3 个字，也就是 clear 属性对“后面的”浮动元素是不闻不问的。考虑到 float 属性要么是 left，要么是 right，不可能同时存在，同时由于 clear 属性对“后面的”浮动元素不闻不问，因此，当 clear:left 有效的时候，clear:right 必定无效，也就是此时 clear:left 等同于设置 clear:both；同样地，clear:right 如果有效也是等同于设置 clear:both。由此可见，clear:left 和 clear:right 这两个声明就没有任何使用的价值，至少在 CSS 世界中是如此，直接使用 clear:both 吧。 clear 属性只有块级元素才有效的，而**::after 等伪元素默认都是内联**水平，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因。

对 requestAnimationframe 的理解 #

实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，CSS3 中可以使用 transition 和 animation 来实现，HTML5 中的 canvas 也可以实现。除此之外，HTML5 提供一个专门用于请求动画的 API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。 MDN 对该方法的描述：

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

语法： window.requestAnimationFrame(callback);   其中，callback 是下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入 DOMHighResTimeStamp 参数，它表示 requestAnimationFrame() 开始去执行回调函数的时刻。该方法属于宏任务，所以会在执行完微任务之后再去执行。 取消动画： 使用 cancelAnimationFrame()来取消执行动画，该方法接收一个参数——requestAnimationFrame 默认返回的 id，只需要传入这个 id 就可以取消动画了。 优势：

• CPU 节能：使用 SetTinterval 实现的动画，当页面被隐藏或最小化时，SetTinterval 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费 CPU 资源。而 RequestAnimationFrame 则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统走的 RequestAnimationFrame 也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了 CPU 开销。
• 函数节流：在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame 可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销，一个刷新间隔内函数执行多次时没有意义的，因为多数显示器每 16.7ms 刷新一次，多次绘制并不会在屏幕上体现出来。
• 减少 DOM 操作：requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒 60 帧。

setTimeout 执行动画的缺点：它通过设定间隔时间来不断改变图像位置，达到动画效果。但是容易出现卡顿、抖动的现象；原因是：

• settimeout 任务被放入异步队列，只有当主线程任务执行完后才会执行队列中的任务，因此实际执行时间总是比设定时间要晚；
• settimeout 的固定时间间隔不一定与屏幕刷新间隔时间相同，会引起丢帧。

伪元素和伪类的区别和作用？ #

• 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
• 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

总结： 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

25. css reset 和 normalize.css 有什么区别？ #

• 两者都是通过重置样式，保持浏览器样式的一致性
• 前者几乎为所有标签添加了样式，后者保持了许多浏览器样式，保持尽可能的一致
• 后者修复了常见的桌面端和移动端浏览器的 bug：包含了 HTML5 元素的显示设置、预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的 bug。
• 前者中含有大段的继承链
• 后者模块化，文档较前者来说丰富

27. 如何避免重绘或者重排？ #

1. 集中改变样式 改变 class

// 判断是否是黑色系样式
const theme = isDark ? 'dark' : 'light'

// 根据判断来设置不同的class
ele.setAttribute('className', theme)

// 判断是否是黑色系样式
const theme = isDark ? 'dark' : 'light'

// 根据判断来设置不同的class
ele.setAttribute('className', theme)

2. 使用 DocumentFragment

我们可以通过 createDocumentFragment 创建一个游离于 DOM 树之外的节点，然后在此节点上批量操作，最后插入 DOM 树中，因此只触发一次重排

var fragment = document.createDocumentFragment();

for (let i = 0; i < 10; i++) {
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment);

var fragment = document.createDocumentFragment();

for (let i = 0; i < 10; i++) {
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment);

3. 提升为合成层

将元素提升为合成层有以下优点：

• 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
• 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
• 对于 transform 和 opacity 效果，不会触发 layout 和 paint

提升合成层的最好方式是使用 CSS 的 will-change 属性：

#target {
  will-change: transform;
}

#target {
  will-change: transform;
}

28. 如何触发重排和重绘？ #

• 添加、删除、更新 DOM 节点
• 通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
• 通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
• 移动或者给页面中的 DOM 节点添加动画
• 添加一个样式表，调整样式属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动。

29. 重绘与重排的区别？ #

• 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素
• 重绘: 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变

30. 如何优化图片 #

1. 对于很多装饰类图片，尽量不用图片，因为这类修饰图片完全可以用 CSS 去代替。
2. 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。
3. 小图使用 base64 格式
4. 雪碧图
5. 选择正确的图片格式：

• 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
• 小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替
• 照片使用 JPEG

34. 什么是渐进式渲染（progressive rendering）？ #

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。 一些举例：

• 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
• 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
• 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。

39. img 标签在页面中有 1px 的边框，怎么处理 #

img {
  border: 0;
}

img {
  border: 0;
}

40. 如何绝对居中（不用定位） #

方法一： 使用 flex 弹性盒来绝对居中 方法二： 设置 margin-left 为 calc(50% - 50px);

42. 我有 5 个 div 在一行，我要让 div 与 div 直接间距 10px 且最左最右两边的 div 据边框 10px，同时在我改变窗口大小时，这个 10px 不能变，div 根据窗口改变大小（长天星斗） #

<!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>
  </head>

  <body>
    <style>
      * {
        margin: 0;
      }

      .container {
        display: flex;
      }

      .container > div {
        outline: 1px solid;
        margin: 0 5px;
        flex-grow: 1;
      }

      .container > div:first-child {
        margin-left: 10px;
      }

      .container > div:last-child {
        margin-right: 10px;
      }
    </style>
    <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

<!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>
  </head>

  <body>
    <style>
      * {
        margin: 0;
      }

      .container {
        display: flex;
      }

      .container > div {
        outline: 1px solid;
        margin: 0 5px;
        flex-grow: 1;
      }

      .container > div:first-child {
        margin-left: 10px;
      }

      .container > div:last-child {
        margin-right: 10px;
      }
    </style>
    <div class="container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>

48. px 和 em 的区别 #

px 即 pixel 像素，是相对于屏幕分辨率而言的，是一个相对绝对单位，即在同一设备上每个设备像素所代表的物理长度是固定不变的（绝对性），但在不同设备间每个设备像素所代表的物理长度是可以变化的（相对性）。 > em 一个相对单位，不是一个固定的值，来源于纸张印刷业，在 web 领域它指代基准字号，浏览器默认渲染文字大小是 16px ，它会继承计算后的父级元素的 font-size。

49. div 之间的间隙是怎么产生的，应该怎么消除？ #

原因：浏览器解析的时候，会把回车换行符解析成一定的间隙，间隙的大小跟默认的字体大小设置有关。 解决：其父元素加上 font-size:0 的属性，但是字体需要额外处理

24. display:inline-block 什么时候会显示间隙？ #

• 有空格时会有间隙，可以删除空格解决；
• margin正值时，可以让margin使用负值解决；
• 使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；

57. 你怎么处理页面兼容性问题？ #

1. 统一标准模式
2. 利用 CSS 重置技术初始化默认样式
3. 针对不同浏览器采用不同的解决方案

63. 什么是继承？CSS 中哪些属性可以继承？哪些不可以继承？ #

• 继承，指元素可以自动获得祖先元素的某些 CSS 属性。通常来说文本类的属性具有继承性。
• 文本类的样式可以继承：例如 color、 font-size、 line-height、 font-family、 font-weight、 font-weight、 text-decoration、 letter-spacing、text-align 等等
• display、 margin、 padding、 border、 background、 position、 float 等则不会被继承

65. CSS 的计算属性知道吗 #

即 calc( ) 函数，主要用于指定元素的长度，支持所有 CSS 长度单位，运算符前后都需要保留一个空格。 比如： width: calc(100% - 50px);

66. 为何 CSS 放在 HTML 头部？ #

为了**尽早让浏览器拿到 CSS 并且生成 **CSSOM，然后与 HTML 一次性生成最终的 RenderTree，渲染一次即可。如果放在 HTML 底部，会出现渲染卡顿的现象影响性能和用户体验。

67. background-size 有哪 4 种值类型？ #

• length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
• percentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为“auto(自动)”
• cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
• contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

74. 有一个高度自适应的 div，里面有 2 个 div，一个高度 100px，希望另一个填满剩下的高度？（CSS 实现） #

方法一：利用定位

<!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>
      html,
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }

      .main {
        position: relative;
        height: 100%;
      }

      .box1 {
        height: 100px;
        background-color: red;
      }

      .box2 {
        position: absolute;
        width: 100%;
        top: 100px;
        bottom: 0px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

<!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>
      html,
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }

      .main {
        position: relative;
        height: 100%;
      }

      .box1 {
        height: 100px;
        background-color: red;
      }

      .box2 {
        position: absolute;
        width: 100%;
        top: 100px;
        bottom: 0px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

方法二：利用计算属性calc

<!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>
      html,
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }

      .main {
        height: 100%;
      }

      .box1 {
        height: 100px;
        background-color: red;
      }

      .box2 {
        height: calc(100% - 100px);
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

<!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>
      html,
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }

      .main {
        height: 100%;
      }

      .box1 {
        height: 100px;
        background-color: red;
      }

      .box2 {
        height: calc(100% - 100px);
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div class="main">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

inline 和 block 区别（长宽，padding，margin） #

77. 当 margin-top、padding-top 的值是百分比时，分别是如何计算的？ #

可以对元素的 margin 设置百分数，百分数是相对于父元素的 width 计算，不管是 margin-top/margin-bottom 还是 margin-left/margin-right。（padding 同理） 如果没有为元素声明 width，在这种情况下，元素框的总宽度包括外边距取决于父元素的 width，这样可能得到“流式”页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩小。

81. 在 rem 自适应页面中使用 sprite 会出现背景图不随元素放大缩小的情况，如何解决？ #

将 backgroud-size 也换算为 rem 作为单位

98. 如何将大量可变化的图片显示到页面并不影响浏览器性能？ #

使用图片懒加载。将页面中未出现在可视区域的图片先不做加载，等滚动到可视区域后，再加载。

99. 图片与图片之间默认存在的间距如何去除？ #

1. 将图片全部脱离文档流
2. 将图片父元素设置文字大小为 0

102. 不使用 border 属性，使用其他属性模拟边框。 #

使用 outline 或 box-shadow 都可以模拟出边框。

103. 阅读代码，计算 ul 的高度。 #

 <ul style="overflow: hidden;">
   <li style="height: 100px; float: left;"></li>
 </ul>

 <ul style="overflow: hidden;">
   <li style="height: 100px; float: left;"></li>
 </ul>

ul 的高度为 100px，虽然子级 li 浮动会造成父元素 ul 的高度塌陷，但父元素触发了 BFC，所以高度可以自动找回。

105. 如何使用媒体查询实现视口宽度大于 320px 小于 640px 时 div 元素宽度变成 30%？ #

@media screen and (min-width: 320px) and (max-width: 640px) {
  div {
    width: 30%;
  }
}

@media screen and (min-width: 320px) and (max-width: 640px) {
  div {
    width: 30%;
  }
}

106. 什么是 HTML 实体？ #

即对当前文档的编码方式不能包含的字符提供一种转义表示。例如对于 “>” 符号，它是 HTML 元素的一部分，如果要在文档中显示就需要进行转义为“>”。

109. 在定位属性 position 中，哪个值会脱离文档流? #

absolute、fixed。

画一条 0.5px 的线 #

• 采用 transform: scale()的方式，该方法用来定义元素的 2D 缩放转换：

transform: scale(0.5, 0.5);

transform: scale(0.5, 0.5);

• 采用 meta viewport 的方式

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这样就能缩放到原来的 0.5 倍，如果是 1px 那么就会变成 0.5px。viewport 只针对于移动端，只在移动端上才能看到效果

6. 如何解决 1px 问题？ #

1px 问题指的是：在一些 Retina屏幕 的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专门的属性来描述：

window.devicePixelRatio = 设备的物理像素 / CSS像素。

window.devicePixelRatio = 设备的物理像素 / CSS像素。

打开 Chrome 浏览器，启动移动端调试模式，在控制台去输出这个 devicePixelRatio 的值。这里选中 iPhone6/7/8 这系列的机型，输出的结果就是 2： 这就意味着设置的 1px CSS 像素，在这个设备上实际会用 2 个物理像素单元来进行渲染，所以实际看到的一定会比 1px 粗一些。 解决 1px 问题的三种思路：

思路一：直接写 0.5px

如果之前 1px 的样式这样写：

border: 1px solid #333;

border: 1px solid #333;

可以先在 JS 中拿到 window.devicePixelRatio 的值，然后把这个值通过 JSX 或者模板语法给到 CSS 的 data 里，达到这样的效果（这里用 JSX 语法做示范）：

<div id="container" data-device="{{window.devicePixelRatio}}"></div>

<div id="container" data-device="{{window.devicePixelRatio}}"></div>

然后就可以在 CSS 中用属性选择器来命中 devicePixelRatio 为某一值的情况，比如说这里尝试命中 devicePixelRatio 为 2 的情况：

#container[data-device="2"] {
  border: 0.5px solid #333;
}

#container[data-device="2"] {
  border: 0.5px solid #333;
}

直接把 1px 改成 1/devicePixelRatio 后的值，这是目前为止最简单的一种方法。这种方法的缺陷在于兼容性不行，IOS 系统需要 8 及以上的版本，安卓系统则直接不兼容。

思路二：伪元素先放大后缩小

这个方法的可行性会更高，兼容性也更好。唯一的缺点是代码会变多。 思路是先放大、后缩小：在目标元素的后面追加一个 ::after 伪元素，让这个元素布局为 absolute 之后、整个伸展开铺在目标元素上，然后把它的宽和高都设置为目标元素的两倍，border 值设为 1px。接着借助 CSS 动画特效中的放缩能力，把整个伪元素缩小为原来的 50%。此时，伪元素的宽高刚好可以和原有的目标元素对齐，而 border 也缩小为了 1px 的二分之一，间接地实现了 0.5px 的效果。

#container[data-device="2"] {
    position: relative;
}
#container[data-device="2"]::after{
      position:absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      content:"";
      transform: scale(0.5);
      transform-origin: left top;
      box-sizing: border-box;
      border: 1px solid #333;
    }
}
复制代码

#container[data-device="2"] {
    position: relative;
}
#container[data-device="2"]::after{
      position:absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      content:"";
      transform: scale(0.5);
      transform-origin: left top;
      box-sizing: border-box;
      border: 1px solid #333;
    }
}
复制代码

思路三：viewport 缩放来解决

这个思路就是对 meta 标签里几个关键属性下手：

<meta
  name="viewport"
  content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"
/>

<meta
  name="viewport"
  content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"
/>

这里针对像素比为 2 的页面，把整个页面缩放为了原来的 1/2 大小。这样，本来占用 2 个物理像素的 1px 样式，现在占用的就是标准的一个物理像素。根据像素比的不同，这个缩放比例可以被计算为不同的值，用 js 代码实现如下：

const scale = 1 / window.devicePixelRatio;
// 这里 metaEl 指的是 meta 标签对应的 Dom
metaEl.setAttribute(
  "content",
  `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`
);

const scale = 1 / window.devicePixelRatio;
// 这里 metaEl 指的是 meta 标签对应的 Dom
metaEl.setAttribute(
  "content",
  `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`
);