20道CSS相关前端面试题及答案
CSS 相关面试题及答案
-
什么是 CSS？它的主要作用是什么？
CSS（层叠样式表，Cascading Style Sheets）是用于描述 HTML 或 XML 文档呈现方式的语言。
主要作用：① 控制网页的布局和外观（如颜色、字体、间距）；② 实现内容与样式分离，提高代码复用性和可维护性；③ 支持响应式设计，使网页在不同设备上有良好显示效果。
-
CSS 选择器的优先级如何计算？请举例说明。
CSS 优先级按 “权重值” 计算，规则如下：
-
内联样式（
style属性）：权重 1000 -
ID 选择器（
#id）：权重 100 -
类选择器（
.class）、伪类（:hover）、属性选择器（[type="text"]）：权重 10 -
元素选择器（
div）、伪元素（::before）：权重 1优先级高的样式覆盖优先级低的，同级时后定义的覆盖先定义的。
示例：
#box .content p权重为 100 + 10 + 1 = 111；div.content权重为 1 + 10 = 11，前者优先级更高。
-
什么是 CSS 盒子模型？标准盒子模型和 IE 盒子模型有何区别？
盒子模型是 CSS 布局的基础，由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。
区别：① 标准盒子模型：
width和height仅包含内容区（content）；② IE 盒子模型（怪异模式）：width和height包含内容区、内边距和边框（content + padding + border）。可通过box-sizing切换：content-box（标准）、border-box（IE）。 -
如何清除浮动？请列举至少 3 种方法。
浮动元素会脱离文档流导致父元素高度坍塌，清除方法：
-
父元素添加
overflow: hidden（触发 BFC，自动包裹浮动元素）。 -
父元素末尾添加空标签并设置
clear: both（如<div style="clear: both;"></div>）。 -
使用伪元素（推荐）：
.parent::after {content: "";display: block;clear: both;}
- 父元素设置
display: flow-root（CSS3 新增，触发 BFC 且无副作用）。
-
什么是 BFC？如何触发 BFC？BFC 有哪些应用场景？
BFC（块级格式化上下文）是一个独立的渲染区域，内部元素布局不受外部影响。
触发方式：①
overflow: hidden/auto/scroll；②float: left/right；③position: absolute/fixed；④display: flex/grid/inline-block；⑤contain: layout。应用场景：① 清除浮动（避免父元素高度坍塌）；② 阻止 margin 重叠（如相邻元素垂直 margin 合并）；③ 防止元素被浮动元素覆盖。
-
Flex 布局中，
justify-content和align-items的作用分别是什么？常见取值有哪些？
-
justify-content：控制 flex 容器中元素在主轴（默认水平方向）上的对齐方式。常见取值：
flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐，中间间距相等）、space-around（元素两侧间距相等）。 -
align-items：控制 flex 容器中元素在交叉轴（默认垂直方向）上的对齐方式。常见取值：
flex-start（顶部对齐）、flex-end（底部对齐）、center（居中）、stretch（拉伸填充，默认）、baseline（基线对齐）。
- CSS 中
position属性有哪些取值？各自的特点是什么？
-
static（默认）：元素遵循正常文档流，top/left等属性无效。 -
relative：相对自身原位置偏移，不脱离文档流，保留原占位。 -
absolute：绝对定位，相对于最近的非static定位祖先元素偏移，脱离文档流，不保留原占位。 -
fixed：固定定位，相对于浏览器视口偏移，脱离文档流，不随页面滚动移动。 -
sticky：粘性定位，滚动到阈值前为relative，之后为fixed（如导航栏滚动时固定）。
- 如何实现元素的垂直居中？请列举至少 4 种方法。
-
Flex 布局：父元素设置
display: flex; align-items: center; justify-content: center;（子元素水平垂直居中）。 -
定位 + transform：父元素
position: relative，子元素position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);。 -
表格布局：父元素
display: table-cell; vertical-align: middle; text-align: center;，子元素display: inline-block;。 -
Grid 布局：父元素
display: grid; place-items: center;。 -
线高法（单行文本）：父元素
line-height等于高度，子元素text-align: center;。
display: none和visibility: hidden的区别是什么？
-
显示效果：两者均隐藏元素，但
display: none会完全移除元素（不占据空间）；visibility: hidden仅隐藏元素，仍保留原空间。 -
继承性：
display: none不继承，子元素也会被隐藏；visibility: hidden可继承，子元素设置visibility: visible可显示。 -
性能：
display: none会触发回流和重绘；visibility: hidden仅触发重绘。
-
什么是 CSS 动画？
transition和animation有何区别？CSS 动画指元素从一种样式平滑过渡到另一种样式的效果。
区别：
-
transition（过渡）：需触发条件（如hover），仅定义开始和结束状态，适合简单动画（如 hover 时颜色变化）。示例：
transition: width 0.3s ease; -
animation（动画）：无需触发条件，通过@keyframes定义多帧动画，支持循环、延迟等，适合复杂动画（如加载动画）。示例：
@keyframes rotate {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}.box { animation: rotate 2s infinite; }
-
如何使用 CSS 实现一个三角形？请写出代码。
利用 CSS 边框的梯形特性，将宽高设为 0，通过边框宽度和颜色控制三角形形状：
.triangle {width: 0;height: 0;/\* 上、右、下、左边框宽度，其中三边设为透明 \*/border-width: 0 50px 50px 50px;border-style: solid;border-color: transparent transparent #ff0000 transparent; /\* 底部为红色 \*/}
（上述代码实现向下的红色三角形，调整边框宽度和颜色可改变方向和样式）
-
CSS 中的
z-index属性有什么作用？使用时需要注意哪些问题？z-index用于控制元素的堆叠顺序（z 轴方向），值越大越靠上。注意事项：① 仅对定位元素（
position非static）有效；② 父元素z-index会限制子元素（子元素无法超出父元素堆叠层级）；③ 相同z-index时，后定义的元素或定位元素（relative/absolute）堆叠在上。 -
什么是 CSS 预处理器？常用的预处理器有哪些？它们的优势是什么？
CSS 预处理器是扩展 CSS 功能的语言，需编译为普通 CSS 使用，支持变量、嵌套等特性。
常用预处理器：Sass（Scss）、Less、Stylus。
优势：① 变量（如
$color: #333;）便于统一管理样式；② 嵌套语法减少代码冗余，结构更清晰；③ 混入（Mixin）复用代码（如兼容前缀）；④ 支持条件判断、循环等逻辑；⑤ 模块化拆分样式文件。 -
如何实现响应式布局？请列举核心技术。
响应式布局使网页在不同设备（手机、平板、电脑）上自适应显示，核心技术：
-
媒体查询（
@media）：根据屏幕宽度应用不同样式（如@media (max-width: 768px) { ... }）。 -
流式布局：使用百分比宽度（如
width: 50%）而非固定像素。 -
弹性布局（Flex）和网格布局（Grid）：自适应子元素排列。
-
响应式图片：
max-width: 100%防止图片溢出，srcset/<picture>标签加载不同尺寸图片。 -
视口设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">。
margin和padding的区别是什么？如何选择使用？
-
margin：元素外部的空白区域，用于控制元素与其他元素的间距，不影响元素自身大小。 -
padding：元素内部的空白区域，用于控制内容与边框的间距，会增加元素的总尺寸（除非设置box-sizing: border-box）。选择原则：① 分隔元素用
margin（如两个 div 之间的距离）；② 调整内容位置用padding（如 div 内部文字与边框的距离）。
-
什么是 CSS Sprites（雪碧图）？它的优缺点是什么？
CSS Sprites 指将多个小图标合并为一张图片，通过
background-position显示不同图标。优点：① 减少 HTTP 请求次数（一张图替代多张），提升加载速度；② 减少图片体积（合并后总容量更小）。
缺点：① 维护成本高（新增图标需重新制作雪碧图）；② 定位精度要求高（需准确计算
background-position值）。 -
CSS 中
rem、em、px、vw、vh单位的区别是什么？
-
px：固定像素单位，不随设备或字体大小变化。 -
em：相对单位，相对于父元素的字体大小（如父元素font-size: 16px，1em = 16px）。 -
rem：相对单位，相对于根元素（html）的字体大小（如html { font-size: 16px; }，1rem = 16px）。 -
vw/vh：视口单位，1vw = 视口宽度的 1%，1vh = 视口高度的 1%（适合响应式布局）。
-
如何禁止用户选择网页中的文本？
通过 CSS 的
user-select属性控制：
.no-select {-webkit-user-select: none; /\* Chrome、Safari \*/-moz-user-select: none; /\* Firefox \*/-ms-user-select: none; /\* IE/Edge \*/user-select: none; /\* 标准语法 \*/}
该属性值为none时，用户无法选中元素内的文本，常用于按钮、图标等不需要复制的元素。
- 什么是回流（Reflow）和重绘（Repaint）？如何减少回流和重绘？
-
回流：元素布局（位置、尺寸）改变时，浏览器重新计算布局的过程（开销大）。
-
重绘：元素样式（如颜色、背景）改变但不影响布局时，浏览器重新绘制的过程（开销较小）。
减少方法：① 合并样式修改（如用
class替换多个style属性）；② 操作脱离文档流的元素（如display: none）；③ 使用transform/opacity实现动画（触发合成层，无回流）；④ 避免频繁读取offsetWidth等布局属性（缓存结果）。
- 如何实现文字溢出显示省略号？
- 单行文本：
.single-line {white-space: nowrap; /\* 禁止换行 \*/overflow: hidden; /\* 隐藏溢出内容 \*/text-overflow: ellipsis; /\* 显示省略号 \*/width: 200px; /\* 需指定宽度 \*/}
- 多行文本（WebKit 内核浏览器）：
.multi-line {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /\* 显示3行 \*/overflow: hidden;width: 200px;}