CSS 高中低部分面试题方法及知识点介绍
1. 什么是盒模型？标准盒模型和IE盒模型有什么区别？
参考答案：
CSS盒模型描述了文档树中的元素如何根据视觉格式化模型生成矩形盒子。每个盒子由四部分组成：
内容(content)
内边距(padding)
边框(border)
外边距(margin)
区别：
标准盒模型(W3C盒模型)：width和height只包括内容区域
IE盒模型(怪异盒模型)：width和height包括内容、内边距和边框
/* 标准盒模型 */
.box {box-sizing: content-box; /* 默认值 */width: 200px; /* 只包括内容宽度 */padding: 20px; /* 额外增加 */border: 5px solid; /* 额外增加 */
}/* IE盒模型 */
.box {box-sizing: border-box;width: 200px; /* 包括内容+内边距+边框 */padding: 20px; /* 包含在width内 */border: 5px solid; /* 包含在width内 */
}
2. 如何让一个div水平垂直居中？
参考答案：
/* 方法1: Flexbox (推荐) */
.container {display: flex;justify-content: center;align-items: center;height: 100vh;
}/* 方法2: Grid */
.container {display: grid;place-items: center;height: 100vh;
}/* 方法3: 绝对定位 + transform */
.container {position: relative;height: 100vh;
}.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}/* 方法4: 绝对定位 + margin auto */
.centered {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 200px;height: 100px;
}
3. CSS选择器的优先级如何计算？
参考答案：
优先级从高到低：
!important 》 内联样式 (1000) 》 ID选择器 (100) 》类选择器/属性选择器/伪类 (10) 》元素选择器/伪元素 (1) 》通用选择器 (0)
计算示例：
#header .nav li.active a:hover {} /* 100 + 10 + 1 + 10 + 1 = 122 */
div#main .content p {} /* 1 + 100 + 10 + 1 = 112 */
4. 什么是BFC？如何创建BFC？
参考答案：
BFC(块级格式化上下文)是Web页面的可视化CSS渲染的一部分，是块级盒子的布局过程发生的区域。
创建BFC的方法：
- 根元素(
<html>) - 浮动元素(
float不为none) - 绝对定位元素(
position为absolute或fixed) display为inline-block、table-cell、table-caption、flex、inline-flexoverflow不为visible
BFC特性：
- 内部盒子垂直排列
- 垂直方向的距离由margin决定，同一个BFC的相邻盒子margin会重叠
- BFC区域不会与浮动元素重叠
- 计算BFC高度时，浮动元素也参与计算
5. Flexbox布局的主要属性有哪些？
参考答案：
容器属性：
.container {display: flex; /* 或 inline-flex */flex-direction: row | row-reverse | column | column-reverse;flex-wrap: nowrap | wrap | wrap-reverse;justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;align-items: stretch | flex-start | flex-end | center | baseline;align-content: stretch | flex-start | flex-end | center | space-between | space-around;gap: 10px; /* 项目间距 */
}
项目属性：
.item {order: 0; /* 排列顺序 */flex-grow: 0; /* 放大比例 */flex-shrink: 1; /* 缩小比例 */flex-basis: auto; /* 项目基准大小 */flex: 0 1 auto; /* 缩写 */align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
6. CSS Grid布局的核心概念和属性？
参考答案：
- 网格容器（
Grid Container）：通过设置display: grid或display: inline-grid来定义一个网格容器，其直接子元素将成为网格项目。 - 网格线（
Grid Lines）：网格线是划分网格的线，包括水平线和垂直线。它们可以被编号（从1开始）或命名。 - 网格轨道（
Grid Tracks）：两个相邻网格线之间的空间，也就是行或列。 - 网格单元格（
Grid Cell）：两个相邻行网格线和两个相邻列网格线之间的空间，是网格的最小单位。 - 网格区域（
Grid Area）：由一个或多个相邻网格单元格组成，可以是任意矩形区域。通过指定四条网格线来定义。
容器属性：
.container {display: grid | inline-grid;grid-template-columns: 100px 1fr 2fr;grid-template-rows: 50px 1fr;grid-template-areas: "header header header""sidebar content content";gap: 10px;justify-items: start | end | center | stretch;align-items: start | end | center | stretch;
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
项目属性：
.item {grid-column: 1 / 3; /* 起始线 / 结束线 */grid-row: 1 / 2;justify-self: start | end | center | stretch;align-self: start | end | center | stretch;
}
7. CSS动画和过渡的区别？
参考答案：
- 过渡(
Transition)：
需要触发条件(:hover, :focus等)
只能定义开始和结束状态
相对简单，适合简单动画
.box {transition: all 0.3s ease-in-out;
}.box:hover {transform: scale(1.1);background: blue;
}
- 动画(
Animation)：
不需要触发，可以自动播放
可以定义多个关键帧
更复杂，功能更强大
@keyframes slide {0% { transform: translateX(0); }50% { transform: translateX(100px); }100% { transform: translateX(0); }
}.box {animation: slide 2s ease-in-out infinite;
}
8. 响应式设计的实现方法？
参考答案：
8.1、 媒体查询
/* 移动设备优先 */
.container { width: 100%; }/* 平板 */
@media (min-width: 768px) {.container { width: 750px; }
}/* 桌面 */
@media (min-width: 992px) {.container { width: 970px; }
}/* 大桌面 */
@media (min-width: 1200px) {.container { width: 1170px; }
}
8.2、 弹性布局
.container {display: flex;flex-wrap: wrap;
}.item {flex: 1 1 300px; /* 基础300px，可伸缩 */
}
8.3、 相对单位
.container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 5%; /* 相对父元素 */
}.text {font-size: clamp(1rem, 2.5vw, 2rem); /* 动态字体大小 */
}
9. 什么是CSS-in-JS？优缺点是什么？
参考答案：
- 定义： 在JavaScript中编写CSS，运行时动态生成样式。
- 实现库：
Styled-components, Emotion, Styled-system
优点：
- 组件样式隔离，避免污染
- 可以利用JavaScript的能力
- 自动厂商前缀和优化
- 更好的主题和动态样式支持
缺点：
- 运行时开销
- 学习成本
- 调试困难
- SEO可能受影响
// Styled-components 示例
import styled from 'styled-components';const Button = styled.button`background: ${props => props.primary ? 'blue' : 'white'};color: ${props => props.primary ? 'white' : 'blue'};padding: 10px 20px;border: 2px solid blue;border-radius: 5px;&:hover {opacity: 0.8;}
`;// 使用
<Button primary>主要按钮</Button>
<Button>次要按钮</Button>
10. CSS性能优化策略有哪些？
参考答案：
10.1、 选择器优化
/* 差 - 过于具体 */
div#header ul.nav li a.button {}/* 好 - 简洁高效 */
.nav .button {}
10.2、 减少重排和重绘
/* 使用transform和opacity实现动画 */
.animate {transform: translateX(100px);opacity: 0.5;/* 这些属性不会触发重排 */
}
10.3、 使用CSS containment
.widget {contain: layout style paint;/* 限制浏览器重新计算范围 */
}
10.4、 关键CSS和内联
<style>
/* 关键CSS内联 */
.header { /* ... */ }
.hero { /* ... */ }
</style><link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
10.5、 现代CSS新特性有哪些？
参考答案：
1. CSS自定义属性(CSS变量)
:root {--primary-color: #007bff;--spacing: 16px;
}.button {background: var(--primary-color);padding: var(--spacing);
}
2. CSS Grid Subgrid
.grid {display: grid;grid-template-columns: 1fr 2fr;
}.grid-item {display: grid;grid-template-rows: subgrid;grid-row: span 3;
}
3. Container Queries
.component {container-type: inline-size;
}@container (min-width: 400px) {.component {/* 组件内部样式调整 */}
}
4. :has() 选择器
/* 选择包含特定子元素的父元素 */
.card:has(.featured) {border: 2px solid gold;
}
11、 如何实现CSS架构和模块化？
参考答案：
11.1、 BEM命名规范
/* Block Element Modifier */
.button { /* 块 */ }
.button__icon { /* 元素 */ }
.button--primary { /* 修饰符 */ }
11.2、 ITCSS架构
settings/ # 全局变量tools/ # mixins和函数generic/ # 重置和标准化elements/ # 原生HTML元素样式objects/ # 布局类components/ # 具体组件utilities/ # 工具类
11.3、 CSS Modules
/* Button.module.css */
.button {composes: base from './base.css';background: blue;
}.primary {composes: button;background: darkblue;
}
import styles from './Button.module.css';function Button() {return <button className={styles.primary}>Click</button>;
}
12. 如何处理CSS中的可访问性？
参考答案：
12.1、 语义化HTML
<!-- 差 -->
<div onclick="submit()">提交</div><!-- 好 -->
<button type="submit">提交</button>
12.2、 焦点管理
/* 自定义焦点样式 */
button:focus {outline: 2px solid #007bff;outline-offset: 2px;
}/* 跳过链接 */
.skip-link {position: absolute;top: -40px;left: 0;
}.skip-link:focus {top: 0;
}
12.3、 颜色对比度
/* WCAG AA标准 - 4.5:1 */
.text {color: #333; /* 深色文字 */background: #fff; /* 白色背景 *//* 对比度 13:1 */
}
12.4、 减少运动
.animation {animation: slide 0.5s;
}@media (prefers-reduced-motion: reduce) {.animation {animation: none;}
}