前端 CSS 面试题, 有哪些 CSS 选择器?请分别介绍

Step 1

Q:: 有哪些 CSS 选择器？请分别介绍。

A:: CSS 选择器是用于选择 HTML 元素的模式。常见的选择器包括： 1. 基础选择器： - 标签选择器：直接使用 HTML 标签名来选中所有相应标签元素。例如，p 选择所有段落元素。 - 类选择器：使用元素的 class 属性选择元素，前面加上 . 符号。例如，.classname 选择所有 class 为 classname 的元素。 - ID 选择器：使用元素的 id 属性选择元素，前面加上 # 符号。例如，#idname 选择 id 为 idname 的元素。 2. 组合选择器： - 后代选择器：选择指定元素内所有匹配的后代元素。例如，div p 选择所有位于 div 元素内的 p 元素。 - 子元素选择器：选择指定元素的直接子元素。例如，ul > li 选择所有 ul 元素的直接子元素 li。 - 相邻兄弟选择器：选择紧接在另一元素后的兄弟元素。例如，h1 + p 选择紧接在 h1 标签后面的 p 标签。 - 一般兄弟选择器：选择同级别且在目标元素后的所有兄弟元素。例如，h1 ~ p 选择所有在 h1 标签后面的 p 标签。 3. 属性选择器：基于元素的属性值选择元素。例如，input[type='text'] 选择所有 type 属性值为 text 的 input 元素。 4. 伪类选择器：用于选择特定状态的元素。例如，:hover 选择当用户悬停在元素上时的样式。 5. 伪元素选择器：用于选择元素的某个部分，例如 ::before 在元素内容前插入内容，::after 在元素内容后插入内容。

Step 2

Q:: CSS 中的优先级规则是什么？

A:: CSS 中的优先级决定了在多条规则冲突时，哪条规则会应用到元素上。优先级规则如下： 1. 内联样式：优先级最高，例如 <div style='color: red;'>。 2. ID 选择器：优先级次之，例如 #id。 3. 类选择器、伪类选择器、属性选择器：例如 .class、[type='text']。 4. 标签选择器、伪元素选择器：例如 div、p、::before。 5. 通用选择器和组合选择器：例如 *、div p、div > p。 6. 继承的样式：通过继承获得的样式优先级最低。 此外，使用 !important 声明的样式会覆盖上面所有规则，但应慎用。

Step 3

Q:: 什么是盒模型 (Box Model)，它包括哪些部分？

A:: 盒模型是用于表示元素在页面上所占空间的模型。它包括以下部分： 1. Content（内容）：元素的实际内容区域。 2. Padding（内边距）：内容与边框之间的间距。 3. Border（边框）：围绕内容和内边距的边框。 4. Margin（外边距）：边框外的外部间距，将元素与其他元素分开。 在标准盒模型中，宽度和高度只包括内容区域（不包含内边距和边框），但在 box-sizing: border-box 的盒模型中，宽度和高度包括内容、内边距和边框。

Step 4

Q:: 如何实现 CSS 布局中的居中对齐？

A:: 居中对齐分为水平居中和垂直居中，常见的实现方法有： 1. 水平居中： - 使用 text-align: center 实现文本及 inline 元素的居中。 - 使用 margin: 0 auto 实现块级元素的居中。 - 使用 Flexbox 布局中的 justify-content: center 实现容器内元素的水平居中。 2. 垂直居中： - 使用 Flexbox 布局中的 align-items: center 或 align-self: center 实现。 - 使用 CSS Grid 布局中的 place-items: center 或 align-items: center。 - 在固定高度的元素内使用 line-height 等于高度实现文本的垂直居中。 - 绝对定位和 transform 结合：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。

Step 5

Q:: CSS 的 Flexbox 布局和 Grid 布局有什么区别？

A:: Flexbox 和 Grid 是 CSS 中用于创建布局的两种工具： 1. Flexbox 布局： - 主要用于一维布局（行或列）。 - 可以方便地对齐和分布元素，即使元素的大小不确定。 - 通过 flex-direction 来设置主轴方向，使用 justify-content 和 align-items 等属性控制元素排列。 2. Grid 布局： - 适用于二维布局（行和列）。 - 可以创建复杂的网格布局，明确地定义每个元素的位置和大小。 - 使用 grid-template-rows、grid-template-columns 定义网格的行和列，使用 grid-area 定义元素占据的区域。 - 适合在需要精确控制布局的复杂网页中使用，而 Flexbox 更适合简单、灵活的布局。