面试题[HTML5_CSS3]

1. 新特性

1.1 HTML5 新特性

HTML5 作为一种用于构建和呈现 Web 内容的标准技术，引入了许多新特性和功能，为 Web 体验带来了重大革新。以下是 HTML5 的主要新特性：

语义化标签：HTML5引入了一些新的语义化标签，如<header>、<footer>、<nav>、<section>、<article>等，用于更好地描述和组织网页内容，使搜索引擎和浏览器能更好地理解和处理页面结构。这些标签使得页面的内容结构化，便于搜索引擎索引和用户理解。
表单增强：HTML5引入了新的表单控件类型和属性（如email、tel、date、range等），以及新的表单验证API。这些新特性提供了更好的输入控制和验证，增强了表单的交互性和用户体验。
视频和音频：HTML5提供了<video>和<audio>标签，允许在网页上直接嵌入视频和音频文件，无需依赖第三方插件（如Flash）。这消除了对插件的依赖，并提供了更好的可访问性和可定制性。
画布（Canvas）：HTML5的<canvas>标签允许使用JavaScript在网页上绘制图形、动画和图像。这提供了一种原生的方法来创建交互式和动态的图形，如游戏和数据可视化。此外，WebGL技术还提供了3D渲染能力，使得开发简单的网页游戏和3D应用成为可能。
地理定位：HTML5通过navigator.geolocation API提供了一种在Web应用程序中获取用户位置的标准方法。这使得开发者可以创建基于位置的应用程序，如地图导航、附近的店铺搜索等。
存储：HTML5引入了两种新的客户端存储机制，即localStorage和sessionStorage。这些机制允许在浏览器中存储数据，以便在不同页面和会话之间共享和保留数据。这为离线使用和本地缓存提供了更好的支持。此外，HTML5还支持离线应用缓存（Application Cache），使得网页应用在离线状态下也能继续访问。
Web Workers：HTML5的Web Workers允许在后台运行脚本，而不会阻塞用户界面。这使得创建多线程Web应用程序成为可能，提高了性能和响应能力。
拖放：HTML5的拖放API使得在网页中实现拖放操作变得更加简单。开发者可以使用新的事件和方法来实现从一个元素到另一个元素的拖动和放置，从而实现更直观和交互性的用户界面。
Web存储：HTML5引入了一种新的Web存储API，即IndexedDB，它提供了一种在浏览器中存储结构化数据的方法。开发者可以使用这个API来创建复杂的数据库应用程序，如即时通讯和离线阅读等。
响应式设计：HTML5使得开发响应式Web设计更加容易。它提供了一些新的CSS功能，如媒体查询和弹性布局，以便根据不同设备和屏幕大小调整和优化网页布局和样式。这消除了为不同设备创建多个网站的需要，简化了开发并确保了一致的用户体验。

1.2 CSS3 新特性

CSS3是CSS（层叠样式表）技术的最新演变，它引入了许多新特性来增强设计师和开发人员的设计能力。以下是一些CSS3的新特性：

选择器：
- 属性选择器：选择具有特定属性的元素，例如[attr=value]。
- 伪类选择器：为特定状态的元素添加样式，例如:hover、:active、:visited等。此外，CSS3还新增了动态伪类选择器和目标伪类选择器。
- 伪元素选择器：选择特定部分的元素，例如::before、::after。CSS3支持自定义的伪元素。
- 多重选择器：使用逗号分隔来同时选择多个元素，例如element1, element2。
盒模型：
- box-sizing属性：改变了默认的CSS盒模型，使其更容易进行布局。
颜色和背景：
- 新增颜色模式：CSS3增加了对透明度的支持，使用rgba()、hsla()或opacity来设置。同时，CSS3提供了新的颜色空间，如RGBA、HSL和HSLA。
- 背景属性：
  - background-size：允许更改背景图像的大小。
  - background-repeat：能够更改背景图像的重复行为。
  - background-position：允许在水平和垂直方向上移动背景图像。
  - background-image：允许多背景图像同时使用。
  - background-origin：设置背景图的原点。
  - background-clip：对背景图进行修剪。
边框和阴影：
- border-radius：为边框添加圆角效果。
- box-shadow：为元素添加阴影效果。
- text-shadow：为文本添加阴影效果。
文字效果：
- text-overflow：处理溢出文本的显示方式。
- 文字或图像的变形处理：使用transform属性实现元素的位移、旋转、缩放等效果。
布局：
- Flexbox：用于一维布局的CSS3新布局模型。
- Grid：用于二维布局的CSS3新布局模型。
- 多列布局（Multi-column Layout）：CSS3提供了一种创建多列文本或布局的方法，类似于报纸的排版。
- 弹性盒子布局：可以在一行或一列上自动调整元素的位置和大小，以适应不同的屏幕尺寸。
动画和过渡：
- 过渡（transition）：CSS3中过渡效果可以让元素的属性值在一段时间内平滑地过渡到新值，从而使得动画效果更加流畅。过渡动画是从一个状态渐渐的过渡到另外一个状态，可以让我们页面更好看、更动感。
- 动画（animation）：CSS3中动画可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化、更多控制，连续自动播放等效果。
响应式设计：
- 媒体查询（Media Queries）：允许开发人员创建在不同设备和屏幕尺寸上都能良好显示的响应式网页设计。
其他新特性：
- 对SVG图像的支持：CSS3增加了对SVG图像的支持。
- 自定义字体：CSS3提供了一种新的方式来定义字体（@font-face）。
- 线性渐变和径向渐变：CSS3支持线性渐变（linear gradients）和径向渐变（radial gradients）。
- calc()函数：此CSS函数让你在声明CSS属性值时执行一些计算，括号里面可以使用+、-、*、/来进行计算。
- filter属性：将模糊或颜色偏移等图形效果应用于元素。

2. HTML5

2.1 HTML 代码第一行的作用

HTML 代码的第一行通常是文档类型声明（Document Type Declaration，简称 doctype 声明），也称为文档类型定义（Document Type Definition）。<!DOCTYPE> 不是一个 HTML 标签，它是一个指令。它的作用是告诉浏览器正在使用的 HTML 版本和规范。

在 HTML5 中，文档类型声明是这样的：

html

<!DOCTYPE html>

2.2 HTML 语义化

HTML 语义化是指根据内容的结构和含义（内容语义化），选择合适的 HTML 标签（代码语义化），以更好地表达内容的意义和层次。通俗来讲，就是用正确的标签做正确的事情。

语义化的优点：

对机器友好：SEO 友好、提高可访问性（例如屏幕阅读器，帮助视障用户浏览网页）、内容组织（语义化标签有助于搜索引擎爬虫和其他自动化工具更好地抓取和索引网页内容，甚至自动生成目录）。
对开发者友好：代码可读性、维护和协作。

在实际开发中，合理选择和使用语义化标签尤为重要。过度使用或滥用语义化标签可能适得其反。开发者应根据内容的实际含义和结构，选择最适合的标签。

2.3 HTML 行内元素、块级元素、空（void）元素

行内元素（Inline Elements）
行内元素通常用于文本内部，它们不会导致文本换行，而是在内容流中连续展示。这些元素主要用来改变一小块内容的样式或行为，而不影响周围内容的布局。常见的行内元素包括：
- <span>
- <a>
- <img>
- <b>、<i>、<strong>
- <input>、<select>
块级元素（Block-level Elements）
块级元素在页面中通常表现为“块”，会在其前后自动创建换行。块级元素用于结构上的组织，它们会占据其父元素（容器）的完整宽度。常见的块级元素包括：
- <div>
- <p>
- <h1> ~ <h6>
- <ul>、<ol>、<li>
空元素（Empty Elements）
空元素是那些没有结束标签、只有开始标签的元素，因为它们不包含任何内容。常见的空元素包括：
- <img>
- <br>
- <hr>
- <input>
- <meta>、<link>

2.4 HTML5 离线储存

HTML5 引入了一些强大的技术来支持离线存储，使得我们可以创建在无网络状态下也能正常工作的应用。这些技术包括本地存储（Local Storage） 和 离线存储（Application Cache）。离线存储指的是：允许开发者指定哪些文件（如 HTML 页面、图像、JS 脚本和 CSS 样式表）应该被浏览器缓存，并能够在没有网络连接时访问它们。

工作原理：

缓存清单文件：首先，需要创建一个清单文件（通常以 .appcache 扩展名保存），在这个文件中列出要缓存的资源。这个文件必须声明正确的 MIME 类型，即 text/cache-manifest。。
引用清单文件：在 HTML 页面的 <html> 标签中使用 manifest 属性引用这个清单文件。例如：
html
```
<html manifest="example.appcache">
```
1

结构清单文件：清单文件的结构通常如下：

txt

# 2024-01-01 v1.0.0
CACHE:
/css/style.css
/js/app.js
/images/logo.png

NETWORK:
*

FALLBACK:
/ /offline.html

2.5 head 标签

<head> 标签用于包含文档的元数据，这些元数据不会在页面上直接显示，但对页面的设置、SEO、样式、脚本和其他行为有重要影响。

2.6 meta 标签

<meta> 元素通常用于提供有关 HTML 文档的元数据，这些元数据不会显示在页面上，但会被浏览器解析用于页面渲染、搜索引擎优化（SEO）或其他用途。

<meta> 元素通常位于HTML文档的 <head> 部分中，包含的属性有：name 和 content、http-equiv、charset、itemprop：

如果设置了 name属性，meta 元素提供的是文档级别的元数据，应用于整个页面。
如果设置了 http-equiv属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。
如果设置了 charset属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

html

<meta charset="UTF-8">

<meta name="description" content="这是一个页面描述">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index,follow">

<meta http-equiv="refresh" content="5;URL=http://www.example.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

2.7 src 和 href 的区别

HTML 中的 src 和 href 属性虽然都是用于指定资源的地址，但在具体应用标签和资源加载方式上有着明显的区别。

应用标签不同：
- 这两个属性分别适用于不同的 HTML 标签。误用 href 替代 src（或者反之）可能会导致页面功能无法正常运作，因为浏览器不会对错误的属性做出正确的响应。
- src 属性的作用是 指定要加载的资源路径，常出现于 <script>、<img>、<audio>、<video>、<iframe> 等标签中，用于加载 JavaScript 脚本、图像、音频、视频或嵌入的网页文件。
- href 属性的作用是 指定超链接的目标地址 或定义文档与外部资源的关联，主要用在 <a>、<link>、<area> 等标签中。例如，当你创建一个超链接 <a> 时，需要用 href 属性指定用户点击后跳转的目标 URL；或者当你在文档头部使用 <link> 标签引入外部样式表时，也是使用 href 属性来指定样式表的地址。
资源加载方式不同：
- 当浏览器解析到适用于 src 属性的标签（比如 <script> 和 <img>）时，会暂停其他资源的下载和处理，直到将该资源加载、编译（如果是 JavaScript）、执⾏（如果是脚本）完成。这种方式称为阻塞加载，所以⼀般建议将 JavaScript 脚本放在页面底部。
- 而当浏览器识别到适用于 href 属性的标签（比如 <a> 和 <link>）时，会并行下载资源，不会停⽌对当前⽂档的处理。这种方式称为非阻塞加载，浏览器可以同时处理超链接或引入样式表。

2.8 script 标签中 defer 和 async 的区别

defer 和 async 属性用于控制脚本的加载和执行 ，都是异步加载外部的 JS 脚本文件。

主要区别：

执行顺序：1、defer 保证脚本按照在 HTML 中出现的顺序执行，一般是在 HTML 解析完成后才执行。2、而 async 则是谁先下载完成谁先执行， async 可能会阻断 HTML 解析以执行脚本。
适用场景：1、defer 适用于需要在 HTML 完全解析后才能运行的 JS 脚本，尤其是依赖于 DOM 的 JS 脚本。它保证了脚本执行的顺序性和依赖关系，适合用于包含多个脚本的页面。2、async 适合 不依赖于其他脚本 且 不被其他脚本依赖 的独立模块，例如：计数器或广告加载。

扩展知识：

页面性能影响：1、性能优化：使用 defer 和 async 可以显著改善页面的加载时间。特别是在加载大型脚本或依赖多个脚本的页面时，合理使用这两个属性能减少页面渲染的阻塞时间，提升用户体验。2、减少首屏加载时间：由于 async 和 defer 脚本不阻塞 HTML 解析，可以帮助减少首次内容绘制（FCP）和首次有意义绘制（FMP）的时间，在做 SEO 的时候可以运用上这两个属性。
脚本管理技巧：可以通过现代的模块打包工具如 Webpack 、Vite 管理脚本依赖，并自动为不同的脚本分配最合适的加载策略（例如动态导入）。
历史兼容性：老旧的浏览器中可能不完全支持或表现不一致。开发时需要考虑到目标用户群体可能使用的浏览器类型。

2.9 img 标签 srcset 属性

在开发响应式页面时，经常需要考虑图像在不同设备上的显示效果。srcset 属性就非常有用，它允许我们为 <img> 标签指定多个源图像，并根据设备的屏幕大小和分辨率来选择最合适的图像。这样做的好处是可以避免在小屏设备上加载过大的图像，节省带宽并提升页面的加载速度。

主要作用：srcset 属性可为同一图像提供多个文件源和各自的分辨率描述符。浏览器会根据当前设备的屏幕尺寸（如宽度）和像素密度（如 DPI ）来选择最合适的图像源进行加载。这样，就能 获得与其设备相匹配的最佳图像体验，而不必加载比所需更大或更高分辨率的图像，从而节省带宽并加快页面加载速度。用法如下：

html

<img
  src="small.jpg"
  srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
  sizes="(max-width: 600px) 500px, (max-width: 900px) 1000px, 1500px"
  alt="示例图片"
/>

一般情况下，srcset 和 sizes 属性一起使用，因为 sizes 可以帮助浏览器更准确地知道在不同视图下应该显示多大的图像，这样浏览器在选择图像时就更加精准了。

2.10 title 和 h1 标签的区别

位置和作用：<title> 用于定义浏览器工具栏或标签页上的标题，对用户在浏览器外部的可见性和 SEO 影响最大；而 <h1> 用于页面内部，标识主要内容，对页面结构和内部 SEO 有重要作用。
可见性：<title> 在页面外可见，<h1> 在页面内可见。
SEO 重要性：两者都非常重要，但 <title> 更影响搜索引擎结果页中如何展示网页，而 <h1> 则影响搜索引擎对页面内容的理解。

2.11 b 和 strong 标签的区别

<b> 和 <strong> 标签都用于文本的样式展示，都能使文本加粗显示。但是它们的使用应当根据内容的语义需要来选择。如果文本的加粗仅仅是为了吸引视觉注意力而没有其他特别的意义，使用 <b> 标签是合适的。如果文本需要表达额外的重要性或强调，则应选择 <strong> 标签（有语义化）。

样式与可访问性：

样式：默认情况下，两者都会使文本加粗。然而，因为 <strong> 具有额外的语义重要性，所以使用 <strong> 更适合那些需要强调的内容。
可访问性：屏幕阅读器会读取 <strong> 标签包裹的内容时加重语气，因为这些内容被视为有特别强调的信息。 <b> 标签的内容则仅仅是正常语气，因为它只表示普通的文本样式更改。

2.12 i 和 em 标签的区别

<i> 和 <em> 标签都用于改变文本的样式，都是使文本以斜体显示。

<i> 标签只展示样式，不强调内容。
<em> 标签不仅展示样式，还具有强调文本的语义意义（有语义化）。

2.13 iframe 有哪些优点和缺点

<iframe> 是一个非常强大的 HTML 元素，允许我们在当前网页中嵌入另一个独立的网页。在集成第三方内容如视频、地图等方面非常有用。但是用了太多的 <iframe> 会影响页面加载速度，并对 SEO 和网页的可访问性带来挑战。

优点：

内容隔离：将第三方内容（如视频、地图）嵌入页面，不影响主页面的样式和脚本。
防止嵌入内容的恶意脚本：可以阻止嵌入内容与主页面直接交互，减少 XSS 风险。
应用集成：方便集成支付网关、社交媒体等外部服务，无需重构页面。
简化管理：适用于频繁更新的内容（如新闻、天气），集中管理更简单。

缺点：

性能问题：每个 <iframe> 都需要独立的 HTTP 请求，会增加页面加载时间，会阻塞主页面的 onload 事件，特别是多个 <iframe> 时。
SEO 影响：搜索引擎会忽略 <iframe> 中的内容，影响搜索排名。
可访问性：对屏幕阅读器不友好，需要适当的标题和描述。
布局和响应式设计：固定大小的 <iframe> 难以适应不同屏幕，需要额外的 CSS 调整。
跨域问题：同源政策限制了与不同域的 <iframe> 内容交互，但绕过这些限制可能带来安全风险。

2.14 label 标签的作用是什么

<label> 标签用于提升表单的可用性和可访问性，它把文本标签和相应的表单控件（如输入框）关联起来，让用户点击标签时，输入焦点自动跳到相应控件上。

提升可用性：用户点击 <label> 标签时，会自动聚焦到对应的表单控件。
增强可访问性：对使用屏幕阅读器的用户尤为重要，屏幕阅读器会读取 <label> 的内容，帮助用户理解表单控件的用途。

3. CSS3

3.1 BFC

常见定位方案：普通流 (normal flow)、浮动 (float)、绝对定位 (absolute positioning)。

概念：BFC (Block Formatting Context)，即块级格式化上下文，它是页面中的一块独立渲染区域，并且有一套属于自己的渲染规则。形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。

触发条件：只要元素满足下面任意一条件即可触发 BFC 特性：

html 根元素。
浮动元素：float 除 none 以外的值。
绝对定位元素：position (absolute、fixed)。
display 为 inline-block、table-cells、flex。
overflow 除了 visible 以外的值 (hidden、auto、scroll)。

3.2 Flex 布局

Flex 布局（也称为弹性盒布局）是 CSS3 中引入的一种布局模式，用于在容器内对子元素进行灵活的定位和对齐。通过使用 Flex 布局，可以实现响应式的页面布局和弹性的元素排列。

Flex布局的基本概念如下：

容器（Flex Container）：应用 Flex 布局的父元素称为容器。设置容器的display属性为flex或inline-flex即可启用Flex布局。
项目（Flex Items）：容器内的子元素称为项目。项目通过容器的 Flex 布局规则进行定位和对齐。容器内的每个元素都成为项目。在 Flex 布局中，子元素是不能浮动的（两种不同的布局方式）。
主轴（Main Axis）和交叉轴（Cross Axis）：Flex 布局是二维布局，由主轴和交叉轴组成。主轴是 Flex 容器的排列方向，而交叉轴则是垂直于主轴的方向。
主轴起点和终点：在主轴上，主轴起点是指主轴的开始位置，而主轴终点则是指主轴的结束位置。这取决于flex-direction属性的值。
Flex 容器的包裹性（Flex Container's Wrapping）：当 Flex 项目在主轴上的总长度超过了 Flex 容器的宽度时，可以选择让项目进行换行，这被称为 Flex 容器的包裹性。
Flex 项目的自动调整（Flex Item's Auto Adjustment）：Flex 项目在容器中具有自动调整的能力，可以根据剩余空间的分配情况，自动调整项目的尺寸。
Flex 项目的排序（Flex Item's Order）：通过order属性，可以控制 Flex 项目的排列顺序。默认情况下，项目的order值为0，可以通过正负值来改变项目的排序顺序。

flex: 1; 是什么意思：

用于指定一个弹性项（flex item）在可用空间中所占比例的属性。flex: 1 是 flex-grow, flex-shrink, 和 flex-basis 这三个属性的缩写形式。

flex-grow 指定弹性项的放大比例，用于分配剩余空间。在 flex: 1 中，flex-grow 的值为 1，表示弹性项可以根据需要放大，占据父容器中的剩余空间。
flex-shrink 指定弹性项的缩小比例，用于适应容器缩小的情况。在 flex: 1 中，默认值为 1，表示弹性项可以根据需要缩小，以适应父容器的缩小。
flex-basis 指定弹性项的初始大小。在 flex: 1 中，该值为 0%，表示弹性项的初始大小为 0，它将占据剩余空间。

综合起来，flex: 1 缩写的含义是，弹性项具有相等的放大比例、缩小比例为 1，并且初始大小为 0%，以平均分配剩余空间。

3.3 CSS Hack

CSS Hack 由于不同厂商的浏览器，比如 Internet Explorer、Safari、Mozilla Firefox、Chrome 等，或者是同一厂商的浏览器的不同版本，如 IE6 和 IE7，对 CSS 的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的 CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。而这个针对不同的浏览器写不同的 CSS 代码的过程，就叫 CSS Hack 。

简单的说，CSS Hack 的目的就是使你的 CSS 代码兼容不同的浏览器。当然，我们也可以反过来利用 CSS Hack 为不同版本的浏览器定制编写不同的 CSS 效果。

然而，需要注意的是，CSS Hack 并不是一种推荐的做法，因为它通常违反了标准的 CSS 规范，并且在不同的浏览器版本中可能不再适用或产生意外的行为。它们可能导致代码的可读性和可维护性降低，而且随着浏览器版本的更新，这些 Hack 可能需要不断调整和更新。相反，更好的做法是使用 CSS 预处理器（如 Sass、Less）或 CSS 后处理器（如 PostCSS）来处理浏览器兼容性问题。这些工具提供了更优雅、可维护的方式来处理不同浏览器之间的样式差异，例如使用 Mixin、变量、autoprefixer 等功能。此外，还可以采用现代的 Web 开发实践，例如使用 CSS 的 Flexbox 和 Grid 布局来取代旧的浮动和表格布局，以减少对 CSS Hack 的需求。

总之，尽量避免使用 CSS Hack，并采用更可靠、可维护的方法来处理浏览器兼容性问题，以提供更一致且可靠的用户体验。

3.4 CSS 盒子模型

CSS 盒子模型是用于布局和定位 HTML 元素的一种模型，它将每个元素看作是一个矩形的盒子。这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。这些部分围绕着元素的内容构成一个整体，决定了元素在页面中的尺寸和排列方式。

在CSS中，可以使用 box-sizing 属性来控制盒子模型的计算方式，常见的两个值为 content-box（默认值）和 border-box，分别表示计算宽度和高度时是否包含内边距和边框。

标准盒子模型：元素设置的宽度和高度（width 和 height）仅包括内容（content）的部分，不包括内边距（padding）、边框（border）和外边距（margin）。

IE盒子模型：元素设置的宽度和高度（width 和 height）包括了内容（content）、内边距（padding）、边框（border）的部分，但不包括外边距（margin）。

3.5 CSS 选择器及优先级

选择器：
- 基础选择器：通配符选择器、元素选择器、ID选择器、类选择器。
- 层次选择器：后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器。
- 属性选择器：如 [attr=value]。
- 伪类选择器：如 :hover、:nth-child()。
- 伪元素选择器：如 ::before、::after。
优先级：（从高到低）
- !important 声明的样式的优先级最高。
- 内联样式（直接在 HTML 元素上的 style 属性）。
- ID 选择器（如 #id）。
- 类选择器、属性选择器和伪类选择器（如 .class、[attr=value]、:hover）。
- 元素选择器和伪元素选择器（如 div、::before）。
- 通配符选择器（如 *）、后代选择器（如 div p）、子选择器（如 div > p）等组合选择器。
是否存在父选择器？
- CSS 中是没有直接的父选择器的。也就是说，在纯 CSS 中，你无法从子元素选择父元素。这背后的主要原因是 CSS 选择器的设计和实现方式，CSS 本质上是一个单向的、从上到下的样式描述语言。

3.6 媒体查询

媒体查询（Media Query）是 CSS3 中提供的一种功能强大的机制，用于针对不同的设备类型或设备特性应用不同的样式。通过媒体查询，我们可以根据设备的宽度、高度、分辨率、方向等条件，加载不同的 CSS 样式表，从而实现响应式设计。响应式设计指的是一个网站能根据用户所使用设备的不同，实现自动调整布局和样式，以提供最佳的用户体验。

使用方法：常见用法有内联样式、link 标签、和 import 语句。例如：

html

/* 直接在CSS文件中使用 */
@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 通过link标签 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="style.css">

/* 使用import语句 */
@import url("style.css") screen and (max-width: 600px);

媒体特性：除了屏幕宽度和高度，媒体查询还支持多种其他特性。例如：

aspect-ratio：元素的宽高比。
resolution：设备的分辨率。
orientation：设备的方向（横向或纵向）。
color：设备是否支持颜色，以及颜色深度。

3.7 隐藏元素

css

/* 脱离文档流、无法响应事件、回流、重绘 */
.hidden-element-1 {
  display: none;
}

/* 占据文档流、响应事件、不回流、重绘 */
.hidden-element-2 {
  visibility: hidden;
}

/* 占据文档流、响应事件、不回流、重绘 */
.hidden-element-3 {
  opacity: 0;
}

3.8 层叠上下文与层叠顺序

CSS层叠上下文（CSS Stacking Context）是 CSS 中的一个概念，用于描述 HTML 元素在 3D 空间中的层叠关系。层叠上下文是一个独立的渲染环境，其中的元素按照一定的规则进行层叠和显示。

层叠顺序（Stacking Order）是指 HTML 元素在层叠上下文中的显示顺序。层叠顺序决定了元素的覆盖关系，即哪个元素在上层显示，哪个元素在下层显示。

以下是一些常见的影响层叠顺序的因素，按照优先级从高到低排序：

元素的定位方式（Positioning）：绝对定位（position: absolute/fixed/sticky）的元素会覆盖其他非定位元素，同样定位方式的元素根据它们在文档流中的位置和层叠上下文的顺序进行层叠。
元素的 z-index 属性：通过 z-index 属性可以指定元素的层叠级别。具有较高 z-index 值的元素会覆盖具有较低 z-index 值的元素。但仅在同一层叠上下文中才会生效，不同层叠上下文中的 z-index 值无法比较。
元素的层叠顺序和文档流中的位置：在同一层叠上下文中，后出现的元素会覆盖先出现的元素。元素的层叠顺序也受到元素在文档流中的位置的影响，即后出现的元素会覆盖先出现的元素。
元素的层叠上下文：每个层叠上下文都形成一个独立的层叠环境，其中的元素在该环境中按照上述规则进行层叠。层叠上下文的嵌套和层叠顺序会影响元素的显示。

需要注意的是，层叠上下文和层叠顺序是基于元素的视觉呈现而言的，并不一定与 DOM 结构相对应。同时，还有其他一些因素（如 z-index 的 auto 值、opacity 属性等）也可能会影响层叠顺序。了解和正确运用层叠上下文和层叠顺序的概念，可以帮助我们更好地控制和调整元素的显示效果。

3.9 水平垂直居中实现方案

flex 布局
绝对定位 + margin: auto
绝对定位 + transform

css

/* flex 布局 */
.father {
  display: flex;
  justify-content: center;
  align-items: center;
}
.son {
  
}

/* 绝对定位 + margin: auto */
.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

/* 绝对定位 + transform */
.father {
  position: relative;
}
.son {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3.10 画一条 0.5px 的线

采用 transform: scale() 的方式，该方法用来定义元素的2D缩放转换。
css
```
transform: scale(0.5, 0.5);
```
1

采用 SVG 的方式，直接在 HTML 中放入一个 SVG 标签，设置线条的 strokeWidth 为 0.5。

html

<svg width="100%" height="1">
  <line x1="0" y1="0" x2="100%" y2="0" style="stroke:black;stroke-width:0.5" />
</svg>

采用 meta viewport 的方式：这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport 只针对于移动端，只在移动端上才能看到效果。
html
```
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5" />
```
1

3.11 移动端 1px 问题

1px 问题，是指在移动端开发时，由于设备屏幕的高分辨率，导致在页面上显示的 1 像素线条实际显示时看起来比设计稿中的要粗。这个问题通常出现在 Retina 屏幕或者其他高 DPI 的设备上，因为这些设备的物理像素是逻辑像素的多倍，从而使得设计需要的1像素线在实际显示时显得更粗。

解决 1px 问题的方法有很多，常用的有以下几种：

使用视网膜图像（Retina Images）：这是最原始但也最常见的方法，即给不同 DPI 的设备准备不同尺寸的图片。给普通屏幕使用普通图片，给高分辨率屏幕使用放大两倍的图片，通过 CSS 设置不同的背景图，从而保证在高分屏上显示清晰的1px线条。
使用视网膜边框（Retina Borders）：通过在高分屏设备上调整边框的大小。例如，对于2倍分辨率的设备，可以设置边框宽度为 0.5px，这样在物理像素上会显示为 1 像素宽度，从而达到显示设计图中1px高的效果。
使用 transform 缩放：通过 CSS3 的 transform 属性，将元素进行缩放。例如，可以将宽度为 1px 的线通过 scaleY(0.5) 来进行缩放，但注意要通过父元素来留出相应的空间，这样当元素被缩小时，依然能达到1px线的效果。

使用媒体查询：根据不同的设备像素比来动态变化 CSS 样式，比如在高 DPI 设备上设置 0.5px 的边框，对于普通屏幕则使用 1px。

css

.element {
  border-bottom: 1px solid black;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .element {
    border-bottom: 0.5px solid black;
  }
}

3.12 如何给网页设置小于 12px 的字体

在常规的 CSS 中，直接设置小于 12px 的字体在一些浏览器（特别是 Chrome）中是无效的，因为它们有最小字体限制。不过，我们有几种方法可以绕过这个限制，实现小于 12px 的字体。

使用 CSS 的 transform 属性。
通过图片替代文字。
使用相对于字体大小的单位。

3.13 动态修改伪元素样式

需求：伪元素高度使用 data 中的变量，对其进行动态修改。

实现：1、css / less 中使用 css 变量的方式；2、结合 vue 中动态行内样式进行伪元素动态属性设置。

vue

<template>
  <div class="test">
    <span :style="{ '--width': widthVar }" class="span">hello earth</span>
    <button @click="changeWidth">改变宽度</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      widthVar: "100px"
    };
  },
  methods: {
    changeWidth () {
      this.widthVar = '200px'
    }
  }
}
</script>

<style scoped>
.span {
  text-align: center;
  position: relative;
  width: var(--width);
}

.span::after {
  content: '';
  display: block;
  position: absolute;
  left: 100%; 
  width: var(--width);
  height: var(--width);
  border-radius: 50%;
  border: 2px solid black;      
}
</style>

3.14 span 标签设置 margin

当你为一个 <span> 标签设置 margin 时，你需要了解 <span> 是一个内联元素（inline element），并且内联元素对垂直边距（margin-top 和 margin-bottom）的响应与块级元素（block-level elements）或内联块级元素（inline-block elements）不同。

在大多数浏览器中，直接为内联元素设置垂直边距是无效的，因为内联元素不会在其前后产生换行，因此垂直边距没有视觉上的效果。然而，水平边距（margin-left 和 margin-right）对内联元素是有效的。

3.15 使用 link 和 @import 引用 CSS 的区别

在 HTML 文档中，可以通过 <link> 标签或 CSS 中的 @import 语句来引用外部样式表。

特性	`<link>`	@import
用法	在 HTML 文档的 `<head>` 部分使用	在 CSS 文件或 `<style>` 标签内使用
加载顺序	页面加载时立即加载样式表	在加载包含它的 CSS 文件后加载
浏览器支持	支持所有主流浏览器	支持 IE5+ 和所有现代浏览器
性能	加载并行进行，速度较快	加载顺序依赖，速度较慢
DOM 可操作性	可通过 JavaScript 操作和控制	不易通过 JavaScript 操作
样式权重	样式权重相同	样式权重相同
本质	HTML 标签	CSS 语法

3.16 为什么有时候用 translate 来改变位置而不是定位

在前端开发中，我们有时候会选择使用 translate 来改变元素的位置，而不是使用传统的定位方式（如 top、left、right、bottom），主要是因为性能方面的考虑。

具体来说，translate 是通过 CSS transforms 实现的，它操作的是元素的渲染层，而不是布局层。这样一来，浏览器就不会因为位置的改变而重新计算布局（reflow），从而提高渲染性能。

Reflow 与 Repaint：
- Reflow（重排）：是指浏览器在 DOM 发生变化时重新计算元素的位置和几何形状。当使用定位属性（如 top、left）改变元素位置时，就会触发 Reflow，这在页面复杂时会非常消耗性能。
- Repaint（重绘）：是指元素的外观发生变化（如背景颜色、边框等）时，需要重新绘制这些元素，但不涉及重新计算布局。Repaint 的开销相对较小。
Transform - Translate：
- translate 是 CSS Transform 属性的一部分，通过矩阵变换（matrix transformations）来操作元素的视觉位置。这个过程是在合成层（compositing layer）完成的，不会影响文档的布局结构，所以不会触发 Reflow，只会造成 Repaint。
硬件加速：
- 使用 translate 通常能够借助 GPU 加速，而传统的定位方式则主要依赖于 CPU。在渲染大量图形和动画时，GPU 的效率是显著优于 CPU 的，能带来更流畅的视觉效果。
性能优化的常见实践：
- 在涉及到动画和频繁调整位置的场景下，应该优先考虑使用 transform: translate，而不是 top 或 left。
- 合理利用 will-change 属性，告知浏览器即将发生的一些变化（如 transform 或 opacity），预先做一些优化处理，提高动画的流畅度。

3.17 margin 和 padding 的使用场景

margin 和 padding 是 CSS 中用来控制元素与其周围环境之间距离的两个重要属性。简单区别一下：

margin（外边距）用于控制元素与其他元素之间的距离，它是在元素的外部起作用。常用于创建元素之间的间隔。
padding（内边距）用于控制元素内容与其边框之间的距离，它是在元素的内部起作用。常用于增加元素内部的间距。

要更深入地理解 margin 和 padding，还有一些重要的补充点：
- 合并外边距（Margin Collapse）：相邻块级元素的垂直外边距在某些情况下会合并为一个。比如，两个相邻段落的上下 margin 会合并成取其最大值。有时这会导致布局问题，需要特别关注和处理。
- 负值 margin：Margin 属性是可以设负值的，它会直接影响到元素的位置。而这在 padding 中是不可用的。因此，负值 margin 适合用于一些特殊的布局需求，比如让某个元素向上或向左靠近另一个元素。
- 减少重绘和重排：对于性能优化来说，尽量避免频繁修改会引起重绘或重排的属性，如 margin 和 padding。这是因为浏览器在处理这些更改时需要重新计算布局和渲染画面。
margin 重叠问题：
- Margin 重叠问题是指，当两个垂直相邻的块级元素（block-level elements）之间的 margin 值发生重叠时，它们之间的实际间距不是两个 margin 的总和，而是取最大值。
- 解决 margin 重叠问题可以通过以下几种方法：
  - 使用 padding 来取代 margin。
  - 使用 border 将两个元素分开。
  - 利用 CSS 的 flexbox 或 grid 布局，避免块元素直接相邻。
  - 将父元素的 overflow 属性设置为 hidden 或 auto。
  - 设置父元素的 display 为 inline-block 或使用 clearfix 技巧。

3.18 ::before 和 :after 的双冒号和单冒号有什么区别

::before 和 :after 是 CSS 的伪元素，用于在元素的内容之前或之后插入额外的内容。

双冒号和单冒号的不同之处在于：

双冒号（::）是 CSS3 的语法。
单冒号（:）是 CSS2 中的旧语法。

浏览器出于向后兼容的原因，同时支持这两种语法。

3.19 伪元素和伪类的区别

CSS 伪元素和伪类都是用于修饰文档的特定部分，但它们的作用和应用场景有所不同。伪元素用于创建你不平常的标记，即增加文档里实际不存在的元素，常用于将样式应用到某个元素的一部分。而伪类则表示元素的某种状态，因而可以选择和样式化元素的特定状态。

伪元素（pseudo-elements）用来选中元素的某一部分内容，如第一个字母、第一个行，或者在内容之前或之后插入内容。典型的伪元素包括 ::before、::after、::first-letter 等。
伪类（pseudo-classes）用于选择元素的一种特定状态，如 :hover、:active、:nth-child 等。

3.20 元素之间的空白间隔

经常会碰到元素之间出现莫名其妙的间隔。这些间隔通常是由 HTML 中的空格字符（比如换行、空格、Tab 等）所引起的。

解决方案：

移除 HTML 中的空白字符。
使用负 margin 或 padding。
父元素的字号设为0。
使用 flexbox（flex 布局）。

3.21 实现单行、多行文本溢出隐藏

实现单行文本溢出隐藏可以通过使用 CSS 的 white-space、overflow、text-overflow 属性。具体代码如下：

css

.single-line-ellipsis {
  white-space: nowrap; /* 白空间不换行 */
  overflow: hidden;    /* 溢出的部分隐藏 */
  text-overflow: ellipsis; /* 溢出部分用三个点表示 */
}

如果要实现多行文本溢出隐藏，可以使用 -webkit-line-clamp CSS 属性，结合 display 和 webkit-box-orient 等属性。具体代码如下：

css

.multi-line-ellipsis {
  display: -webkit-box;         /* 弹性盒模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 2;        /* 限制最多显示两行 */
  overflow: hidden;             /* 溢出部分隐藏 */   
}

3.22 实现一个宽高自适应的正方形

要实现一个宽高自适应的正方形，最简单的方法是使用 padding-top 或 padding-bottom。因为在 CSS 中，padding 的百分比是相对于父元素的宽度来计算的。通过这种方法可以确保元素的宽高成比例，保持正方形的形状。下面是具体的示例代码：

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>
    .sq {
      width: 50%;
      padding-top: 50%; /* 保持宽高比为1:1 */
      background-color: red;
      position: relative;
    }

    .sq-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
  <div class="sq">
    <div class="sq-content">正方形内容</div>
  </div>
</body>
</html>

3.23 清除浮动

清除浮动主要是为了避免由于浮动元素脱离正常文档流而引发的布局问题。

当一个元素浮动时，它从普通文档流中脱离，常常会影响到其父元素和后续兄弟元素的显示效果。典型问题包括父元素无法包裹浮动元素的高度等。清除浮动是为了解决这些布局上的紊乱问题，确保页面布局按照预期运行。

清除浮动的方式有以下几种：

使用空的清除浮动元素（clearfix hack）。
使用伪元素 ::after 清除浮动。
使用 overflow 属性清除浮动。
使用 display: flow-root 清除浮动。

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

它的主要作用是阻止元素周围的浮动元素影响到它。具体来说，clear 属性定义了元素的哪些边不能与前面的浮动元素相邻。
举个例子，如果你有两个左浮动的元素，需要在第三个元素开始一个新的行，那么在第三个元素上使用 clear: left; 就可以达到效果。在这一行上，第三个元素的左侧就不会有任何浮动的元素。

4. CSS3 属性

4.1 CSS 中可继承与不可继承属性有哪些

可继承属性会从父元素传递给子元素，而不可继承属性则只应用于定义它们的元素。一般来说，可继承属性主要涉及文本和字体相关的属性，以及一些布局相关属性。

可继承属性：

color
font-family
font-size
font-style
font-variant
font-weight
letter-spacing
line-height
text-align
text-indent
text-transform
visibility
white-space
word-spacing

不可继承属性：

background
border
display
width
height
margin
padding
position
top, right, bottom, left
z-index
float
clear

4.2 pointer-events

在实际的业务场景下，你可以使用 pointer-events 属性来实现一些常见的交互需求。下面是一些使用 pointer-events 的示例：

阻止元素上的点击事件：如果你有一个遮罩层或禁用状态的元素，你可以将其 pointer-events 属性设置为 none，这样它将无法接收鼠标点击事件。这在避免误操作或阻止与特定元素的交互时很有用。

css

.mask {
  pointer-events: none;
}

创建一个可点击但透明的元素：有时你可能想要创建一个看似透明的区域，但仍然希望它能接收鼠标事件。你可以将元素的背景设置为透明，并将 pointer-events 属性设置为 auto 或 visible。

css

.transparent-element {
  background: transparent;
  pointer-events: auto; /* 或 pointer-events: visible; */
}

穿透事件到下层元素：如果你有一个位于其他元素上方的浮动层，并且希望鼠标事件能够透过该浮动层传递到下方的元素上，你可以将浮动层的 pointer-events 属性设置为 none。这样，鼠标事件将直接传递到位于浮动层下方的其他元素上，而不会被浮动层所阻挡。

css

.float-layer {
  pointer-events: none;
}

4.3 filter

filter: grayscale(100%); 是一条 CSS 样式规则，用于将元素转换为完全灰度（黑白）效果。

解释：filter 是 CSS 的滤镜属性，用于对元素应用视觉效果；grayscale() 是滤镜函数之一，用于将元素转换为灰度；100% 是 grayscale() 函数的参数，表示将元素转换为完全灰度，即黑白效果。

定义：filter-function、filter。

多数平台参数都是0.95 - filter: grayscale(0.95); ，跟别人设置一样准没错。

4.4 z-index

z-index 是 CSS 中的一个属性，用于控制元素在页面上的层叠顺序。

含义：z-index 属性指定了元素及其子元素的 z 顺序，这个 z 顺序决定了当元素发生覆盖时，哪个元素会显示在最上层。通常，一个具有较大 z-index 值的元素会覆盖 z-index 值较小的元素。
定位要求：z-index 仅在包含定位的元素时起作用（例如 position: absolute、position: relative、position: fixed 或 position: sticky）且 z-index 不为 auto。如果元素没有设置定位属性，那么 z-index 将无效。
属性值：z-index 属性可以接受以下几种类型的值：
- auto：默认值，表示元素不创建新的层叠上下文，其层叠顺序由其在文档流中的位置决定。
- 整数：可以是正整数或负整数。正整数表示元素位于其父元素或兄弟元素的前面；负整数表示元素位于其父元素或兄弟元素的后面。
- inherit：表示元素继承其父元素的z-index值。
z-index 属性会在以下情况下失效：
- 元素的定位方式不是 position: absolute、position: relative、position: fixed 或 position: sticky。
- z-index 值设置为 auto 值。
- 元素不在同一个层叠上下文中。

4.5 transition 和 animation 的区别

CSS 中 transition 和 animation 都用于在元素样式改变时实现平滑过渡，但它们有一些关键区别：

transition 是用于定义元素属性变化时的过渡效果。它需要触发某个事件（如鼠标悬停、点击等）来启动。简单来说，transition 只能在两个状态之间转换，并且需要一个触发条件。
animation 提供了更多的控制选项，它允许我们定义关键帧（keyframes），并且可以在复数个状态之间进行变化。animation 可以在页面加载时自动开始运行，不需要特定的触发事件。

4.6 line-height

line-height 是 CSS 中一个很重要的属性，它主要用于控制行高，也就是多行文本之间的垂直间距。这个属性对文本的可读性和布局有很大影响。line-height 的主要作用是定义行与行之间的距离，它不仅影响文本的垂直空间，还能间接作用于元素的高度计算。

常见的 line-height 赋值方式有：

数字值：例如 line-height: 1.5，这种方式是一个无单位的乘数，会根据字体大小计算实际的行高。（相比于百分比，更推荐使用数字值）
百分比：例如 line-height: 150%，这种方式以当前字体大小为基准，设置的百分比值作为行高。
长度值：例如 line-height: 20px，直接使用具体的长度单位来设置行高。
关键字：常见的关键字有 normal，浏览器会根据默认算法来计算行高，一般接近1.2到1.4倍的字体大小。

4.7 transform

CSS3 中的 transform 属性主要包含以下几个子属性：

translate：用于移动元素的位置。
scale：用于缩放元素的尺寸。
rotate：用于旋转元素。
skew：用于扭曲元素。
matrix：结合以上多个功能综合变换元素。

4.8 position: absolute 和 fixed 的共同点和区别

共同点：

CSS 中 position: absolute 和 position: fixed 都是用来定位元素的一种方式。
它们都会使元素脱离文档流，从而不占据原有位置并允许你通过其他属性（例如 top、right、bottom、left）来进行精确定位。

区别：

定位参考点不同：
- position: absolute：参考点是离它最近的有定位设置（即非 static）的父级元素。如果没有找到这样的父级元素，则以整个文档（即 <html> 元素）为参考点。
- position: fixed：始终以浏览器窗口（viewport）为参考点，无论滚动页面还是其它情况。
滚动行为不同：
- position: absolute：元素随着页面内容滚动，而保持在相对位置不变。
- position: fixed：元素固定在浏览器窗口中的位置，页面滚动时也不会改变。

4.9 clip-path

顾名思义，『剪裁』，它可以按照 svg 路径、盒子模型、基本多边形路径等几种不同的方式来裁切。clip-path 有几大类，分别为：

basic-shape：基本图形，包括 inset()、circle()、ellipse()、polygon()。
clip-source：通过 url() 方法引用一段 SVG 的 <clipPath> 来作为剪裁路径。
geometry-box：单独使用时，将指定框的边缘作为剪裁路径，或者配合 basic-shape 使用，用于定义剪裁的参考框（Reference Box）（由于该属性浏览器支持度比较低，暂不讨论）。

5. HTML5_CSS3 拓展知识

5.1 Canvas 和 SVG 的区别

Canvas 和 SVG 都是用于在网页上绘制图形的技术，但它们在实现方式、性能和使用场景上有明显的区别。Canvas 是基于像素的即时绘制技术，适合频繁更新和复杂动画，而 SVG 是基于矢量的图形格式，适合需要无损缩放和高分辨率的静态图形。

渲染方式：
- Canvas：逐像素渲染，适合实时动态绘制。
- SVG：基于矢量描述，适合静态和简单的动态绘制。
性能：
- Canvas：高性能，适合频繁更新的图形和复杂动画。
- SVG：在处理复杂图形时，性能可能会下降。
交互和 DOM 集成：
- Canvas：不具备内置的 DOM 交互，需要额外的事件处理代码。
- SVG：每个图形元素都是 DOM 节点，天然支持交互和事件处理。
使用场景：
- Canvas：游戏开发、实时数据可视化、复杂动画。
- SVG：图标、标志、图表、需要高分辨率和可缩放性的图形。

5.2 元素替换概念

CSS中的元素替换概念是指一种特殊的元素分类方式，主要用于区分元素内容的展示方式。在CSS中，根据元素内容的展现方式，我们可以将元素分为替换元素和非替换元素。

替换元素是指在CSS中，元素的内容不是由CSS所控制的，而是由外部资源来决定的。

替换元素：

定义：替换元素是指元素内容的展现不是由CSS直接控制的，而是外观渲染独立于CSS的外部对象。浏览器根据元素的标签和属性来决定元素的具体显示内容。
特性：
- 替换元素的内容可以被改变，通常通过修改元素的某个属性值来实现，如<img>的src属性或<input>的type属性。
- 替换元素可以具有固有尺寸、HTML尺寸和CSS尺寸。尺寸设置时，权重关系为CSS尺寸>HTML尺寸>固有尺寸。
- 替换元素的尺寸通常由内部元素决定，但也可以通过CSS手动更改设置。
- 替换元素可以撑开行框，但是不影响行高。它们的垂直方向属性（如margin、border、padding）可以撑开行框。
常见替换元素：<img>、<input>、<textarea>、<video>、<object>、<iframe>等。

非替换元素：

定义：非替换元素是指那些直接将内容展现给用户的元素，其内容的展现由CSS直接控制。
特性：非替换元素的内容在HTML代码中直接可见，如文本、标题等。
常见非替换元素：<h1>、<p>、<div>、<span>等。

总结：替换元素和非替换元素的主要区别在于它们的内容展现方式。替换元素的内容由浏览器根据元素的标签和属性决定，而非替换元素的内容则直接由CSS控制。在样式设计和布局时，理解这两种元素的区别有助于更好地应用CSS规则，实现所需的视觉效果。

5.3 物理像素，逻辑像素和像素密度

物理像素（Physical Pixel）：是设备屏幕上实际存在的最小显示单元。这是硬件层面上屏幕实际的物理点。现代设备通常拥有非常高的物理像素密度，比如 iPhones，尤其是带 Retina 显示屏的设备。
逻辑像素（Logical Pixel）：也叫设备独立像素（Device Independent Pixel，DIP），这是开发和设计时使用的抽象单位，它与物理像素的比例由设备设置决定。例如，iPhone上的逻辑像素与物理像素比例可能是1:2或1:3。
像素密度（Pixel Density）：是每英寸拥有的物理像素数，通常用PPI（Pixels Per Inch）表示。像素密度越高，显示效果越细腻。

在移动端开发中使用 @3x, @2x 这种图片，是为了适应不同设备的屏幕分辨率和像素密度，确保在高像素密度的设备上，图片显示依然清晰而不会模糊。@2x 和 @3x 是对像素密度为2倍和3倍的设备提供的高分辨率图片资源。

5.4 响应式设计

响应式设计（Responsive Design）是一种网页设计方法，它使网页能够在各种设备和窗口或屏幕尺寸上良好地显示和操作。

核心目标是提供良好的用户体验，不论用户使用的是 PC、平板还是手机。响应式设计的基本原理是通过使用灵活的网格布局、可调整的图像和媒体查询，根据设备的特征自动调整网页的布局。这里主要有几个关键点：

灵活的网格布局：使用百分比而不是固定的像素来定义页面元素的宽度。
可调整的图像：根据设备窗口大小动态调整图像尺寸，避免溢出或失真。
媒体查询：CSS3 提供的功能，根据不同的屏幕尺寸和设备类型应用不同的样式规则以适应不同的显示环境。

5.5 CSS Sprites

CSS Sprites（雪碧图）是一种网页性能优化的技术。其核心思想是将多个小图标合并到一张大图中，通过 CSS 来控制显示具体的图标部分。这种技术能够有效减少 HTTP 请求次数，从而提高页面加载速度。

关键点总结如下：
- 减少 HTTP 请求：每次加载一个图像都会发起一次 HTTP 请求，合并图像后只需一次请求，就能获取所需的所有图像。
- 节省带宽：由于多个图像合并为一个文件，服务器和客户端之间传输的数据包数更少，减少了服务器的开销和客户端解析图像的时间。
- 改善用户体验：页面加载速度更快，可提升用户体验，尤其是在网络条件不佳的情况下。
实现方式：
- 需要一张包含多个小图标的大图，以及对应的 CSS 样式。每个图标通过调整 background-position 属性来显示其在大图中的正确位置。
适用场景：
- 合适使用 CSS Sprites 的场景通常是较多的小图标被频繁使用的地方，例如导航栏、按钮等。但是对于大图或者背景图，使用 CSS Sprites 并不合适。而且过于复杂的雪碧图可能会导致维护和更新的成本增加。
常见问题：
- 图片位置偏移：由于 background-position 属性的精度非常重要，稍有偏差便可能导致图像显示错误，因此在生成雪碧图时，要格外注意位置的准确性。
- 图像内容更新频繁：如果某些图标需要频繁更新，那么每次都要更新整个雪碧图，这会导致维护成本较高。

5.6 CSS 布局单位

在 CSS 中，我们常用的布局单位可以分为两类：一种是绝对单位，如 px（像素），另一种是相对单位，如 em、rem、%、vw、vh 等。以下是一些常见的布局单位：

px（像素）：这种单位是最常见的绝对单位。它表示屏幕上独立的像素点，在不同的设备和屏幕分辨率下，px 的表现一般是一致的。
em：这种单位是相对单位，表示当前元素字体大小的倍数。比如，若一个元素的字体大小为 16px，则 2em 就等于 32px。
rem：rem 也是一种相对单位，但是它是相对于根元素（html 元素）的字体大小。
%（百分比）：百分比单位是一个相对单位，其大小是相对其父元素的大小。比如，宽度设置为 50%，那么其宽度将是父元素宽度的一半。
vw（视窗宽度）：这种单位是相对于视口宽度的百分比。1vw 表示视口宽度的 1%。
vh（视窗高度）：这种单位是相对于视口高度的百分比。1vh 表示视口高度的 1%。
vmin 和 vmax：这两个单位与视窗尺寸有关。vmin 是视口宽度和高度中较小的那个的百分比，而 vmax 是视口宽度和高度中较大的那个的百分比。

绝对单位 vs 相对单位：在布局固定尺寸的元素时，绝对单位（如 px）很有用。但如果我们想实现响应式设计，相对单位（如 %、em、rem、vw）则更为重要。

5.7 CSS 预处理器 / 后处理器

CSS 预处理器和后处理器是用于提升 CSS 编写和管理效率的工具。

CSS 预处理器如 Sass、Less 可提供变量、嵌套、混合等高级功能来编写更具结构性和模块化的 CSS 代码。
CSS 后处理器如 PostCSS 则侧重于通过插件机制自动优化和增强 CSS，例如自动添加浏览器前缀等。这些工具的使用可以使 CSS 代码更简洁、易维护，同时提升开发效率和项目的可扩展性。

5.8 CSS 工程化

CSS 工程化，顾名思义就是将 CSS 开发过程中的相关问题，从工程角度去解决，使得 CSS 开发更符合工程化的标准、更高效。核心目的就是提高开发效率、维护性和可扩展性。在实际使用中，通常会用到以下几个技术和方法：

模块化：将 CSS 按照模块拆分，比如使用 BEM（Block Element Modifier）命名法，或采用 Sass、LESS 等预处理器来实现模块化开发。
规范化：制定和遵守 CSS 编码规范，保持代码风格一致，便于团队协作和代码审查。
组件化：通过 CSS-in-JS 或者 CSS Modules 等技术手段，将样式与组件的逻辑更紧密地结合，便于维护和复用。
自动化工具：使用工具如 Webpack、Gulp 进行资源打包、自动化构建，减少人为错误，提升工作效率。
预处理器和后处理器：预处理器（如 Sass、LESS）可以让 CSS 具备编程语言的一些特性，而后处理器（如 PostCSS）可以对生成的 CSS 进行优化和处理。

5.9 如何检测 CSS 动画的 FPS 值

检测 CSS 动画的 FPS（帧率）值，即每秒呈现的帧数，可以通过 JavaScript 与 requestAnimationFrame 方法配合相应的时间计算来实现。基本思路是每帧动画时记录当前时间，并通过时间差计算帧率。核心代码如下：

javascript

let lastTime = performance.now();
let frameCount = 0;

function measureFPS() {
  let currentTime = performance.now();
  frameCount++;
    
  if (currentTime - lastTime >= 1000) {  // 每秒统计一次
    let fps = frameCount;
    console.log(`FPS: ${fps}`);
    frameCount = 0;
    lastTime = currentTime;
  }
    
  requestAnimationFrame(measureFPS);
}

requestAnimationFrame(measureFPS);

这个代码实现了一个实时的 FPS 监测，每秒钟计算一次 FPS 并打印到控制台。

面试题[HTML5_CSS3] ​

1. 新特性 ​

1.1 HTML5 新特性 ​

1.2 CSS3 新特性 ​

2. HTML5 ​

2.1 HTML 代码第一行的作用 ​

2.2 HTML 语义化 ​

2.3 HTML 行内元素、块级元素、空（void）元素 ​

2.4 HTML5 离线储存 ​

2.5 head 标签 ​

2.6 meta 标签 ​

2.7 src 和 href 的区别 ​

2.8 script 标签中 defer 和 async 的区别 ​

2.9 img 标签 srcset 属性 ​

2.10 title 和 h1 标签的区别 ​

2.11 b 和 strong 标签的区别 ​

2.12 i 和 em 标签的区别 ​

2.13 iframe 有哪些优点和缺点 ​

2.14 label 标签的作用是什么 ​

3. CSS3 ​

3.1 BFC ​

3.2 Flex 布局 ​

3.3 CSS Hack ​

3.4 CSS 盒子模型 ​

3.5 CSS 选择器及优先级 ​

3.6 媒体查询 ​

3.7 隐藏元素 ​

3.8 层叠上下文与层叠顺序 ​

3.9 水平垂直居中实现方案 ​

3.10 画一条 0.5px 的线 ​

3.11 移动端 1px 问题 ​

3.12 如何给网页设置小于 12px 的字体 ​

3.13 动态修改伪元素样式 ​

3.14 span 标签设置 margin ​

3.15 使用 link 和 @import 引用 CSS 的区别 ​

3.16 为什么有时候用 translate 来改变位置而不是定位 ​

3.17 margin 和 padding 的使用场景 ​

3.18 ::before 和 :after 的双冒号和单冒号有什么区别 ​

3.19 伪元素和伪类的区别 ​

3.20 元素之间的空白间隔 ​

3.21 实现单行、多行文本溢出隐藏 ​

3.22 实现一个宽高自适应的正方形 ​

3.23 清除浮动 ​

4. CSS3 属性 ​

4.1 CSS 中可继承与不可继承属性有哪些 ​

4.2 pointer-events ​

4.3 filter ​

4.4 z-index ​

4.5 transition 和 animation 的区别 ​

4.6 line-height ​

4.7 transform ​

4.8 position: absolute 和 fixed 的共同点和区别 ​

4.9 clip-path ​

5. HTML5_CSS3 拓展知识 ​

5.1 Canvas 和 SVG 的区别 ​

5.2 元素替换概念 ​

5.3 物理像素，逻辑像素和像素密度 ​

5.4 响应式设计 ​

5.5 CSS Sprites ​

5.6 CSS 布局单位 ​

5.7 CSS 预处理器 / 后处理器 ​

5.8 CSS 工程化 ​

5.9 如何检测 CSS 动画的 FPS 值 ​

面试题[HTML5_CSS3]

1. 新特性

1.1 HTML5 新特性

1.2 CSS3 新特性

2. HTML5

2.1 HTML 代码第一行的作用

2.2 HTML 语义化

2.3 HTML 行内元素、块级元素、空（void）元素

2.4 HTML5 离线储存

2.5 head 标签

2.6 meta 标签

2.7 src 和 href 的区别

2.8 script 标签中 defer 和 async 的区别

2.9 img 标签 srcset 属性

2.10 title 和 h1 标签的区别

2.11 b 和 strong 标签的区别

2.12 i 和 em 标签的区别

2.13 iframe 有哪些优点和缺点

2.14 label 标签的作用是什么

3. CSS3

3.1 BFC

3.2 Flex 布局

3.3 CSS Hack

3.4 CSS 盒子模型

3.5 CSS 选择器及优先级

3.6 媒体查询

3.7 隐藏元素

3.8 层叠上下文与层叠顺序

3.9 水平垂直居中实现方案

3.10 画一条 0.5px 的线

3.11 移动端 1px 问题

3.12 如何给网页设置小于 12px 的字体

3.13 动态修改伪元素样式

3.14 span 标签设置 margin

3.15 使用 link 和 @import 引用 CSS 的区别

3.16 为什么有时候用 translate 来改变位置而不是定位

3.17 margin 和 padding 的使用场景

3.18 ::before 和 :after 的双冒号和单冒号有什么区别

3.19 伪元素和伪类的区别

3.20 元素之间的空白间隔

3.21 实现单行、多行文本溢出隐藏

3.22 实现一个宽高自适应的正方形

3.23 清除浮动

4. CSS3 属性

4.1 CSS 中可继承与不可继承属性有哪些

4.2 pointer-events

4.3 filter

4.4 z-index

4.5 transition 和 animation 的区别

4.6 line-height

4.7 transform

4.8 position: absolute 和 fixed 的共同点和区别

4.9 clip-path

5. HTML5_CSS3 拓展知识

5.1 Canvas 和 SVG 的区别

5.2 元素替换概念

5.3 物理像素，逻辑像素和像素密度

5.4 响应式设计

5.5 CSS Sprites

5.6 CSS 布局单位

5.7 CSS 预处理器 / 后处理器

5.8 CSS 工程化

5.9 如何检测 CSS 动画的 FPS 值