前端面试八股文

1、HTTP和HTTPS

1.1、http和https的基本概念

http: 是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。

https: 是以安全为目标的 HTTP 通道，即 HTTP 下 加入 SSL 层进行加密。其作

用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

1.2、 http 和 https 的区别及优缺点？

• http 是超文本传输协议，信息是明文传输，HTTPS 协议要比 http 协议安全，https 是具有安全性的 ssl 加密传输协议，可防止数据在传输过程中被窃取、改变，确保数据的完整性(当然这种安全性并非绝对的，对于更深入的 Web 安全问题，此处暂且不表)。
• http 协议的默认端口为 80，https 的默认端口为 443。
• http 的连接很简单，是无状态的。https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。
• https 缓存不如 http 高效，会增加数据开销。
• Https 协议需要 ca 证书，费用较高，功能越强大的证书费用越高。
• SSL 证书需要绑定 IP，不能再同一个 IP 上绑定多个域名，IPV4 资源支持不了这种消耗

1. 3、https 协议的工作原理

客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤：

1. 客户端使用 https url 访问服务器，则要求 web 服务器 建立 ssl 链接 。

2. web 服务器接收到客户端的请求之后，会 将网站的证书（证书中包含了公钥），传输给客户端。

3. 客户端和 web 服务器端开始 协商 SSL 链接的安全等级 ，也就是加密等级。

4. 客户端浏览器通过双方协商一致的安全等级， 建立会话密钥 ，然后通过网站的公钥来加密会话密钥，并传送给网站。

5. web 服务器 通过自己的私钥解密出会话密钥 。

6. web 服务器 通过会话密钥加密与客户端之间的通信 。

2、TCP三次握手

1. 第一次握手： 建立连接时，客户端发送 syn 包（ syn=j ）到服务器，并进入 SYN_SENT状态，等待服务器确认； SYN ：同步序列编号（Synchronize Sequence Numbers）。

2. 第二次握手： 服务器收到 syn 包并确认客户的 SYN （ack=j 1）， 同时也发送一个自己的 SYN 包 （syn=k），即 SYN ACK 包，此时服务器进入 SYN_RECV 状态；

3. 第三次握手： 客户端收到服务器的 SYN ACK 包，向服务器发送确认包 ACK(ack=k 1 ）， 此包发送完毕，客户端和服务器进入 ESTABLISHED （TCP 连接成功）状态，完成三次握手。

 3、TCP/IP / 如何保证数据包传输的有序可靠？

 4、TCP 和 UDP 的区别

1. TCP 是面向 链接 的，而 UDP 是面向无连接的。

2. TCP 仅支持 单播传输 ， UDP 提供了单播，多播，广播的功能。

3. TCP 的三次握手保证了连接的 可靠性 ; UDP 是无连接的、不可靠的一种数据传输协议， 首先不可靠性体现在无连接上，通信都不需要建立连接，对接收到的数据也不发送 确认信号，发送端不知道数据是否会正确接收。

4. UDP 的 头部开销 比 TCP 的更小，数据 传输速率更高 ， 实时性更好 。

 5、HTTP请求跨域问题

跨域问题指的是在浏览器发起 HTTP 请求时，由于浏览器的安全限制，只允许相同域名、协议、端口号之间的请求，而禁止不同域名之间的请求。例如，如果网站 A 的页面中使用 JavaScript 向网站 B 发起 HTTP 请求，由于跨域限制，这个请求会被浏览器拒绝。

解决跨域问题可以采取以下几种方法：

• JSONP

JSONP 是一种利用 <script> 标签的跨域方法。通过在页面中添加一个 <script> 标签，并将 src 属性设置为目标 URL，服务器返回的内容会被当作 JavaScript 代码执行，从而实现跨域请求。

缺点：JSON 只支持 get，因为 script 标签只能使用 get 请求；JSONP 需

要后端配合返回指定格式的数据。

• CORS

CORS（Cross-Origin Resource Sharing）是一种基于 HTTP 头部的跨域解决方案。通过在服务器端设置响应头 Access-Control-Allow-Origin，可以允许指定源的请求访问资源。

• 代理

在客户端和服务器之间添加一个代理层，所有的 HTTP 请求都先经过代理服务器，再由代理服务器向目标服务器发起请求。由于代理服务器和目标服务器之间没有跨域问题，因此可以成功地完成请求。

 6、Cookie、sessionStorage、localStorage 的区别

Cookie、sessionStorage、localStorage 都是浏览器端存储数据的方式，但它们之间有以下区别：

1. 存储大小：Cookie 最大只能存储 4KB 的数据，而 sessionStorage 和 localStorage 可以存储更多的数据，一般最大可存储几十 MB 的数据。

2. 生命周期：Cookie 的生命周期由 expires 或 max-age 字段控制，在其生存期内有效，可以在不同的页面之间共享。相比之下，sessionStorage 只在当前会话（页面关闭后即失效）中有效，而 localStorage 的数据则始终有效，除非通过代码或用户手动清除。

3. 与服务器的通信：Cookie 在请求时会自动携带到服务器端，因此可以用于保存会话信息等。sessionStorage 和 localStorage 则仅存储在本地，不会与服务器进行交互。

4. 安全性：Cookie 的数据可以在浏览器和服务器之间传输，存在被劫持的风险。相比之下，sessionStorage 和 localStorage 数据仅存储在本地，相对更加安全。

综上所述，Cookie、sessionStorage、localStorage 在存储数据的大小、生命周期、与服务器的通信和安全性等方面不同，使用时需要根据具体情况选择合适的方式。

 7、粘包问题分析与对策

粘包问题是指在网络传输过程中，对于多个数据包的发送，在接收端会被看成一个大的数据包，导致数据处理出错。粘包问题的原因一般是由于发送方和接收方之间的通信协议不同步导致的。

对于解决粘包问题，主要可以从以下几个方面入手：

1. 固定包长：可以将每个数据包的长度固定为一个特定值，例如设置为 1024 字节，则每次发送时都会按照这个长度进行封包，从而避免粘包问题的发生。

2. 添加分隔符：通过在每个数据包的结尾加上特殊的分隔符（例如 "\r\n"），接收端就可以根据分隔符将接收到的数据拆分成多个数据包进行处理，从而避免粘包问题的发生。

3. 发送数据大小信息：在每个数据包的开头添加一个表示数据包大小的字段，接收端在接收数据时先读取该字段，并根据该字段决定本次读取多少字节的数据，从而避免粘包问题的发生。

4. 使用应用层协议：应用层协议可以定义数据包的具体格式，包括包头、包体等信息，从而确保每个数据包的边界清晰明确，避免粘包问题的发生。

8、 从输入 URL 到页面加载的全过程

从输入 URL 到页面加载的全过程可以概括为以下几个步骤：

1. DNS 解析：浏览器首先根据 URL 中的域名部分解析出对应的 IP 地址，查询本地 DNS 缓存，如果不存在则向 ISP 的 DNS 服务器发起请求，并递归查询直到查到对应的 IP 地址。

2. TCP 连接：浏览器使用 HTTP 协议向对应的 Web 服务器发送请求时，需要通过 TCP 协议建立与 Web 服务器的连接，包括三次握手和四次挥手等过程。

3. 发送 HTTP 请求：在建立好 TCP 连接后，浏览器向 Web 服务器发送 HTTP 请求，包括请求头、请求方法、请求参数等信息。

4. 服务器处理请求：Web 服务器接收到浏览器发送的 HTTP 请求后，根据请求的内容进行相应的处理，包括解析请求参数、读取数据库、处理业务逻辑等操作，并将处理结果返回给浏览器。

5. 接收 HTTP 响应：浏览器接收到 Web 服务器返回的 HTTP 响应后，开始解析响应头、解压缩响应体、校验响应状态码等。

6. 渲染页面：浏览器根据响应体中的 HTML、CSS 和 JavaScript 文件开始渲染页面，包括构建 DOM 树、解析 CSS 样式、执行 JavaScript 脚本等操作。

7. 页面加载完成：当页面所有资源都下载完成并且解析完毕后，页面便加载完成，此时浏览器会触发 DOMContentLoaded 事件，通知网页已经加载完毕，可以开始交互。

综上所述，从输入 URL 到页面加载的全过程包括 DNS 解析、TCP 连接、发送 HTTP 请求、服务器处理请求、接收 HTTP 响应、渲染页面和页面加载完成等多个阶段。在每个阶段中，各种协议和技术都发挥了重要作用，并通过协同工作实现了整个过程。

 9、浏览器重绘与重排的区别？ 

浏览器的重绘（repaint）指的是一个元素的外观被改变，但是没有改变布局的情况下浏览器需要重新绘制这个元素。例如，修改了文字颜色、背景颜色、边框颜色等属性，都会触发浏览器的重绘过程。

而重排（reflow）指的则是因为元素的布局或者几何属性发生了改变，导致整个页面布局的重新计算和绘制。例如，改变了元素的大小、位置、字体等属性都会触发重排，因为它们都会影响到其他元素的布局和位置。

重排比重绘更加耗费浏览器性能，因为它不仅会重新计算和绘制当前元素，还会涉及到其他元素的计算和绘制，引起全局性的效果。在优化网站性能的时候，我们应该尽量避免触发浏览器的重排过程，而通过合理的 CSS 设计和使用一些技巧，可以减少重排的次数，提高页面加载速度和响应速度。

10、如何避免重绘或者重排？

为了避免页面中的重排和重绘，可以考虑以下几个方面来优化页面：

1. 使用 CSS transform 代替 top 或者 left 来进行元素的位置移动，因为使用 top 和 left 会导致浏览器进行页面布局的计算，而使用 transform 进行位移则不会影响到布局的计算。

2. 使用 CSS opacity 代替 visibility 来控制元素的显示和隐藏，因为使用 visibility 属性会影响到布局的计算，而使用 opacity 不会影响布局。

3. 避免逐条修改 DOM 元素的样式，而是通过预先定义好 class，然后修改 DOM 的 className 来统一修改样式。

4. 可以将需要频繁操作的 DOM 元素先从文档中移除出来，再修改其样式和属性，最后再把元素加回文档中，可以避免由于对 DOM 元素频繁修改而导致的多次重排、重绘等性能问题。

5. 使用 CSS3 动画或者过渡代替 JavaScript 对元素样式的直接操作，因为使用 CSS3 动画或过渡可以利用 GPU 加速，使得动画效果更加流畅。

11、介绍下 304 过程 

304 是 HTTP 协议中的一个状态码，表示请求资源未被修改，可以直接从本地缓存中获取。

浏览器在发起 HTTP 请求时，会先检查浏览器缓存是否有可用的资源副本，如果有则向服务器发送一个条件请求，该请求会包含一个 If-Modified-Since 头部，这个头部的值是上次请求时服务器返回的 Last-Modified 值。如果服务器端验证发现这个时间之后文件没有发生改变，则会返回状态码 304 Not Modified，此时浏览器就可以从本地缓存中获取资源而不需要重新下载。

此外，在请求资源时，浏览器还会检查资源的 ETag 和 Cache-Control 头部信息，如果命中了缓存策略，则同样返回 304 状态码。

需要注意的是，浏览器的缓存机制依赖于响应头中的各种缓存控制字段，比如 Expires、Cache-Control、Last-Modified 等，需要在服务器端进行正确的配置，才能使得缓存起到良好的性能优化作用。 

12、浏览器的缓存机制 强制缓存 && 协商缓存

浏览器的缓存机制可以分为强制缓存和协商缓存两种类型。

• 强制缓存

当浏览器需要请求某个资源时，会先检查该资源的缓存情况，并根据缓存情况来决定是否需要从服务器重新获取资源。如果该资源在浏览器中有可用的缓存副本并且没有过期，则浏览器会直接使用该缓存副本，而不需要向服务器发送 HTTP 请求。这被称为“强制缓存”。

强制缓存可以通过设置资源的响应头信息来实现，常见的设置方式有两种：Expires 和 Cache-Control。

• Expires 是一个绝对时间，表示资源的过期时间，当请求资源时，如果当前时间未超过 Expires 的值，则直接使用缓存资源。
• Cache-Control 则是一个相对时间，表示资源的有效期，在请求资源时，如果当前时间距离上次资源请求时间在 Cache-Control 规定的时间范围内，则直接使用缓存资源。

• 协商缓存

当浏览器发现某个资源的缓存已经过期了，或者没有缓存副本可用时，就需要向服务器发送条件请求，询问该资源是否有修改。如果服务器返回的响应中包含了该资源的 ETag 或者 Last-Modified 等标识资源版本的请求头信息，则浏览器可以根据这些头信息来决定是否需要从服务器重新获取资源。这种缓存方式被称为“协商缓存”。

协商缓存的逻辑是，浏览器在请求资源时，会带上一个 If-None-Match 头部，该头部的值就是上一次服务器返回的 ETag 值；或者带上一个 If-Modified-Since 头部，该头部的值是上次请求时服务器返回的 Last-Modified 值。如果服务器发现客户端传来的 ETag 或者 Last-Modified 与服务器上的资源版本相同，则返回 304 Not Modified 状态码，表示资源没有修改，让浏览器使用本地缓存。如果资源已经被修改，则返回新的资源，并且在响应头中添加新的 ETag 和 Last-Modified 信息。

13、 说下进程、线程和协程

进程 是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程， 是操作系统进行资源分配和调度的一个独立单位，是应用程序运行的载体。进程是一种抽象的概念，从来没有统一的标准定义。

线程 是程序执行中一个单一的顺序控制流程，是 程序执行流的最小单元 ，是处理器调度和分派的基本单位。一个进程可以有一个或多个线程，各个线程之间共享程序的内存空间( 也就是所在进程的内存空间 ) 。一个标准的线程由线程 ID 、当前指令指针(PC) 、寄存器和堆栈组成。而进程由内存空间 ( 代码、数据、进程空间、打开的文件) 和一个或多个线程组成。

协程 ，英文 Coroutines ，是一种 基于线程之上，但又比线程更加轻量级的存在 ，这种由程序员自己写程序来管理的轻量级线程叫做『用户空间线程』，具有对内核来说不可见的特性

 HTML && CSS

14、HTML5 新特性

HTML5 是一个用于结构化和呈现万维网内容的标记语言，与 HTML 4 相比，HTML5 引入了很多新的特性。

一些 HTML5 的新特性：

1. 语义化标签：如 header、footer、nav、section、article 和 aside 等标签，用于更好地描述内容。

2. 视频和音频：HTML5 引入了 video 和 audio 标签来支持视频和音频播放，从而无需使用 Flash 或其他插件。

3. Canvas 绘图：Canvas API 可以在网页上实时绘制图形，这对于游戏和数据可视化非常有用。

4. Web 存储：HTML5 引入了 Web 存储技术，如 localStorage 和 sessionStorage，可以在客户端存储数据。

5. Web Workers：HTML5 中的 Web Workers 允许在主线程之外运行 JavaScript 代码，实现多线程并发处理。

6. 地理定位：通过 HTML5 的 Geolocation API，网页可以获取用户的地理位置信息。

以上只是 HTML5 的一些新特性，还有很多其他的新特性，如表单控件、Web 应用程序和离线 Web 应用等。

14.1、语义化的优点

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

15、 CSS 选择器及优先级

选择器

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

优先级：

• !important
• 内联样式（1000）
• ID 选择器（100）
• 类选择器/属性选择器/伪类选择器（10）
• 元素选择器/伪元素选择器（1）
• 关系选择器/通配符选择器（0）
• 带!important 标记的样式属性优先级最高；
• 样式表的来源相同时：!important > 行内样式>ID 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

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

• 固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
• Fixed 定 位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。
• 相对定位 relative：如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
• 绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
• 粘性定位 sticky：元素先按照普通文档流定位，然后相对于该元素在流中的 flowroot（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。
• 默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。

 17、box-sizing 属性

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

• content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。【标准盒子模型】
• border-box：为元素设定的宽度和高度决定了元素的边框盒。【IE 盒子模型】
• inherit：继承父元素的 box-sizing 值

 18、CSS 盒子模型

 CSS 盒子模型（Box Model）指的是一个 HTML 元素的大小和边距如何计算。在 CSS 中，所有的元素都可以看作是盒子，每个盒子由四个部分组成：content，padding，border 和 margin。

• 在标准的盒子模型中，width 指 content 部分的宽度。
• 在 IE 盒子模型中，width 表示 content padding border 这三个部分的宽度。

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

标准盒模型： 一个块的总宽度 = width margin( 左右 ) padding( 左右 ) border( 左右)

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

19、BFC 

1、BFC 的概念

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

2、BFC 的原理布局规则

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

3、如何创建 BFC ？

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

4、BFC 的使用场景

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

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

1. 使用 display 和 table-cell 属性，将父元素设置为 display: table;，子元素设置为 display: table-cell; vertical-align: middle; text-align: center;，这样即可实现水平和垂直居中。
2. 使用绝对定位 position，将子元素的左上角分别调整至居中位置，此时需要将 margin 设置为负宽高的一半。我们可以这样设置子元素的样式：position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 即可实现水平和垂直居中。
3. 使用 flex 布局，将父元素设置为 display: flex;，并设置 justify-content: center; align-items:center;，这样即可实现水平和垂直居中。
4. 使用 grid 布局，将父元素设置为 display: grid;，并使用 justify-content: center; align-items:center; 实现水平和垂直居中。

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

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

 22、用 CSS 实现三角符号

可以通过设置元素的 border 属性来实现三角形的效果。

具体来说，可以将一个元素的上下左右四个边框设置为一个宽度为 0 的 border，然后再将其中三个边框设置为非零宽度且透明的 border。这样就可以在元素的某一侧生成一个三角形了。

例如，要在一个元素的左侧生成一个向右的三角形，可以按如下方式添加 CSS 样式：

1.  
   .triangle {
2.  
   width: 0;
3.  
   height: 0;
4.  
   border-top: 10px solid transparent; /* 上边框，透明 */
5.  
   border-bottom: 10px solid transparent; /* 下边框，透明 */
6.  
   border-right: 10px solid red; /* 右边框，红色，宽度为 10 像素 */
7.  
   }

这样设置之后，就会在 .triangle 元素的左侧生成一个宽度为 0、高度为 0、底部为直线、右侧为斜线的三角形，因为上、下两个边框都是透明的，而右边框是红色且有宽度的。

类似地，可以通过修改上下左右四个边框的设置来实现不同方向和不同大小的三角形。

页面布局 

23、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 实现圣杯布局

 24、Rem 布局

首先 Rem 相对于根 (html) 的 font-size 大小来计算。

可以快速适用移动端布局，字体，图片高度

① 目前 ie 不支持，对 pc 页面来讲使用次数不多；

② 数据量大：所有的图片，盒子都需要我们去给一个准确的值；才能保证不同机型的适配；

③ 在响应式布局中，必须通过 js 来动态控制根元素 font-size 的大小。也就是说 css 样式和 js 代码有一定的耦合性。且必须将改变 font-size 的代码放在 css样式之前。

25、 百分比布局

通过百分比单位 " % " 来实现响应式的效果。通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height 百分比相对于 height，width 百分比相对于 width。 padding、border、margin 等等不论是 垂直方向还是水平方向，都相对于直接父元素的 width。

除了 border-radius 外，还有比如 translate、background-size 等都是相对于自身的。

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

26、浮动布局

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

优点

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

缺点

最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素， 会造成父级元素高度塌陷

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

• 使用 rem 布局

rem（font size of the root element）是 CSS3 新增的一个相对单位，它以根元素的字体大小作为参考值，实现了在不同设备和不同分辨率下的网页布局一致性。因此使用 rem 布局进行移动端适配时，需要将页面的宽度设置为设置的视窗宽度后，再根据设计稿中的尺寸将像素值转换成 rem 值。

例如，如果设计图的宽度为 750px，要在 iPhone 6 上显示，则网页宽度应为 375px（iPhone 6 的屏幕宽度），这时我们可以将根元素的字体大小设置为 37.5px，然后按照设计图上的尺寸将像素值除以 37.5 得到转换后的 rem 值。

1.  
   html {
2.  
   font-size: 37.5px;
3.  
   }
4.  
    
5.  
   .box {
6.  
   width: 100px; /* 在设计稿上宽度为 100px */
7.  
   height: 100px;
8.  
   font-size: 16px; /* 设计稿中的字体大小 */
9.  
   }

rem 适配的优缺点：

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

• 使用 viewport

Viewport（视口）是指浏览器可视区域的大小，可以通过 meta 标签来设置 viewport 的大小和缩放比例等。使用 viewport 进行移动端适配时，需要将页面的宽度设置为 device-width，这样就可以根据设备屏幕的宽度来自动适配了。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

设置好 viewport 后，就可以使用百分比等相对单位进行布局，从而实现移动端适配。

viewport 适配的优缺点：

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

总结：

rem 和 viewport 都可以用来进行移动端适配，其核心思路是让页面内容充满整个视窗。使用 rem 布局时需要将像素值转换成 rem 值，而使用 viewport 时则直接使用相对单位进行布局即可。

 28、清除浮动的方式

• 在父元素中定义 overflow 属性为 hidden 或 auto，开启bfc
• 设置高度
• 最后一子元素 宽100%，清除both

1.  
   .clearfix:after{
2.  
      content:"";
3.  
      display:block;
4.  
      clear:both;
5.  
      visibility:hidden;
6.  
   }
7.  
   // visibility隐藏不会继承 opacity可以被继承 都占用原来的位置
8.  
   //display:none 不占用原来的位置

• 4. 额外标签法：即在浮动元素下添加一个空的块级元素并设置 clear 属性，从而达到清除浮动的目的。例如：

1.  
   <div class="parent">
2.  
     <div class="float-left">浮动元素</div>
3.  
     <div style="clear: both;"></div>
4.  
   </div>

这篇好文章是转载于：学新通技术网