2025 年最新 100 道 CSS 面试题及详细答案解析

原创

小焱

发布于 2025-06-15 05:16:01

1070

文章被收录于专栏：前端开发前端开发

100道CSS面试题及答案（续）

二、使用方法示例

1. CSS引入方式的使用

以下是一个完整示例，展示三种CSS引入方式的使用：

<!DOCTYPE html>
<html>
<head>
  <!-- 外部样式表 -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- 内部样式表 -->
  <style>
    .internal-style {
      font-style: italic;
    }
  </style>
</head>
<body>
  <!-- 内联样式 -->
  <h1 style="color: blue;">这是使用内联样式的标题</h1>
  
  <p class="external-style">这是使用外部样式的段落</p>
  
  <p class="internal-style">这是使用内部样式的段落</p>
</body>
</html>

外部样式表styles.css内容：

.external-style {
  font-weight: bold;
}

2. 盒模型与box-sizing使用

下面是一个演示标准盒模型和怪异盒模型差异的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid black;
  margin: 30px;
  background-color: lightblue;
  display: inline-block;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}
</style>
</head>
<body>
  <div class="box content-box">标准盒模型</div>
  <div class="box border-box">怪异盒模型</div>
</body>
</html>

3. 选择器优先级示例

以下代码展示了不同选择器优先级的效果：

<!DOCTYPE html>
<html>
<head>
<style>
/* 元素选择器，优先级最低 */
p {
  color: red;
}

/* 类选择器，优先级中等 */
.my-class {
  color: blue;
}

/* ID选择器，优先级最高 */
#my-id {
  color: green;
}

/* 内联样式优先级高于ID选择器 */
</style>
</head>
<body>
  <p>这是红色文本（元素选择器）</p>
  <p class="my-class">这是蓝色文本（类选择器）</p>
  <p id="my-id">这是绿色文本（ID选择器）</p>
  <p id="my-id" class="my-class">这是绿色文本（ID选择器优先级高于类选择器）</p>
  <p style="color: purple;">这是紫色文本（内联样式优先级最高）</p>
</body>
</html>

三、组件封装方法

1. 按钮组件封装

下面是一个使用CSS和HTML封装的按钮组件，支持不同状态和样式：

<!DOCTYPE html>
<html>
<head>
<style>
/* 基础按钮样式 */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 主要按钮样式 */
.btn-primary {
  background-color: #007BFF;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-primary:active {
  background-color: #004085;
}

/* 次要按钮样式 */
.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.btn-secondary:active {
  background-color: #4e555b;
}

/* 禁用状态 */
.btn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
</style>
</head>
<body>
  <button class="btn btn-primary">主要按钮</button>
  <button class="btn btn-secondary">次要按钮</button>
  <button class="btn btn-primary disabled">禁用按钮</button>
</body>
</html>

2. 卡片组件封装

下面是一个简单的卡片组件封装，包含标题、内容和底部操作区域：

<!DOCTYPE html>
<html>
<head>
<style>
/* 卡片容器 */
.card {
  width: 300px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  margin: 20px;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 卡片头部 */
.card-header {
  padding: 16px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.card-title {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

/* 卡片内容 */
.card-body {
  padding: 16px;
}

/* 卡片底部 */
.card-footer {
  padding: 16px;
  background-color: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

.card-button {
  padding: 8px 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.card-button:hover {
  background-color: #0056b3;
}
</style>
</head>
<body>
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">卡片标题</h3>
    </div>
    <div class="card-body">
      <p>这是卡片的内容区域，可以包含任意文本或其他元素。</p>
    </div>
    <div class="card-footer">
      <button class="card-button">查看详情</button>
    </div>
  </div>
</body>
</html>

3. 响应式导航栏组件

下面是一个使用CSS Flexbox实现的响应式导航栏组件：

<!DOCTYPE html>
<html>
<head>
<style>
/* 导航栏容器 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
  padding: 16px;
}

/* 品牌标识 */
.brand {
  font-size: 24px;
  font-weight: bold;
}

/* 导航链接 */
.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-links a:hover {
  color: #007BFF;
}

/* 移动端菜单按钮 */
.menu-toggle {
  display: none;
  cursor: pointer;
}

.menu-toggle .bar {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px 0;
  transition: all 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    background-color: #333;
    width: 100%;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    margin: 10px 0;
    text-align: center;
  }

  .menu-toggle {
    display: block;
  }
}
</style>
</head>
<body>
  <nav class="navbar">
    <div class="brand">Logo</div>
    <ul class="nav-links">
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
    <div class="menu-toggle">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
  </nav>

  <script>
    // 移动端菜单切换
    const menuToggle = document.querySelector('.menu-toggle');
    const navLinks = document.querySelector('.nav-links');

    menuToggle.addEventListener('click', () => {
      navLinks.classList.toggle('active');
      menuToggle.classList.toggle('active');
      
      // 切换图标
      const bars = menuToggle.querySelectorAll('.bar');
      if (navLinks.classList.contains('active')) {
        bars[0].style.transform = 'rotate(-45deg) translate(-5px, 6px)';
        bars[1].style.opacity = '0';
        bars[2].style.transform = 'rotate(45deg) translate(-5px, -6px)';
      } else {
        bars[0].style.transform = 'none';
        bars[1].style.opacity = '1';
        bars[2].style.transform = 'none';
      }
    });
  </script>
</body>
</html>

四、组件封装最佳实践

1. 单一职责原则

每个组件应该只负责一个特定的功能或视觉元素，如按钮组件只负责按钮样式和交互，卡片组件只负责卡片布局和内容展示。

2. 可配置性

通过类名、属性或JavaScript参数使组件具有可配置性，例如按钮组件可以通过添加不同的类名实现不同的颜色和大小：

<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-secondary btn-sm">小按钮</button>

3. 样式隔离

使用BEM命名法（Block-Element-Modifier）或CSS Modules等技术确保组件样式不会影响其他部分：

/* BEM命名法示例 */
.card { /* 块 */ }
.card__header { /* 元素 */ }
.card__title { /* 元素 */ }
.card--featured { /* 修饰符 */ }

4. 响应式设计

组件应在不同屏幕尺寸下都能正常工作，使用媒体查询、Flexbox或Grid等技术实现响应式：

/* 响应式卡片组件 */
@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}

5. 状态管理

为组件设计不同的状态（如正常、悬停、激活、禁用等），并提供相应的样式：

.btn { /* 基础样式 */ }
.btn:hover { /* 悬停样式 */ }
.btn:active { /* 激活样式 */ }
.btn.disabled { /* 禁用样式 */ }

通过以上组件封装方法，可以提高代码复用性、可维护性，使项目结构更加清晰，开发效率更高。

2025 年，CSS, 面试题，答案解析，盒模型，选择器优先级，Flexbox, 居中元素，浮动，媒体查询，响应式设计，Grid 布局，伪类，伪元素，动画

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

面试

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度