2025 年最新 CSS 面试题 100 道及详细答案解析

简介: 本文整理了100道CSS面试题及答案,涵盖基础概念、选择器与特性、布局(如Flexbox和Grid)、动画与过渡、响应式设计等核心内容。从CSS的基础知识如盒模型、`box-sizing`属性,到高级应用如伪类选择器(LVHA、CSS3新增伪类)和视觉格式化模型(BFC),帮助开发者系统掌握CSS技能。此外,还涉及浏览器兼容性、CSS优化及预处理器等内容,为前端工程师提供全面的学习资源。资源可从[此链接](https://pan.quark.cn/s/50438c9ee7c0)获取。

我将从基础概念、选择器与特性、布局、动画与过渡、响应式设计等方面,为你呈现100道CSS面试题及答案,助你系统掌握CSS知识。

100道CSS面试题及答案

一、基础概念

1. 什么是CSS?

CSS(层叠样式表,Cascading Style Sheets)是一种用于描述HTML或XML(包括SVG、MathML等)文档样式的语言。通过CSS,开发者能够控制网页元素的字体、颜色、布局、间距等外观属性,从而创建出美观且用户体验良好的页面。

2. CSS的引入方式有哪些?

  • 内联样式(Inline Styles):直接在HTML元素的style属性中定义样式。例如:<p style="color: red; font-size: 16px;">这是一段红色16像素字体的文本</p>。这种方式优先级最高,但不利于样式的复用和维护,仅适用于对个别元素进行临时样式调整。
  • 内部样式表(Internal Style Sheet):在HTML文档的<head>标签内,使用<style>标签定义样式。例如:
<head>
  <style>
    p {
    
      color: blue;
      font-weight: bold;
    }
  </style>
</head>
AI 代码解读

这种方式对当前页面有效,可控制多个相同元素的样式,但在多个页面复用样式时不方便。

  • 外部样式表(External Style Sheet):将CSS代码写在独立的.css文件中,然后通过HTML的<link>标签引入。例如:<link rel="stylesheet" href="styles.css">。这是最常用的方式,能实现样式的复用,便于维护和管理,多个页面可引用同一个CSS文件。
  • @import规则:在CSS文件中使用@import规则导入其他CSS文件。例如:@import url('another-styles.css');。通常放在CSS文件开头,但它的加载顺序可能导致一些问题,且兼容性不如<link>标签,不推荐大量使用。

3. 标准的CSS盒子模型是怎样的?低版本IE的盒子模型有何不同?

标准的CSS盒子模型由内容区域(content)、内边距(padding)、边框(border)和外边距(margin)组成。在标准盒子模型中,widthheight属性仅指内容区域的宽度和高度,元素实际占据的宽度 = width + padding + border + margin,高度同理。例如:

.box {
   
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}
AI 代码解读

.box元素实际占据的宽度为200 + 10*2 + 5*2 + 20*2 = 270px,高度为100 + 10*2 + 5*2 + 20*2 = 170px

低版本IE(如IE6及以下)使用的是怪异盒模型(Quirks Mode Box Model)。在怪异盒模型中,widthheight属性包含了内容区域、内边距和边框的宽度和高度,即元素实际占据的宽度 = width + margin,高度 = height + margin。例如同样的代码在低版本IE中,.box元素实际占据的宽度为200 + 20*2 = 240px,高度为100 + 20*2 = 140px。可以通过box-sizing属性来切换盒模型,现代浏览器默认使用标准盒模型,若要使用怪异盒模型,可设置box-sizing: border-box;

4. box-sizing属性有什么作用?

box-sizing属性用于控制元素盒子模型的解析模式,有两个主要取值:

  • content-box:这是默认值,采用标准盒模型。元素的widthheight仅表示内容区域的大小,内边距(padding)、边框(border)和外边距(margin)会在内容区域之外增加元素的实际大小。
  • border-box:采用怪异盒模型。元素的widthheight包含了内容区域、内边距和边框的大小,即设置的widthheight是元素最终呈现的大小,内边距和边框不会增加元素的额外尺寸。例如:
/* 使用content-box */
.box1 {
   
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box;
}
/* 使用border-box */
.box2 {
   
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}
AI 代码解读

.box1实际宽度为200 + 10*2 + 5*2 = 230px.box2实际宽度为200px。在进行复杂布局时,box-sizing: border-box能使元素尺寸计算更直观,方便控制布局。

5. CSS选择器有哪些?请说明其优先级规则。

常见的CSS选择器包括:

  • 元素选择器(Element Selector):通过HTML元素名称选择元素,如p选择所有<p>段落元素,div选择所有<div>元素。
  • 类选择器(Class Selector):以点(.)开头,后跟类名,选择具有指定类名的元素。例如,.highlight可选择所有class="highlight"的元素。
  • ID选择器(ID Selector):以井号(#)开头,后跟ID名,选择具有指定ID的唯一元素。例如,#main-content选择id="main-content"的元素,ID在文档中应唯一。
  • 属性选择器(Attribute Selector):根据元素的属性及属性值来选择元素。例如,[type="text"]选择所有type属性值为text的元素,如<input type="text">[href^="http"]选择href属性值以http开头的元素。
  • 伪类选择器(Pseudo-class Selector):用于选择处于特定状态的元素,如:hover表示鼠标悬停在元素上时的状态,:active表示元素被激活(如按钮被点击)时的状态,:first-child选择父元素的第一个子元素。
  • 伪元素选择器(Pseudo-element Selector):用于选择元素的特定部分,如::before在元素内容之前创建一个虚拟元素,::after在元素内容之后创建一个虚拟元素,::first-line选择元素的第一行文本。
  • 组合选择器(Combinator Selector)
    • 后代选择器(Descendant Selector):使用空格分隔,选择某个元素的所有后代元素。例如,div p选择<div>元素内的所有<p>元素,无论嵌套多深。
    • 子代选择器(Child Selector):使用大于号(>)分隔,选择某个元素的直接子元素。例如,div > p仅选择<div>元素的直接子元素<p>,不包括孙辈及更深层次的<p>元素。
    • 相邻兄弟选择器(Adjacent Sibling Selector):使用加号(+)分隔,选择紧接在某个元素之后的相邻兄弟元素。例如,h2 + p选择紧跟在<h2>元素之后的<p>元素。
    • 通用兄弟选择器(General Sibling Selector):使用波浪号(~)分隔,选择在某个元素之后的所有兄弟元素。例如,h2 ~ p选择<h2>元素之后的所有<p>兄弟元素,无论它们之间间隔多少其他元素。

CSS选择器的优先级规则(从高到低)如下:

  1. 内联样式(Inline Styles):直接写在HTML元素style属性中的样式,优先级最高,权值为1,0,0,0。
  2. ID选择器(ID Selectors):权值为0,1,0,0。
  3. 类选择器(Class Selectors)属性选择器(Attribute Selectors)伪类选择器(Pseudo-class Selectors):权值均为0,0,1,0。
  4. 元素选择器(Element Selectors)伪元素选择器(Pseudo-element Selectors):权值均为0,0,0,1。
  5. 通配符选择器(Universal Selector)(*关系选择器(如后代选择器、子代选择器等)继承的样式:权值最低,通配符选择器权值为0,0,0,0,关系选择器不增加权值,继承样式没有权值。

当多个选择器匹配同一个元素且样式冲突时,优先级高的选择器对应的样式将生效。若优先级相同,则后定义的样式覆盖先定义的样式。例如:

/* ID选择器,权值0,1,0,0 */
#my-element {
   
  color: red;
}
/* 类选择器,权值0,0,1,0 */
.my-class {
   
  color: blue;
}
/* 元素选择器,权值0,0,0,1 */
p {
   
  color: green;
}
AI 代码解读

如果一个<p>元素同时具有id="my - element"class="my - class",它的文本颜色将是红色,因为ID选择器优先级高于类选择器和元素选择器。

6. CSS中哪些属性可以继承?

可继承的CSS属性主要与文本相关,常见的有:

  • 字体相关属性font-family(字体系列)、font-size(字体大小)、font-weight(字体粗细)、font-style(字体样式,如斜体)、font-variant(字体变体,如小型大写字母)。例如,设置<body>元素的font-family: Arial, sans-serif;,其所有后代元素若未单独设置font-family,将继承该字体。
  • 文本排版属性color(文本颜色)、text-align(文本对齐方式)、text-indent(首行缩进)、line-height(行高)、word-spacing(单词间距)、letter-spacing(字母间距)。如在<body>上设置color: #333;,页面内所有文本元素(<p><h1> - <h6>等)的文本颜色若未特别指定,将继承该颜色。
  • 列表相关属性list-style-type(列表项标记类型,如圆点、数字等)、list-style-image(列表项使用的图像)、list-style-position(列表项标记的位置)。当在父元素(如<ul><ol>)上设置这些属性,其子列表项(<li>)会继承。

不可继承的属性通常与布局和盒模型相关,如widthheightmarginpaddingborderdisplayposition等。例如,<div>元素设置的width不会被其内部的<p>元素继承,<p>元素需单独设置width属性来确定自身宽度。

7. 关于伪类LVHA的解释?

LVHA是指CSS中4种常见的链接伪类,按照特定顺序使用时能确保链接在不同状态下有正确的样式表现,它们分别是:

  • :link:选择未被访问过的链接。例如:
a:link {
   
  color: blue;
  text-decoration: none;
}
AI 代码解读

此时,未访问过的链接文本显示为蓝色且无下划线。

  • :visited:选择已被访问过的链接。例如:
a:visited {
   
  color: purple;
}
AI 代码解读

已访问过的链接文本会显示为紫色,由于隐私原因,现代浏览器对:visited能设置的样式属性有限,主要是colorbackground - colorborder - color(及其相关的简写属性)和outline等。

  • :hover:当鼠标悬停在元素上时匹配。不仅适用于链接,也可用于其他元素。例如:
a:hover {
   
  text-decoration: underline;
}
AI 代码解读

鼠标悬停在链接上时,链接会显示下划线。对于按钮等元素也可利用:hover添加交互效果,如改变背景颜色等。

  • :active:在元素被激活(如链接被点击的瞬间、按钮被按下时)匹配。例如:
a:active {
   
  color: red;
}
AI 代码解读

当链接被点击的瞬间,文本颜色变为红色。

为保证这4种伪类按预期工作,应按照a:link -> a:visited -> a:hover -> a:active的顺序书写样式,即所谓的“爱恨原则(LoVe/HAte)”。若不按此顺序,可能导致某些状态下样式不生效,如将a:hover写在a:link之前,那么:hover样式可能在未访问链接时就无法正常显示。

8. CSS3新增伪类有哪些?

CSS3新增了许多实用的伪类,丰富了样式选择和交互效果,常见的有:

  • 结构伪类
    • :first - of - type:选择父元素中指定类型的第一个子元素。例如,p:first - of - type选择每个父元素中的第一个<p>元素。在一个包含多个段落和其他元素的<div>中,它能准确选中第一个<p>
    • :last - of - type:选择父元素中指定类型的最后一个子元素。如p:last - of - type选择每个父元素中的最后一个<p>元素。
    • :only - of - type:选择父元素中唯一的指定类型子元素。若一个<div>中只有一个<p>元素,p:only - of - type会选中它;若有多个<p>元素,则不匹配。
    • :only - child:选择父元素中唯一的子元素。例如,<div>中只有一个子元素(无论什么类型)时,该子元素会被div > :only - child选中。
    • :nth - child(n):选择父元素中第n个孩子元素,n可以是数字、关键字(如even表示偶数,odd表示奇数)或公式(如2n + 1表示奇数位置的元素)。例如,li:nth - child(3)选择每个父元素中的第3个<li>元素;li:nth - child(even)选择偶数位置的<li>元素。
    • :nth - last - child(n):从父元素的最后一个子元素开始计数,选择第n个孩子元素。与:nth - child(n)类似,只是计数方向相反。
    • :nth - of - type(n):选择父元素中指定类型的第n个元素。与:nth - child(n)不同,它只针对指定类型的元素计数。例如,p:nth - of - type(2)选择每个父元素中第2个<p>元素,忽略其他类型元素的位置。
    • :nth - last - of - type(n):从父元素中指定类型的最后一个元素开始计数,选择第n个元素。
  • UI元素状态伪类
    • :enabled:选择启用状态的表单元素,如<input type="text" enabled>input:enabled可选中这类启用的输入框,可用于设置启用状态下表单元素的样式。
    • :disabled:选择禁用状态的表单元素,<input type="text" disabled>input:disabled能选中它,常用于设置禁用状态下元素的样式,如变灰、不可点击的视觉效果。
    • :checked:选择被选中的表单元素,如<input type="checkbox" checked><input type="radio" checked>input:checked可选中这类被勾选的复选框或单选框,可用于实现选中状态下的样式变化,如改变背景颜色、显示勾选图标等。
    • :indeterminate:选择处于不确定状态的表单元素,通常用于复选框组,当一组复选框部分被选中时,该组对应的<input type="checkbox" indeterminate>(一般通过JavaScript设置该属性)会被input:indeterminate选中,可设置其特殊样式。
  • 其他伪类
    • :not(selector):选择不符合指定选择器的元素。例如,div:not(.special)选择所有类名不是special<div>元素,可用于排除特定元素进行样式设置。
    • :target:选择当前URL中锚点指向的元素。例如,页面中有<a href="#section1">跳转到Section 1</a><div id="section1">这是Section 1的内容</div>,当用户点击链接跳

CSS 面试题,CSS 选择器,CSS 布局,响应式设计,Flexbox,Grid, 动画与过渡,盒模型,浮动与清除浮动,定位 (position),CSS 优化,浏览器兼容性,预处理器,BFC, 视觉格式化模型



更多面试资料,点击获取:
https://pan.quark.cn/s/50438c9ee7c0


目录
打赏
0
4
5
0
124
分享
相关文章
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
118 4
Java Redis 面试题集锦 常见高频面试题目及解析
本文总结了Redis在Java中的核心面试题,包括数据类型操作、单线程高性能原理、键过期策略及分布式锁实现等关键内容。通过Jedis代码示例展示了String、List等数据类型的操作方法,讲解了惰性删除和定期删除相结合的过期策略,并提供了Spring Boot配置Redis过期时间的方案。文章还探讨了缓存穿透、雪崩等问题解决方案,以及基于Redis的分布式锁实现,帮助开发者全面掌握Redis在Java应用中的实践要点。
112 6
应届生面试高频 Java 基础问题及详细答案解析
摘要: Java数据类型分为基本类型(如int、float等)和引用类型(如类、数组)。final可修饰类、方法和变量,使其不可继承、重写或修改。static用于类级别的变量和方法,共享于所有实例。&quot;==&quot;比较基本类型的值或引用类型的地址,而equals比较对象内容(需重写)。Java只有值传递,对于引用类型传递的是地址副本。String对象不可变,拼接操作会创建新对象而非修改原对象。Java 10的var支持类型推断,Java 16的Record提供不可变类简化。
59 0
应届生面试高频 Java 基础问题及实操示例解析
本文总结了Java基础面试中的高频考点,包括数据类型分类、final修饰符的三种用途、static关键字特性、==与equals的区别、Java只有值传递的特性、String的不可变性、Error与Exception的差异、程序初始化顺序规则,以及IO流的字节流/字符流分类。每个问题都配有简明定义和典型示例,如用final修饰变量示例、static方法调用限制说明等,帮助应聘者快速掌握核心概念和实际应用场景。
42 0
2025 年最新 Java 面试从基础到微服务实战指南全解析
《Java面试实战指南:高并发与微服务架构解析》 本文针对Java开发者提供2025版面试技术要点,涵盖高并发电商系统设计、微服务架构实现及性能优化方案。核心内容包括:1)基于Spring Cloud和云原生技术的系统架构设计;2)JWT认证、Seata分布式事务等核心模块代码实现;3)数据库查询优化与高并发处理方案,响应时间从500ms优化至80ms;4)微服务调用可靠性保障方案。文章通过实战案例展现Java最新技术栈(Java 17/Spring Boot 3.2)的应用.
136 9
2025 最新史上最全 Java 面试题独家整理带详细答案及解析
本文从Java基础、面向对象、多线程与并发等方面详细解析常见面试题及答案,并结合实际应用帮助理解。内容涵盖基本数据类型、自动装箱拆箱、String类区别,面向对象三大特性(封装、继承、多态),线程创建与安全问题解决方法,以及集合框架如ArrayList与LinkedList的对比和HashMap工作原理。适合准备面试或深入学习Java的开发者参考。附代码获取链接:[点此下载](https://pan.quark.cn/s/14fcf913bae6)。
238 48
Java 集合容器常见面试题及详细解析
本文全面解析Java集合框架,涵盖基础概念、常见接口与类的特点及区别、底层数据结构、线程安全等内容。通过实例讲解List(如ArrayList、LinkedList)、Set(如HashSet、TreeSet)、Map(如HashMap、TreeMap)等核心组件,帮助读者深入理解集合容器的使用场景与性能优化。适合准备面试或提升开发技能的开发者阅读。
44 0
Java 集合篇面试题全面总结及答案解析
本文总结了Java集合框架的核心概念、常见集合类的特性与应用场景,以及开发中可能遇到的问题与解决方案。内容涵盖集合框架的基础接口(如Collection、Set、List、Map)、泛型的优点、线程安全集合类(如ConcurrentHashMap、CopyOnWriteArrayList)、常见集合类的区别(如ArrayList与LinkedList、HashMap与HashTable)等。此外,还详细介绍了如何实现LRU缓存、FIFO队列、优先级队列及栈等数据结构,并提供了相关代码示例。通过本文,读者可以全面掌握Java集合相关的面试知识点及其实际应用技巧。
97 1
2025 校招必看:Java 开发面试核心知识点深度解析及最新笔面试题汇总
本文针对2025校招Java开发面试,系统梳理了Java基础、集合框架、多线程并发、JVM等核心知识点,并附带最新笔面试题。内容涵盖封装、继承、多态、异常处理、集合类使用、线程同步机制、JVM内存模型及垃圾回收算法等。同时深入探讨Spring、数据库(MySQL索引优化、Redis持久化)、分布式系统(CAP理论、分布式事务)等相关知识。通过理论结合实例解析,帮助考生全面掌握面试要点,提升实战能力,为成功拿下Offer奠定坚实基础。
205 2
2025 年 Java 面试必备最常见 200 + 面试题及答案解析
这是一份针对Java面试的综合技术方案与应用实例文档,涵盖Java基础(JDK/JRE、字符串、IO流)、容器(ArrayList/LinkedList、HashMap)、多线程(线程创建、同步、线程池)、数据库(MySQL索引、Redis缓存穿透)及Spring框架(IOC容器、热部署)等核心模块。通过详细解析常见面试题,帮助读者深入理解并掌握Java核心技术,为应对面试提供全面指导。此外,还涉及反射、设计模式、JVM调优等进阶内容,助力开发者全面提升技能。代码示例可从提供的链接下载。
228 6

热门文章

最新文章

  • 1
    云计算运维工程师面试技巧
    941
  • 2
    【机器学习】面试问答:PCA算法介绍?PCA算法过程?PCA为什么要中心化处理?PCA为什么要做正交变化?PCA与线性判别分析LDA降维的区别?
    338
  • 3
    【机器学习】面试问答:决策树如何进行剪枝?剪枝的方法有哪些?
    245
  • 4
    【机器学习】SVM面试题:简单介绍一下SVM?支持向量机SVM、逻辑回归LR、决策树DT的直观对比和理论对比,该如何选择?SVM为什么采用间隔最大化?为什么要将求解SVM的原始问题转换为其对偶问题?
    224
  • 5
    【深度学习】Pytorch面试题:什么是 PyTorch?PyTorch 的基本要素是什么?Conv1d、Conv2d 和 Conv3d 有什么区别?
    755
  • 6
    【深度学习】TensorFlow面试题:什么是TensorFlow?你对张量了解多少?TensorFlow有什么优势?TensorFlow比PyTorch有什么不同?该如何选择?
    614
  • 7
    【机器学习】面试题:LSTM长短期记忆网络的理解?LSTM是怎么解决梯度消失的问题的?还有哪些其它的解决梯度消失或梯度爆炸的方法?
    520
  • 8
    【数据挖掘】XGBoost面试题:与GBDT的区别?为什么使用泰勒二阶展开?为什么可以并行训练?为什么快?防止过拟合的方法?如何处理缺失值?
    585
  • 9
    【数据挖掘】 GBDT面试题:其中基分类器CART回归树,节点的分裂标准是什么?与RF的区别?与XGB的区别?
    199
  • 10
    【机器学习】过拟合和欠拟合怎么判断,如何解决?(面试回答)
    1042
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等

    登录插画

    登录以查看您的控制台资源

    管理云资源
    状态一览
    快捷访问