《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。
文章目录
- 一、本文面试题目录
- 1. 什么是CSS？
- 2. CSS中有哪些不同的选择器类型？
- 3. 如何在HTML中引入CSS？
- 4. 解释一下CSS盒模型。
- 5. 什么是浮动（float），它有什么作用？
- 6. `position`属性有哪些值？
- 7. 解释`z-index`属性的作用。
- 8. 什么是CSS预处理器？举例说明。
- 9. CSS中的媒体查询是什么？
- 10. 解释响应式设计的概念。
- 11. `display`属性有哪些常见值？
- 12. 解释`flexbox`布局模型。
- 13. `grid`布局与`flexbox`有何不同？
- 14. 如何清除浮动？
- 15. 解释`em`和`rem`单位的区别。
- 16. CSS优先级是如何工作的？
- 17. 什么是BEM命名法？
- 18. 解释`@media`规则。
- 19. 如何使文本不换行？
- 20. `visibility`和`display`属性有什么区别？
- 二、140道面试题目录列表
一、本文面试题目录
1. 什么是CSS？
答：CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档外观和格式的语言。它允许开发者将内容与设计分离，提供了一种更高效、灵活的方式来控制网页的表现形式。
2. CSS中有哪些不同的选择器类型？
答：CSS提供了多种选择器类型：
- 标签选择器（如
p）：匹配所有指定类型的元素。 - 类选择器（如
.className）：通过类名来选择元素。 - ID选择器（如
#idName）：通过唯一ID选择单个元素。 - 属性选择器（如
[type="text"]）：基于元素的属性进行选择。 - 伪类选择器（如
:hover）：根据元素的状态选择元素。 - 伪元素选择器（如
::before）：在元素的内容之前插入生成的内容。
3. 如何在HTML中引入CSS？
答：可以通过三种方式引入CSS：
- 外部样式表：使用
<link rel="stylesheet" href="styles.css">标签链接到一个独立的CSS文件。 - 内部样式表：在
<style>标签内直接定义样式，通常位于HTML文档的<head>部分。 - 行内样式：直接在HTML元素上使用
style属性定义样式，例如<div style="color: blue;">.
4. 解释一下CSS盒模型。
答：CSS盒模型是围绕每个HTML元素的一个盒子，由四个部分组成：
- 内容区：包含实际内容的部分。
- 内边距（padding）：内容区与边框之间的空间。
- 边框（border）：围绕内边距的一条线。
- 外边距（margin）：边框之外的空间，用来分隔相邻元素。
5. 什么是浮动（float），它有什么作用？
答：浮动是一种布局技术，使元素脱离正常的文档流并尽可能地向左或向右移动，直到它的边缘碰到包含块或者另一个浮动元素的边缘。常用于创建多列布局或让文本环绕图片等。
6. position属性有哪些值？
答：
static：默认值，遵循正常文档流。relative：相对于其原始位置定位。absolute：相对于最近的已定位祖先元素定位；如果没有，则相对于初始包含块（通常是视口）。fixed：相对于浏览器窗口固定位置。sticky：结合了相对和固定的特性，在滚动到特定位置时固定不动。
7. 解释z-index属性的作用。
答：z-index决定了元素在Z轴上的堆叠顺序，数值越大越靠近用户。只有当元素被定位（即 position 值不是 static）时，z-index 才会生效。
8. 什么是CSS预处理器？举例说明。
答：CSS预处理器扩展了CSS的功能，提供了变量、嵌套规则等功能。常见的预处理器包括Sass、Less、Stylus等。例如，在Sass中可以这样定义变量：
$primary-color: #3498db;
body { color: $primary-color; }
9. CSS中的媒体查询是什么？
答：媒体查询允许根据设备特性（如宽度、高度、分辨率等）应用不同的样式规则，实现响应式设计。例如：
@media (max-width: 600px) {
body { background-color: lightblue; }
}
10. 解释响应式设计的概念。
答：响应式设计是一种设计理念，旨在确保网站能够在不同设备（如桌面电脑、平板电脑、手机）上都能提供良好的用户体验。这通常通过使用媒体查询、弹性网格布局、灵活的图像等技术实现。
| No. | 大剑师精品GIS教程推荐 |
|---|---|
| 0 | 地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】 |
| 1 | Openlayers 【入门教程】 - 【源代码+示例 300+】 |
| 2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
| 3 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
| 4 | Cesium 【入门教程】 - 【源代码+综合教程 200+】 |
| 5 | threejs【中文API】 - 【源代码+图文示例200+】 |
11. display属性有哪些常见值？
答：
block：元素作为块级元素显示。inline：元素作为行内元素显示。inline-block：元素既保持行内元素的特性又可以设置宽高。none：元素不显示，并且不占据任何空间。
12. 解释flexbox布局模型。
答：Flexbox是一种一维布局模型，适用于排列一行或一列中的项目。它简化了对齐、分布间距以及调整子元素大小的过程，非常适合创建动态布局。
13. grid布局与flexbox有何不同？
答：Flexbox专注于一维布局（行或列），而Grid支持二维布局（同时处理行和列）。Grid更适合复杂的页面布局，而Flexbox则更适合于简单的组件级布局。
14. 如何清除浮动？
答：常用的方法有：
- 使用
clear:both;在需要清除浮动影响的元素上。 - 对父元素设置
overflow:hidden;或overflow:auto;。
15. 解释em和rem单位的区别。
答：em 相对于父元素的字体大小，而 rem 相对于根元素（html）的字体大小。这意味着 rem 更加稳定，因为它总是参照根元素的字体大小。
16. CSS优先级是如何工作的？
答：CSS优先级按照以下顺序计算：
- 内联样式（直接写在HTML标签内的样式）
- ID选择器
- 类选择器、属性选择器和伪类
- 元素选择器和伪元素
17. 什么是BEM命名法？
答：BEM（Block Element Modifier）是一种命名约定，有助于组织CSS类名，使其更加清晰和易于维护。例如：
.block {}
.block__element {}
.block--modifier {}
18. 解释@media规则。
答：@media规则允许根据设备特性应用不同的样式规则。例如，针对屏幕宽度小于600px的设备应用特定样式：
@media (max-width: 600px) {
body { font-size: 14px; }
}
19. 如何使文本不换行？
答：使用 white-space: nowrap; 可以防止文本自动换行。例如：
.no-wrap { white-space: nowrap; }
20. visibility和display属性有什么区别？
答：visibility:hidden;隐藏元素但保留其占用的空间；display:none;不仅隐藏元素，还从文档流中移除该元素，因此不会占用任何空间。
这些题目涵盖了CSS的基础知识，希望能为你提供一个良好的起点。如果你有任何具体问题或需要更多题目，请随时告诉我！
二、140道面试题目录列表
| 文章序号 | CSS面试题140道 |
|---|---|
| 1 | CSS面试题及详细答案140道（1-20） |
| 2 | CSS面试题及详细答案140道（21-40） |
| 3 | CSS面试题及详细答案140道（41-60） |
| 4 | CSS面试题及详细答案140道（61-80） |
| 5 | CSS面试题及详细答案140道（81-100） |
| 6 | CSS面试题及详细答案140道（101-120） |
| 7 | CSS面试题及详细答案140道（121-140） |
扫一扫
29万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
