20个CSS最新热点面试题，包含超详细答案与超全解析

最新推荐文章于 2024-06-14 14:36:26 发布

man2017

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量585

点赞数 13

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/man2017/article/details/138090424

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下是一份包含20个前端面试经典最新热点CSS面试题及其答案与详细解析的列表：

**问题：**请解释CSS盒模型，并说明两种不同类型的盒模型。

**答案：**CSS盒模型描述了元素在页面布局中的表现方式。它由内容（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。有两种类型的盒模型：
- **标准盒模型（W3C盒模型）：**宽度和高度只包括内容区域，不计算内边距和边框。若设置width: 200px; padding: 20px; border: 1px solid black;，实际元素占据的空间为200px + 2 * 20px + 2 * 1px = 242px。
- **IE盒模型（怪异盒模型）：**宽度和高度同时包括内容、内边距和边框。同样的样式设置下，实际元素占据空间仍为200px。若要得到标准盒模型的效果，需要设置box-sizing: content-box;（默认值），对于IE盒模型，应设为box-sizing: border-box;。
**问题：**简述Flexbox布局及其主要特性。

**答案：**Flexbox（Flexible Box）是一种现代布局模式，用于处理一维（行或列）布局，尤其适用于复杂、响应式的布局。其主要特性包括：
- **灵活的对齐与方向：**可以轻松调整子元素在主轴（flex-direction决定）上的排列顺序、对齐方式（justify-content）和交叉轴上的对齐方式（align-items）。
- **自动填充与拉伸：**通过flex-grow, flex-shrink, 和 flex-basis属性控制子元素在剩余空间中如何分配、收缩及初始尺寸。
- **排序与顺序：**使用order属性改变元素的视觉顺序，不受DOM结构限制。
- 包裹与换行：flex-wrap属性控制当一行空间不足时是否换行或自动调整子元素大小以适应容器。
**问题：**请解释CSS Grid布局及其应用场景。

**答案：**CSS Grid是二维布局系统，能够创建复杂的、响应式的网页布局。其主要特性包括：
- **定义行与列：**通过grid-template-columns和grid-template-rows定义网格的行数与列数，支持多种单位和模板语法（如fr、auto-fit、repeat()等）。
- **定位项目：**使用grid-column和grid-row或grid-area指定元素在网格中的位置。
- **自动布局与对齐：**提供grid-auto-flow、justify-items、align-items等属性进行自动填充、对齐和跨行/跨列布局。
- **命名区域与模板区域：**通过grid-template-areas定义模板区域，并用grid-area将元素放置到特定区域。
应用场景包括但不限于：多栏布局、复杂网格布局、响应式设计、卡片布局等。
**问题：**简述CSS选择器的种类及其优先级规则。

**答案：**CSS选择器主要有以下种类：
- **元素选择器：**直接匹配HTML元素，如div、p等。
- **类选择器：**匹配类名，如.myClass。
- **ID选择器：**匹配ID属性，如#myId。
- **属性选择器：**根据元素的属性及属性值选择，如 [type="text"]。
- **伪类选择器：**匹配元素的特定状态，如:hover、:focus等。
- **伪元素选择器：**用于插入生成的内容，如::before、::after。
- **组合选择器：**如后代选择器（A B）、子代选择器（A > B）、相邻兄弟选择器（A + B）、一般兄弟选择器（A ~ B）等。
优先级规则（从高到低）：
1. 内联样式（style属性）
2. ID选择器（#id）
3. 类选择器（.class）、属性选择器（[attr]）、伪类（:pseudo-class）
4. 元素选择器（element）、伪元素（::pseudo-element）
同级优先级相同的选择器，后者会覆盖前者。多个选择器组成的复合选择器，其优先级按最右侧一个选择器计算。
**问题：**什么是CSS预处理器？列举并简述Sass、Less和Stylus的特点。

**答案：**CSS预处理器是一种工具，提供了变量、嵌套、混合、函数等高级功能，将源码编译成常规CSS。它们有助于提高代码可维护性、模块化和扩展性。以下是Sass、Less和Stylus的特点：
- **Sass (SCSS)：**基于Ruby，语法严谨，支持变量、嵌套、混合、继承、函数、运算符、导入等。有.sass（缩进语法）和.scss（CSS-like语法）两种格式。
- **Less：**基于JavaScript，学习曲线平缓，与CSS语法高度兼容，支持变量、嵌套、混合、运算、函数、命名空间等。可以直接在浏览器中运行（使用Less.js）。
- **Stylus：**基于Node.js，语法极其灵活，无需括号和分号，支持变量、嵌套、混合、函数、运算、条件语句、循环等。拥有丰富的插件生态系统。
**问题：**请解释BEM（Block Element Modifier）命名方法及其优点。

**答案：**BEM（Block Element Modifier）是一种CSS类名命名约定，旨在提高代码的可读性和可维护性。其基本概念如下：
- **Block（块）：**代表独立的、有意义的组件或区域，如navbar、card等。
- **Element（元素）：**块内的组成部分，依赖于块存在，通过双下划线连接，如navbar__item、card__image。
- **Modifier（修饰符）：**表示块或元素的不同状态、样式或版本，通过双短横线连接，如navbar--fixed、card__image--large。
优点：
- **明确的命名约定：**提高代码可读性，开发者能快速理解类名含义和组件结构。
- **避免样式冲突：**由于类名具有良好的上下文关联性，减少了全局命名空间的污染。
- **易于重用与扩展：**每个块都是独立的，便于在项目中复用和修改。
- **易于维护：**清晰的结构使得样式更改、调试和重构更为简单。
**问题：**请解释CSS specificity（特异性）并举例说明。

**答案：**CSS specificity是指浏览器确定应用哪个CSS声明的算法，当多个选择器匹配同一个元素且有冲突的样式声明时，特异性较高的选择器将胜出。特异性由四个部分组成（从左到右优先级递增）：
- 行内样式（1,0,0,0）
- ID选择器（0,1,0,0）
- 类选择器、属性选择器、伪类（0,0,1,0）
- 元素选择器、伪元素（0,0,0,1）
每种类型的计数器之间无关联，仅在同类型中累加。例如：
```
/* 特异性：0,0,8,0 */
.myClass.myClass.myClass.myClass {
  color: red;
}

/* 特异性：0,9,0,0 */
#myId #myId #myId #myId {
  color: blue;
}

/* 特异性：0,0,½,1 */
div span:hover {
  color: green;
}
```
在HTML中同时应用这些样式：
```
<div id="myId" class="myClass">
  <span>Text</span>
</div>
```
文本颜色将是绿色，因为div span:hover（0,0,½,1）的特异性高于其他两个选择器。
**问题：**如何实现响应式设计？列举几种方法。

**答案：**响应式设计旨在使网站在不同设备和视口尺寸下都能良好显示。实现方法包括：
- **媒体查询（Media Queries）：**根据设备特征（如视口宽度、设备像素比等）应用不同的CSS样式。例如：
```
@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}
```
- **流式布局（Fluid Layout）：-
  **流式布局（Fluid Layout）：**使用百分比、viewport相对单位（如vw、vh、vmin、vmax）替代固定单位（如px）定义元素尺寸，确保元素随视口尺寸变化而自适应。
```
.container {
  width: 80%; /* 或者使用 vw 单位 */
  max-width: 1200px; /* 可设置最大宽度以防止过大屏幕下内容过宽 */
}
```
- **弹性布局（Flexbox）：**通过设置父元素为display: flex，子元素可以自动调整其尺寸和顺序以适应不同屏幕尺寸。结合flex-wrap、flex-direction、justify-content、align-items等属性实现灵活布局。
```
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
```
- **Grid布局（CSS Grid）：**利用display: grid创建二维网格系统，通过定义行和列、使用fr单位、设置auto-fill或auto-fit、调整grid-gap等，创建响应式网格布局。
```
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}
```
- **响应式图片与媒体：**使用img { max-width: 100%; height: auto; }保证图片在不超过其容器宽度的前提下自适应。对于背景图片，可以结合媒体查询设置不同尺寸下的背景图或背景尺寸。
```
.responsive-image {
  background-image: url('image.jpg');
  background-size: cover; /* 或 contain */
}
```
- **移动优先（Mobile-First）或桌面优先（Desktop-First）策略：**从最小屏幕尺寸开始编写样式，逐渐添加针对更大屏幕的媒体查询（移动优先）。反之，先编写大屏幕样式，再使用媒体查询为小屏幕设备重写样式（桌面优先）。
**问题：**请解释CSS position 属性的值及其作用。

答案：position属性定义了元素的定位方式，有以下值：
- static（默认）：元素遵循正常的文档流布局，top, right, bottom, left属性无效。
- relative：相对于元素在正常文档流中的位置进行定位。元素保持其在流中的空间（即其他元素不会填补其原始位置）。通过top, right, bottom, left设置偏移量。
```
.relative {
  position: relative;
  left: 20px;
  top: 10px;
}
```
- absolute：相对于最近的非static定位祖先元素进行定位。如果找不到这样的祖先，则相对于根元素（<html>）。元素脱离正常文档流，其他元素不再考虑其占据的空间。使用top, right, bottom, left设置绝对位置。
```
.absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
```
- fixed：相对于浏览器视口进行定位，即使滚动页面，元素位置始终保持不变。同样脱离文档流，使用top, right, bottom, left设置固定位置。
```
.fixed {
  position: fixed;
  bottom: 20px;
  right: 30px;
}
```
- sticky：结合了相对定位和固定定位。元素在屏幕滚动超过其在正常流中的某个阈值（如top、bottom等）时变为固定定位，否则按照正常文档流布局。
```
.sticky {
  position: sticky;
  top: 0; /* 当距离顶部为0时开始固定 */
}
```
**问题：**简述CSS动画与过渡的区别与适用场景。

答案：
- CSS 过渡（Transitions）：应用于元素从一种样式逐渐改变为另一种样式的中间过程，通常触发于某些状态改变（如鼠标悬停、获取焦点等）。过渡效果由transition属性或其子属性（transition-property, transition-duration, transition-timing-function, transition-delay）定义。过渡适用于简单的单向、一次性动画效果，如按钮颜色变化、滑动展开/收起等。
```
.button {
  background-color: lightblue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}
```
- CSS 动画（Animations）：通过@keyframes规则定义动画的完整序列，包括起点样式、终点样式以及中间关键帧。然后通过animation属性或其子属性（animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state）应用动画到元素上。动画适用于更复杂、多阶段、可循环的动画效果，如加载动画、滑动菜单动画、轮播图等。
```
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.animated-element {
  animation: slideInFromLeft 1s ease-in-out forwards;
}
```
**问题：**如何实现CSS垂直居中？

**答案：**实现CSS垂直居中的方法有多种，取决于具体的布局和需求。以下是一些常见方法：
- **使用 Flexbox：**设置父元素为display: flex，使用align-items: center实现垂直居中。
```
.parent {
  display: flex;
  align-items: center;
}
```
- **使用 Grid：**设置父元素为display: grid，使用align-items: center实现垂直居中。
```
.parent {
  display: grid;
  align-items: center;
}
```
- **绝对定位与负外边距：**适用于已知高度的元素。设置元素为position: absolute，同时设置top: 50%，然后通过负外边距调整元素上边缘至父元素中心。
```
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
```
- **使用line-height：**对于单行文本，设置元素的line-height等于其父元素的高度。
```
.parent {
  height: 200px;
}

.child {
  line-height: 200px;
}
```
- **使用display: table-cell与vertical-align：**将父元素设置为display: table-cell，子元素设置vertical-align: middle。
```
.parent {
  display: table-cell;
  vertical-align: middle;
}
```
根据实际情况选择合适的方法。
**问题：**简述CSS Variables（自定义属性）的作用与使用方法。

**答案：**CSS Variables（自定义属性，也称CSS Variables或CSS Custom Properties）允许在CSS中定义和使用可复用的变量，增强代码的可维护性和灵活性。其作用与使用方法如下：

作用：
- **代码复用与统一管理：**通过变量集中定义和管理颜色、字体、间距等样式，一处修改，全局生效。
- **动态性与主题切换：**在JavaScript中修改变量值，实现动态样式更新或轻松切换主题。
- **结构与样式分离的增强：**虽然仍遵循结构与样式分离原则，但变量使得样式更具逻辑性，有助于组织复杂样式。
使用方法：
1. **定义变量：**在:root伪类（代表文档根元素，通常为html）或其他选择器中使用--var-name语法定义变量，并赋予相应的值。
```
:root {
  --primary-color: #1a1a1a;
  --font-size-large: 2rem;
}
```
2. **使用变量：**在样式声明中，通过var(--var-name)引用已定义的变量。
```
h1 {
  color: var(--primary-color);
  font-size: var(--font-size-large);
}
```
3. **变量 fallback 值：**可以为var()函数提供第二个参数作为回退值，当变量未定义或值无效时使用。
```
h1 {
  color: var(--custom-heading-color, #333); /* 如果 --custom-heading-color 未定义或无效，则使用 #333 */
```
**问题：**如何理解CSS盒模型？请描述两种不同的盒模型及其差异。

答案：

CSS盒模型描述了元素在网页布局中所占空间的计算方式，它包括元素的内容区（content）、内边距（padding）、边框（border）和外边距（margin）。根据边框是否包含在元素总宽度和总高度内，有两种不同的盒模型：
- **标准盒模型（W3C Box Model）：**这是默认的盒模型。元素的总宽度和总高度由以下几个部分组成：
  - width / height：仅指内容区的宽度和高度。
  - padding：内边距扩展了内容区，增加了元素内部的空间。
  - border：边框围绕在内容区和内边距之外，增加了元素的可见大小。
  - margin：外边距在边框之外，不影响元素的总宽度和总高度，但影响与其他元素的间距。
  因此，给一个元素设定固定的width值时，实际占用的总宽度为：
```
总宽度 = width + padding-left + padding-right + border-left-width + border-right-width
```
- **怪异盒模型（IE Box Model，又称Quirks Mode盒模型）：**在某些旧版浏览器（如早期的Internet Explorer）中默认采用，或者在特定的DOCTYPE声明下触发。在这种盒模型中，元素的width和height属性包括内容区、内边距和边框的总和，不包括外边距。
  
  给一个元素设定固定的width值时，实际占用的总宽度为：
```
总宽度 = width（已包含内容区、内边距和边框）
```
差异：
- 标准盒模型中，width和height只描述内容区大小，元素的实际总尺寸还包括内边距和边框。
- 怪异盒模型中，width和height直接指定了元素内容区、内边距和边框的总尺寸，不包括外边距。
开发时应明确指定盒模型类型以避免浏览器间的样式差异。可以使用CSS属性box-sizing来指定：
```
/* 设置为标准盒模型（默认） */
box-sizing: content-box;

/* 设置为怪异盒模型 */
box-sizing: border-box;
```
**问题：**什么是CSS选择器？列举并简要说明五种常见的CSS选择器。

答案：

CSS选择器用于在HTML文档中定位需要应用样式的元素。以下是五种常见的CSS选择器：
- **标签选择器（Element Selector）：**根据HTML元素名选择元素。匹配所有指定类型的元素。
```
p {
  color: red;
}
```
  上例中，所有<p>元素的文本颜色将被设置为红色。
- **类选择器（Class Selector）：**以.开头，后跟类名。匹配具有指定类名的所有元素。
```
.highlight {
  background-color: yellow;
}
```
  上例中，所有拥有highlight类的元素背景色将变为黄色。
- **ID选择器（ID Selector）：**以#开头，后跟ID名。匹配具有指定ID的唯一元素。
```
#main-header {
  font-size: 24px;
}
```
  上例中，拥有id="main-header"的元素字体大小将被设置为24像素。
- **后代选择器（Descendant Selector）：**两个选择器之间用空格分隔。匹配作为第一个选择器后代的所有第二个选择器所指定的元素。
```
ul li {
  list-style-type: none;
}
```
  上例中，所有位于<ul>元素内的<li>元素将取消默认列表样式。
- **组合选择器（Combinator Selectors）：**如+相邻兄弟选择器、~通用兄弟选择器等。用于选择满足特定关系的元素。
```
h2 + p {
  margin-top: 0;
}
```
  上例中，紧跟在<h2>元素后的首个<p>元素顶部外边距将被设为零。
**问题：**请解释CSS中的层叠（Cascading）和继承（Inheritance），并举例说明它们的区别。

答案：

**层叠（Cascading）**是指多个CSS规则可能同时应用于同一个元素，当发生冲突时，浏览器根据一定的优先级规则确定最终应用的样式。层叠主要涉及三个原则：
1. 来源（Source Order）：同一选择器类型和特性的CSS规则中，后出现的规则覆盖前面的规则。
```
p {
  color: blue;
}

p {
  color: red; /* 覆盖上一条规则 */
}
```
2. 特异性（Specificity）：选择器的特异性越高，其对应的规则优先级越高。特异性由四个部分组成（每部分依次计数）：
  - 行内样式（inline styles）：1,0,0,0
  - ID选择器：0,1,0,0
  - 类选择器、属性选择器、伪类选择器：0,0,1,0
  - 元素选择器、伪元素选择器：0,0,0,1
  特异性高的规则覆盖特异性低的规则。
```
#content p {
  color: blue; /* 特异性：0,1,0,1 */
}

.main p {
  color: red; /* 特异性：0,0,1,1 */
}

<div id="content">
  <p class="main">Text</p> 
</div>
```
3. 重要性（Importance）：使用!important标记的声明具有最高优先级，优先于其他规则。
```
p {
  color: blue !important; /* 优先级最高 */
}

p {
  color: red;
}
```
**继承（Inheritance）**是指某些CSS属性（如字体、颜色、文字对齐等）可以从父元素传递给子元素。子元素无需显式定义这些属性即可获得与父元素相同的效果。
```
<body style="color: blue;">
  <p>这段文字是蓝色的。</p> 
</body>
```
区别：
- 层叠处理的是多个CSS规则对同一元素的直接应用，关注的是规则之间的冲突解决和优先级排序。
- 继承处理的是父元素的某些属性值自然传递给子元素，子元素不需要额外定义这些属性即可获得相应样式。
- 层叠可能导致不同选择器的样式在同一元素上叠加或覆盖；而继承则是属性值在DOM树结构中的自然传播，没有冲突的概念。
**问题：**简述媒体查询（Media Queries）的作用及基本语法。

答案：

**媒体查询（Media Queries）**是一种让CSS样式根据设备环境（如视口宽度、设备方向、色彩能力等）进行响应的能力。它们使开发者能够针对不同屏幕尺寸、分辨率、设备类型等条件应用特定的样式，实现响应式设计。

基本语法：

媒体查询由@media规则引入，后跟一个或多个媒体条件，条件满足时，其中的CSS样式才会生效。基本结构如下：
```
@media media-type and (media-feature) {
  /* 在满足条件的设备环境下应用的CSS样式 */
}
```
- media-type：媒体类型，如all（所有设备）、print（打印预览）、screen（电脑显示器、手机等屏幕）等。通常省略，默认为all。
- and：逻辑运算符，用于连接多个媒体条件。还可以使用not（否定）、only（限制条件仅适用于支持媒体查询的浏览器）。
- media-feature：媒体特性，用于描述设备特定的特征。常见的媒体特性包括：
  - width、height：视口宽度和高度。
  - orientation：设备方向，取值为portrait（竖屏）或landscape（横屏）。
  - aspect-ratio、device-aspect-ratio：视口或设备的宽高比。
  - resolution：设备的分辨率（dpi、dpcm或dppx）。
  - color、color-index、monochrome：颜色深度、颜色索引表大小、单色像素数等。
示例：
```
@media screen and (min-width: 768px) {
```css
```

/* 当视口宽度大于等于768px时应用以下样式 */
body {
background-color: lightblue;
}

.sidebar {
display: block; /* 在大屏幕上显示侧边栏 */
}
}

@media screen and (max-width: 767px) {
/* 当视口宽度小于768px时应用以下样式 */
body {
background-color: coral;
}

.sidebar {
display: none; /* 在小屏幕上隐藏侧边栏 */
}
}


在这个示例中，当视口宽度大于等于768px时，页面背景色为浅蓝色，侧边栏显示；当视口宽度小于768px时，页面背景色变为珊瑚色，侧边栏隐藏。这就是媒体查询如何根据设备环境条件应用不同的CSS样式，实现响应式设计。

17. **问题：**什么是CSS伪类和伪元素？请分别给出两个例子并解释其作用。

    **答案：**

    **CSS伪类**和**伪元素**是用于选择文档中不存在于DOM树中的特定状态或抽象概念的特殊选择器。

    **伪类（Pseudo-classes）：**用于表示元素的某种特定状态，如用户交互、导航菜单项的当前状态、元素的位置等。它们以冒号`:`开头。

    **例子：**

    1. **`:hover`**：表示元素处于鼠标指针悬浮在其上方的状态。常用于实现鼠标悬停时的交互效果。

       ```css
       a:hover {
         color: red;
       }
       ```

       上例中，当鼠标悬停在链接上时，链接文本颜色变为红色。

    2. **`:nth-child(n)`**：选择父元素下第n个子元素。这里的n可以是数字、关键词（如`odd`、`even`）或公式（如`2n+1`）。

       ```css
       li:nth-child(odd) {
         background-color: lightgray;
       }
       ```

       上例中，列表中的奇数项背景色被设置为浅灰色。

    **伪元素（Pseudo-elements）：**用于创建文档中不存在但在渲染时呈现的虚拟元素，如插入额外文本、生成内容前/后的装饰等。它们以双冒号`::`开头（为了与旧版CSS兼容，一些伪元素仍使用单冒号`:`表示，如`:before`和`:after`）。

    **例子：**

    1. **`::before`**：在元素内容之前插入生成的内容。配合`content`属性使用。

       ```css
       .quote::before {
         content: '"';
         font-weight: bold;
       }
       ```

       上例中，在每个拥有`quote`类的元素内容前插入一个引号，并使其加粗。

    2. **`::first-letter`**：选择元素文本的第一个字符。常用于首字母下沉、首字放大等排版效果。

       ```css
       p::first-letter {
         font-size: 2em;
         float: left;
         margin-right: 0.5em;
       }
       ```

       上例中，每个段落的首字母字体大小增大为2em，浮动到左边，并添加右侧边距，实现首字母下沉效果。

18. **问题：**简述CSS盒阴影（Box Shadow）属性的构成及用法。

    **答案：**

    **CSS盒阴影（Box Shadow）**属性为元素添加一个或多个阴影效果，增强了界面的立体感和视觉吸引力。该属性可以接受一个或多个阴影描述符，每个描述符由以下部分构成：

    ```css
    box-shadow: h-offset v-offset blur spread color inset;
    ```

    - **h-offset**（水平偏移量）：阴影相对于元素内容区左侧的距离。正值向右，负值向左。
    - **v-offset**（垂直偏移量）：阴影相对于元素内容区顶部的距离。正值向下，负值向上。
    - **blur**（模糊半径）：可选，指定阴影的模糊程度。值越大，阴影越模糊。默认为0，表示清晰阴影。
    - **spread**（扩展半径）：可选，指定阴影的大小。正值会使阴影扩大，负值会使阴影缩小。默认为0，表示阴影大小与元素内容区相同。
    - **color**：阴影的颜色。可以是颜色名称、十六进制、RGB、RGBA、HSL、HSLA等形式。
    - **inset**（可选关键字）：将外部阴影改为内部阴影，即阴影在元素内容区内显示。

    **用法示例：**

    ```css
    /* 添加一个向右下偏移2px、模糊半径为4px、颜色为黑色的外部阴影 */
    box-shadow: 2px 2px 4px black;

    /* 添加两个阴影，第一个为向右下偏移、模糊、黑色外部阴影，第二个为向左上偏移、不模糊、浅灰色内部阴影 */
    box-shadow: 2px 2px 4px black, -2px -2px 0px lightgray inset;
    ```

    注意，当同时设置多个阴影时，它们会按照从左到右的顺序堆叠。

19. **问题：**解释CSS中的层叠上下文（Stacking Context）及其相关概念，并举出至少两个创建新层叠上下文的例子。

    **答案：**

    **层叠上下文（Stacking Context）**是HTML元素在Z轴（垂直于屏幕的维度，决定元素的前后堆叠顺序）上的一个独立渲染区域。每个层叠上下文对其中的子元素拥有独立的层叠级别规则，决定了这些子元素如何与上下文中其他元素以及上下文外部元素在Z轴上进行层叠。

    相关概念：

    - **层叠顺序（Stacking Order）**：层叠上下文内的元素按照以下顺序进行层叠：
      1. 背景和边框（Background and borders）
      2. 负z-index（Negative z-index）
      3. 子层叠上下文（Child stacking contexts）及其内容
      4. 正常流中的非定位元素（Non-positioned in-flow elements）
      5. 绝对定位元素（Positioned elements）
      6. 浮动元素（Floating elements）
      7. 正z-index（Positive z-index）

    - **层叠等级（Stacking Level）**：每个层叠上下文内的元素根据其`z-index`值（如果有）和其他因素确定其在当前上下文中的层叠等级。如果元素没有指定`z-index`，则根据上述层叠顺序确定其等级。

    创建新层叠上下文的条件：

    - 具有`position`值不为`static`且`z-index`值不为`auto`的元素。
    - `opacity`值小于1的元素。
    - `mix-blend-mode`值不是`normal`的元素。
    - `filter`值不是`none`的元素。
    - `isolation`值为`isolate`的元素。
    - `will-change`值为特定属性（如`transform`、`opacity`等）的元素。
    - `-webkit-overflow-scrolling`值为`touch`的元素。
    - `clip-path`值不是`none`的元素。
    - `mask`或`mask-image`值不是`none`的元素。
    - 弹性盒（Flexbox）布局中的`flex`元素，且`z-index`值不为`auto`。
    - 网格（Grid）布局中的`grid`元素，且`z-index`值不为`auto`。

    **创建新层叠上下文的示例：**

    1. 使用`position`和`z-index`创建层叠上下文：

       ```css
       .parent {
         position: relative;
         z-index: 1; /* 非auto值即可 */
       }
       ```

    2. 使用`opacity`创建层叠上下文：

       ```css
       .parent {
         opacity: 0.9;
       }
       ```

    当元素满足上述任一条件时，它将成为一个新的层叠上下文，其子元素的层叠顺序将独立于上下文外部元素，并遵循层叠上下文内部的层叠规则。

20. **问题：**简述CSS中的`display`属性的作用及常见的值，并举例说明。

    **答案：**

    **`display`属性**决定了元素生成的盒模型类型、元素是否及如何参与布局流（flow）、以及与其他元素的关系。它是CSS中最基础且重要的属性之一，直接影响元素的显示和布局。

    **常见的`display`属性值：**

    - **`block`**：元素生成一个块级框（block-level box），独占一行，可以设置宽高，前后带有默认的外边距。例如：

       ```css
       div {
         display: block;
       }
       ```

    - **`inline`**：元素生成一个内联级框（inline-level box），与其他内联元素元素在同一行内连续排列，不能设置宽高，只能通过内容撑开宽度，高度由内容决定。例如：

```css
span {
  display: inline;
}

inline-block：元素生成一个内联级框，但表现类似块级元素，可以设置宽高，且前后没有默认的外边距。与其他内联元素在同一行内排列，但不会发生换行。例如：

.button {
  display: inline-block;
  width: 100px;
  height: 30px;
}

flex：元素生成一个弹性容器（flex container），其子元素作为弹性项目（flex items）参与弹性布局。弹性布局提供了强大的对齐、方向控制以及灵活的伸缩能力。例如：

.container {
  display: flex;
}

.item {
  flex: 1; /* 子元素按比例分配容器空间 */
}

grid：元素生成一个网格容器（grid container），其子元素作为网格项（grid items）参与网格布局。网格布局允许通过定义行（rows）和列（columns）创建二维的复杂布局结构。例如：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 定义3列，等宽分布 */
}

.grid-item {
  grid-column: 1 / span 2; /* 占据第1列至第2列，跨两列 */
}

none：元素不生成任何框，不参与布局流，也不会占据任何空间。与visibility: hidden不同，display: none会让元素完全不可见且不影响布局。例如：

.hidden-element {
  display: none;
}

table、table-row、table-cell等：用于创建表格布局，分别对应整个表格、表格行和表格单元格。例如：

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

list-item：元素生成一个列表项框（list-item box），表现为<li>元素的行为，包括前面可能显示一个标记（marker）。例如：

.custom-list {
  display: list-item;
}

contents：元素及其所有子孙元素被替换为元素的内容。通常用于替换无实际意义的结构化元素，使其对布局无影响。例如：

.wrapper {
  display: contents;
}

以上就是display属性的常见值及其作用，通过调整display属性，可以灵活地改变元素的显示模式和参与布局的方式，实现多样化的布局效果。

man2017

关注

13
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
20个CSS最新热点面试题，包含超详细答案与超全解析

*灵活的对齐与方向：**可以轻松调整子元素在主轴（flex-direction决定）上的排列顺序、对齐方式（justify-content）和交叉轴上的对齐方式（align-items）。**流式布局（Fluid Layout）：**使用百分比、viewport相对单位（如vw、vh、vmin、vmax）替代固定单位（如px）定义元素尺寸，确保元素随视口尺寸变化而自适应。**Stylus：**基于Node.js，语法极其灵活，无需括号和分号，支持变量、嵌套、混合、函数、运算、条件语句、循环等。
复制链接

扫一扫