20道CSS相关前端面试题及答案

CSS 相关面试题及答案

1. 什么是 CSS？它的主要作用是什么？

   CSS（层叠样式表，Cascading Style Sheets）是用于描述 HTML 或 XML 文档呈现方式的语言。

   主要作用：① 控制网页的布局和外观（如颜色、字体、间距）；② 实现内容与样式分离，提高代码复用性和可维护性；③ 支持响应式设计，使网页在不同设备上有良好显示效果。

2. 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，前者优先级更高。

1. 什么是 CSS 盒子模型？标准盒子模型和 IE 盒子模型有何区别？

   盒子模型是 CSS 布局的基础，由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。

   区别：① 标准盒子模型：width和height仅包含内容区（content）；② IE 盒子模型（怪异模式）：width和height包含内容区、内边距和边框（content + padding + border）。可通过box-sizing切换：content-box（标准）、border-box（IE）。

2. 如何清除浮动？请列举至少 3 种方法。

   浮动元素会脱离文档流导致父元素高度坍塌，清除方法：

• 父元素添加overflow: hidden（触发 BFC，自动包裹浮动元素）。

• 父元素末尾添加空标签并设置clear: both（如<div style="clear: both;"></div>）。

• 使用伪元素（推荐）：

.parent::after {

   content: "";

   display: block;

   clear: both;

}

• 父元素设置display: flow-root（CSS3 新增，触发 BFC 且无副作用）。

1. 什么是 BFC？如何触发 BFC？BFC 有哪些应用场景？

   BFC（块级格式化上下文）是一个独立的渲染区域，内部元素布局不受外部影响。

   触发方式：① overflow: hidden/auto/scroll；② float: left/right；③ position: absolute/fixed；④ display: flex/grid/inline-block；⑤ contain: layout。

   应用场景：① 清除浮动（避免父元素高度坍塌）；② 阻止 margin 重叠（如相邻元素垂直 margin 合并）；③ 防止元素被浮动元素覆盖。

2. 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（基线对齐）。

1. CSS 中position属性有哪些取值？各自的特点是什么？

• static（默认）：元素遵循正常文档流，top/left等属性无效。

• relative：相对自身原位置偏移，不脱离文档流，保留原占位。

• absolute：绝对定位，相对于最近的非static定位祖先元素偏移，脱离文档流，不保留原占位。

• fixed：固定定位，相对于浏览器视口偏移，脱离文档流，不随页面滚动移动。

• sticky：粘性定位，滚动到阈值前为relative，之后为fixed（如导航栏滚动时固定）。

1. 如何实现元素的垂直居中？请列举至少 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;。

1. display: none和visibility: hidden的区别是什么？

• 显示效果：两者均隐藏元素，但display: none会完全移除元素（不占据空间）；visibility: hidden仅隐藏元素，仍保留原空间。

• 继承性：display: none不继承，子元素也会被隐藏；visibility: hidden可继承，子元素设置visibility: visible可显示。

• 性能：display: none会触发回流和重绘；visibility: hidden仅触发重绘。

1. 什么是 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; }

1. 如何使用 CSS 实现一个三角形？请写出代码。

   利用 CSS 边框的梯形特性，将宽高设为 0，通过边框宽度和颜色控制三角形形状：

.triangle {

   width: 0;

   height: 0;

   /\* 上、右、下、左边框宽度，其中三边设为透明 \*/

   border-width: 0 50px 50px 50px;

   border-style: solid;

   border-color: transparent transparent #ff0000 transparent; /\* 底部为红色 \*/

}

（上述代码实现向下的红色三角形，调整边框宽度和颜色可改变方向和样式）

1. CSS 中的z-index属性有什么作用？使用时需要注意哪些问题？

   z-index用于控制元素的堆叠顺序（z 轴方向），值越大越靠上。

   注意事项：① 仅对定位元素（position非static）有效；② 父元素z-index会限制子元素（子元素无法超出父元素堆叠层级）；③ 相同z-index时，后定义的元素或定位元素（relative/absolute）堆叠在上。

2. 什么是 CSS 预处理器？常用的预处理器有哪些？它们的优势是什么？

   CSS 预处理器是扩展 CSS 功能的语言，需编译为普通 CSS 使用，支持变量、嵌套等特性。

   常用预处理器：Sass（Scss）、Less、Stylus。

   优势：① 变量（如$color: #333;）便于统一管理样式；② 嵌套语法减少代码冗余，结构更清晰；③ 混入（Mixin）复用代码（如兼容前缀）；④ 支持条件判断、循环等逻辑；⑤ 模块化拆分样式文件。

3. 如何实现响应式布局？请列举核心技术。

   响应式布局使网页在不同设备（手机、平板、电脑）上自适应显示，核心技术：

• 媒体查询（@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">。

1. margin和padding的区别是什么？如何选择使用？

• margin：元素外部的空白区域，用于控制元素与其他元素的间距，不影响元素自身大小。

• padding：元素内部的空白区域，用于控制内容与边框的间距，会增加元素的总尺寸（除非设置box-sizing: border-box）。

  选择原则：① 分隔元素用margin（如两个 div 之间的距离）；② 调整内容位置用padding（如 div 内部文字与边框的距离）。

1. 什么是 CSS Sprites（雪碧图）？它的优缺点是什么？

   CSS Sprites 指将多个小图标合并为一张图片，通过background-position显示不同图标。

   优点：① 减少 HTTP 请求次数（一张图替代多张），提升加载速度；② 减少图片体积（合并后总容量更小）。

   缺点：① 维护成本高（新增图标需重新制作雪碧图）；② 定位精度要求高（需准确计算background-position值）。

2. 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%（适合响应式布局）。

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时，用户无法选中元素内的文本，常用于按钮、图标等不需要复制的元素。

1. 什么是回流（Reflow）和重绘（Repaint）？如何减少回流和重绘？

• 回流：元素布局（位置、尺寸）改变时，浏览器重新计算布局的过程（开销大）。

• 重绘：元素样式（如颜色、背景）改变但不影响布局时，浏览器重新绘制的过程（开销较小）。

  减少方法：① 合并样式修改（如用class替换多个style属性）；② 操作脱离文档流的元素（如display: none）；③ 使用transform/opacity实现动画（触发合成层，无回流）；④ 避免频繁读取offsetWidth等布局属性（缓存结果）。

1. 如何实现文字溢出显示省略号？

• 单行文本：

.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;

}