我将从基础概念、选择器与特性、布局、动画与过渡、响应式设计等方面，为你呈现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>

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

外部样式表（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）组成。在标准盒子模型中，width和height属性仅指内容区域的宽度和高度，元素实际占据的宽度 = width + padding + border + margin，高度同理。例如：

.box {
   
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

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

低版本IE（如IE6及以下）使用的是怪异盒模型（Quirks Mode Box Model）。在怪异盒模型中，width和height属性包含了内容区域、内边距和边框的宽度和高度，即元素实际占据的宽度 = 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：这是默认值，采用标准盒模型。元素的width和height仅表示内容区域的大小，内边距（padding）、边框（border）和外边距（margin）会在内容区域之外增加元素的实际大小。
border-box：采用怪异盒模型。元素的width和height包含了内容区域、内边距和边框的大小，即设置的width和height是元素最终呈现的大小，内边距和边框不会增加元素的额外尺寸。例如：

/* 使用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;
}

.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选择器的优先级规则（从高到低）如下：

内联样式（Inline Styles）：直接写在HTML元素style属性中的样式，优先级最高，权值为1,0,0,0。
ID选择器（ID Selectors）：权值为0,1,0,0。
类选择器（Class Selectors）、属性选择器（Attribute Selectors）、伪类选择器（Pseudo-class Selectors）：权值均为0,0,1,0。
元素选择器（Element Selectors）、伪元素选择器（Pseudo-element Selectors）：权值均为0,0,0,1。
通配符选择器（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;
}

如果一个<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>）会继承。

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

7. 关于伪类LVHA的解释？

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

:link：选择未被访问过的链接。例如：

a:link {
   
  color: blue;
  text-decoration: none;
}

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

:visited：选择已被访问过的链接。例如：

a:visited {
   
  color: purple;
}

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

:hover：当鼠标悬停在元素上时匹配。不仅适用于链接，也可用于其他元素。例如：

a:hover {
   
  text-decoration: underline;
}

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

:active：在元素被激活（如链接被点击的瞬间、按钮被按下时）匹配。例如：

a:active {
   
  color: red;
}

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

为保证这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

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

100道CSS面试题及答案

一、基础概念

1. 什么是CSS？

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

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

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

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

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

7. 关于伪类LVHA的解释？

8. CSS3新增伪类有哪些？

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

100道CSS面试题及答案

一、基础概念

1. 什么是CSS？

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

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

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

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

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

7. 关于伪类LVHA的解释？

8. CSS3新增伪类有哪些？

热门文章

最新文章

相关课程

相关电子书

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