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>
AI 代码解读
外部样式表styles.css内容：
.external-style {
font-weight: bold;
}
AI 代码解读
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>
AI 代码解读
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>
AI 代码解读
三、组件封装方法
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>
AI 代码解读
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>
AI 代码解读
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>
AI 代码解读
四、组件封装最佳实践
1. 单一职责原则
每个组件应该只负责一个特定的功能或视觉元素，如按钮组件只负责按钮样式和交互，卡片组件只负责卡片布局和内容展示。
2. 可配置性
通过类名、属性或JavaScript参数使组件具有可配置性，例如按钮组件可以通过添加不同的类名实现不同的颜色和大小：
<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-secondary btn-sm">小按钮</button>
AI 代码解读
3. 样式隔离
使用BEM命名法（Block-Element-Modifier）或CSS Modules等技术确保组件样式不会影响其他部分：
/* BEM命名法示例 */
.card {
/* 块 */ }
.card__header {
/* 元素 */ }
.card__title {
/* 元素 */ }
.card--featured {
/* 修饰符 */ }
AI 代码解读
4. 响应式设计
组件应在不同屏幕尺寸下都能正常工作，使用媒体查询、Flexbox或Grid等技术实现响应式：
/* 响应式卡片组件 */
@media (max-width: 768px) {
.card {
width: 100%;
}
}
AI 代码解读
5. 状态管理
为组件设计不同的状态（如正常、悬停、激活、禁用等），并提供相应的样式：
.btn {
/* 基础样式 */ }
.btn:hover {
/* 悬停样式 */ }
.btn:active {
/* 激活样式 */ }
.btn.disabled {
/* 禁用样式 */ }
AI 代码解读
通过以上组件封装方法，可以提高代码复用性、可维护性，使项目结构更加清晰，开发效率更高。
2025,CSS, 面试题，答案解
资源地址：
https://pan.quark.cn/s/50438c9ee7c0
