面试题[HTML5_CSS3]

1. HTML5、CSS3 新增特性

2. HTML5

2.1 HTML 代码第一行的作用

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

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

html

<!DOCTYPE html>

2.2 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">

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 布局规则进行定位和对齐。容器内的每个元素都成为项目。
主轴（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 布局适配问题

rem、em、px、%、vw、vh...

3.4 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.5 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.6 CSS 选择器及其优先级

3.7 媒体查询

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 z-index

3.10 水平垂直居中实现方案

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.11 隐藏元素

css

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

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

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

3.12 画一条 0.5px 的线

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

css

transform: scale(0.5, 0.5);

采用 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" />

3.13 移动端 1px 问题

3.14 动态修改伪元素样式

需求：伪元素高度使用 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.15 span 标签设置 margin

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

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

3.16 元素替换概念

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规则，实现所需的视觉效果。

4. CSS 属性

4.1 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.2 filter

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

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

定义：filter-function、filter。

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

面试题[HTML5_CSS3] ​

1. HTML5、CSS3 新增特性 ​

2. HTML5 ​

2.1 HTML 代码第一行的作用 ​

2.2 meta 标签 ​

3. CSS3 ​

3.1 BFC ​

3.2 Flex 布局 ​

3.3 布局适配问题 ​

3.4 CSS Hack ​

3.5 CSS 盒子模型 ​

3.6 CSS 选择器及其优先级 ​

3.7 媒体查询 ​

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

3.9 z-index ​

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

3.11 隐藏元素 ​

3.12 画一条 0.5px 的线 ​

3.13 移动端 1px 问题 ​

3.14 动态修改伪元素样式 ​

3.15 span 标签设置 margin ​

3.16 元素替换概念 ​

4. CSS 属性 ​

4.1 pointer-events ​

4.2 filter ​

面试题[HTML5_CSS3]

1. HTML5、CSS3 新增特性

2. HTML5

2.1 HTML 代码第一行的作用

2.2 meta 标签

3. CSS3

3.1 BFC

3.2 Flex 布局

3.3 布局适配问题

3.4 CSS Hack

3.5 CSS 盒子模型

3.6 CSS 选择器及其优先级

3.7 媒体查询

3.8 层叠上下文与层叠顺序

3.9 z-index

3.10 水平垂直居中实现方案

3.11 隐藏元素

3.12 画一条 0.5px 的线

3.13 移动端 1px 问题

3.14 动态修改伪元素样式

3.15 span 标签设置 margin

3.16 元素替换概念

4. CSS 属性

4.1 pointer-events

4.2 filter