CSS 的一些面试题： 一些基础的知识

拽住星星的衣领
215 阅读5分钟

前言

CSS 是前端开发的核心技能之一，对于任何想要成为前端开发者的人来说，掌握 CSS 的基本概念和进阶知识都是必不可少的。在本文中，我们将详细解答几个常见的 CSS 面试题，帮助你更好地理解 CSS 的原理和应用。

1. 说说你对 CSS 盒子模型的理解

是什么？

  • 在浏览器渲染一个 HTML 容器时，会根据某一个标准绘制出一个矩形，该矩形包括 content（内容）、padding（内边距）、border（边框）和 margin（外边距）。这就是所谓的 CSS 盒子模型。

有哪些盒模型？

  • 标准盒模型：width 仅包含 content 部分。总宽度计算方式为 width + padding + border + margin。
  • IE 盒模型：width 包含 content + padding + border。总宽度为 width + margin。

切换方法

  • 使用 box-sizing 属性可以在不同盒模型之间切换：
    • box-sizing: border-box; 使用 IE 盒模型。
    • box-sizing: content-box; 使用标准盒模型（默认）。

2. 说说 CSS 中的选择器有哪些？优先级是怎么样的？

常见选择器

  1. id 选择器 (#id)
  2. class 选择器 (.class)
  3. 标签选择器 (element)
  4. 后代选择器 (ancestor descendant)
  5. 子集选择器 (parent > child)
  6. 兄弟选择器 (element + sibling 或 element ~ siblings)
  7. 群组选择器 (selector1, selector2)
  8. 伪类选择器 (:hover, :nth-child)
  9. 伪元素选择器 (::before, ::after)
  10. 属性选择器 ([attribute=value])

优先级

  • !important > 内联样式 > id 选择器 > class 选择器 > 后代选择器、子集选择器、兄弟选择器 > 标签选择器。
  • 注意：与文字相关的属性通常会被继承。

3. 说说 em、px、rem、vw、vh 的区别

是什么？

  • 这些都是 CSS 中的单位，用于不同的场景来进行适配。

区别

  • em：相对于父元素的字体大小。
  • rem：相对于根元素的字体大小。
  • vw：相对于视口宽度的百分比。
  • vh：相对于视口高度的百分比。
  • px：固定单位，表示像素。

4. CSS 中有哪些隐藏容器的方式？区别是什么？

常见方法

  1. display: none;：元素从文档流中移除，无法绑定事件。
  2. opacity: 0;：元素透明，但保留在文档流中，可以绑定事件。
  3. width: 0; height: 0;：元素尺寸为 0，无文档流，无法绑定事件。
  4. visibility: hidden;：元素不可见，但保留在文档流中，无法绑定事件。
  5. clip-path: inset(0 0 0 0);：通过裁剪元素使其不可见，保留在文档流中，无法绑定事件。

5. 清除浮动

常见方法

  1. 在浮动元素的最后添加一个空容器，并设置 clear: both;。该容器必须是块级元素。
  2. 使用父容器的伪元素 ::after 进行清除浮动。
  3. 使用 BFC（块级格式化上下文）机制来清除浮动。

6. 谈谈你对 BFC 的理解

什么是 BFC？

  • BFC（Block Formatting Context，块级格式化上下文）是一种用于布局块级盒子元素的 CSS 渲染机制，它具有一些特殊的渲染规则。

规则

  1. BFC 容器中的子元素依然按照正常的文档流进行布局。
  2. BFC 容器在计算高度时会将浮动子元素的高度也包括在内。
  3. BFC 容器中的子元素的 margin-top 不会与 BFC 容器的 margin-top 重叠。

触发 BFC 的条件

  1. 设置 overflow: hidden | auto | overlay | scroll;
  2. 设置 float: left | right;
  3. 设置 display: inline-block | flex | inline-flex | table-xxx;
  4. 设置 position: absolute | fixed;

应用场景

  1. 清除浮动
  2. 防止 margin 重叠

7. 你有哪些方法可以实现元素的水平垂直居中？

常见方法

  1. 已知父子容器宽高：直接使用 margin: auto;。
  2. 已知子容器宽高：使用 position: absolute; 并设置 margin 负值。
  3. 未知子容器宽高：
    1. 使用 display: flex; 配合 justify-content: center; 和 align-items: center;。
    2. 使用 position: absolute;，配合 transform: translate(-50%, -50%);。
    3. 使用 display: grid;，配合 justify-content: center; 和 align-items: center;。
    4. 使用 display: table-cell;，配合 vertical-align: middle; 和 text-align: center;。

8. 如何实现两栏布局，三栏布局？

常见方法

  1. 使用 flex 和 order 属性。
  2. 圣杯布局。
  3. 双飞翼布局。
  4. 使用 grid 布局。
  5. 使用 table 布局。
  6. 使用 position 定位。

9. 说说弹性盒子？

什么是弹性盒子？

  • 弹性盒子（Flexbox）是 CSS3 引入的一种布局模式，允许在容器内的子元素可以动态调整大小和位置，提供了更强的页面布局控制。

属性

  1. 父容器拥有的属性：

    • display: flex; 或 display: inline-flex;
    • flex-direction：定义主轴方向（如 row、column）。
    • flex-wrap：决定项目是否换行（如 nowrap、wrap）。
    • justify-content：项目在主轴上的对齐方式（如 flex-start、center）。
    • align-items：项目在交叉轴上的对齐方式（如 flex-start、center）。
    • align-content：多行项目在交叉轴上的对齐方式。

  2. 子容器拥有的属性：

    • order：定义项目的排列顺序。
    • flex-grow：定义项目的放大比例。
    • flex-shrink：定义项目的缩小比例。
    • flex-basis：定义项目的默认大小。
    • align-self：覆盖父容器的 align-items 属性，单独设置当前项目的对齐方式。

应用场景

  1. 实现水平垂直居中
  2. 多栏布局

结语

这些 CSS 面试题覆盖了从基础到进阶的 CSS 知识点，帮助你系统地复习和掌握 CSS 的核心概念和实际应用。在面试中，清晰地表达这些概念，并结合实际项目中的经验，将有助于你更好地展现你的技术能力。

avatar
文章
阅读
粉丝