CSS 面试真题解析：从基础到实战的进阶攻略

概述

CSS（Cascading Style Sheets）是一种用于描述 HTML 或 XML（包括 SVG、XHTML 等）文档的外观和格式的层叠样式表语言。CSS 与 HTML 的关系密切，主要用来定义网页的布局、字体、颜色、间距等样式，使网页具有美观、易读的展示效果。

CSS 基础概念

CSS 的基本结构包括选择器和声明两部分。选择器用于指定要应用样式的 HTML 元素，声明则包括属性和值，描述了元素的样式信息。

/* 选择所有段落元素并设置字体大小为16像素 */
p {
    font-size: 16px;
}

/* 选择具有类名为 "highlight" 的段落元素并设置背景色为黄色 */
p.highlight {
    background-color: yellow;
}

CSS 与 HTML 的关系

CSS 和 HTML 结合使用，通过 CSS 选择器来定位 HTML 元素，然后应用样式。例如，要为网页中的所有链接设置样式，可以使用以下 CSS 代码：

a {
    color: blue;
    text-decoration: none;
}

CSS 选择器及其优先级

CSS 选择器有多种类型，包括类选择器、ID 选择器、标签选择器、属性选择器等。选择器的优先级决定了 CSS 样式如何被应用到 HTML 元素上。

通用选择器与通配符选择器的相关代码：

/* 选择所有元素并设置背景色为白色 */
* {
    background-color: white;
}

/* 选择所有 <p> 标签并设置背景色为红色 */
p {
    background-color: red;
}

CSS 布局与定位

CSS 布局允许开发者对网页元素进行精确的位置控制。浮动、定位、盒模型等概念对于构建复杂的网页布局至关重要。

浮动与清除（float & clear）

浮动允许元素水平排列，通常用于创建多列布局。清除（clear）用于防止浮动元素影响其周围的元素。

/* 制造浮动效果 */
.left-column, .right-column {
    float: left;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.left-column {
    width: 50%;
    background-color: #ccc;
}

.right-column {
    width: 50%;
    background-color: #ffcc00;
}

.clearfix {
    /* 避免重叠 */
    overflow: auto;
}

盒模型（box model）

盒模型是 CSS 布局的基础。它描述了元素的边界、填充、边框和内容区域。

/* 设置盒模型的样式 */
.container {
    margin: 20px; /* 外边距 */
    padding: 20px; /* 内边距 */
    border: 10px solid rgba(0, 0, 0, 0.5); /* 边框 */
    width: 500px; /* 宽度 */
    height: 300px; /* 高度 */
}

绝对定位与相对定位（absolute & relative positioning）

绝对定位允许元素相对于最近的具有定位属性的祖先元素或整个视窗进行定位，而相对定位则将元素相对于其原始位置进行移动。

/* 绝对定位示例 */
#absolute-box {
    position: absolute;
    top: 100px;
    left: 200px;
    width: 100px;
    height: 50px;
    background-color: #f00;
}

/* 相对定位示例 */
#relative-box {
    position: relative;
    width: 100px;
    height: 50px;
    background-color: #0f0;
    margin: 50px;
}

CSS 颜色与背景

CSS 允许开发者使用多种颜色值和背景属性来美化网页。

颜色值与代码

颜色值可以使用英文或十六进制代码表示，英文代码如 red，十六进制代码如 #ff0000。

/* 使用颜色值 */
body {
    color: red;
    background-color: #0000ff;
}

/* 使用 RGB 值 */
body {
    color: rgb(255, 0, 0);
    background-color: rgba(0, 0, 255, 0.5);
}

/* 使用 HSL 值 */
body {
    color: hsl(0, 100%, 50%);
    background-color: hsla(240, 100%, 50%, 0.5);
}

区块与图片背景（background-color vs background-image）

背景颜色与背景图片之间存在区别，背景颜色简单地填充整个元素，而背景图片则可以使用重复、位置等属性进行个性化设置。

/* 设置背景颜色 */
body {
    background-color: #00aaff;
}

/* 设置背景图片 */
body {
    background-image: url('background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

CSS 属性与样式

除了颜色和背景，CSS 还提供了许多用于调整文本、边框等属性的样式。

颜色相关属性（color, background-color）

/* 设置颜色 */
h1 {
    color: blue;
}

/* 设置背景颜色 */
div {
    background-color: #f0f0f0;
}

字体与文本样式（font-family, font-size, text-align）

/* 设置字体和大小 */
h1 {
    font-family: "Arial", sans-serif;
    font-size: 24px;
}

/* 对齐文本 */
p {
    text-align: justify;
}

边框与内边距（border, padding）

边框和内边距属性允许开发者控制元素的边框样式、宽度、颜色和内边距。

/* 设置边框 */
button {
    border: 2px solid black;
}

/* 设置内边距 */
section {
    padding: 20px;
}

CSS 选择器与优先级

选择器优先级决定了 CSS 样式在元素上的应用顺序。优先级由高到低依次为：

1. !important 声明（最高优先级）
2. 内联样式
3. 内部样式表（文档头部）
4. 外部样式表（通过 <link> 标签引入）

/* 内联样式覆盖内部样式 */
<button style="color: red;">Button</button>
/* 内部样式 */
#container {
    color: blue;
}
/* 外部样式 */
.external-style {
    color: green;
}
/* 选择器优先级示例 */
#container .highlight {
    color: orange !important;
}

CSS 实战案例与面试技巧

为了准备 CSS 面试或在实际项目中使用 CSS，理解并实践以下几点是关键：

• 实现常见网页布局：

  • 单列布局：使用 <div> 元素平铺内容。
  • 多列布局：使用浮动（float）技术实现。
  • 响应式布局：利用媒体查询（@media）来适应不同屏幕尺寸。
• 解决 CSS 层叠问题：
  • 使用 !important 来解决样式冲突
  • 避免选择器过度特定化
  • 使用 CSS 样式优先级计算工具

如何准备 CSS 面试

• 掌握 CSS 核心概念：盒模型、选择器、布局技巧等。
• 实战经验：通过项目或小练习积累 CSS 应用经验。
• 理解优先级与层叠：能够解决代码冲突。
• 熟悉前端框架和库：了解如 Bootstrap、Tailwind CSS 等框架中的 CSS 实践。

通过上述指南和实践，你可以更深入地理解 CSS，并在面试和日常开发中运用自如。