我将从基础概念、选择器与特性、布局、动画与过渡、响应式设计等方面,为你呈现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)组成。在标准盒子模型中,width
和height
属性仅指内容区域的宽度和高度,元素实际占据的宽度 = 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)。在怪异盒模型中,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;
}
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>
兄弟元素,无论它们之间间隔多少其他元素。
- 后代选择器(Descendant Selector):使用空格分隔,选择某个元素的所有后代元素。例如,
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;
}
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>
)会继承。
不可继承的属性通常与布局和盒模型相关,如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;
}
AI 代码解读
此时,未访问过的链接文本显示为蓝色且无下划线。
- :visited:选择已被访问过的链接。例如:
a:visited {
color: purple;
}
AI 代码解读
已访问过的链接文本会显示为紫色,由于隐私原因,现代浏览器对:visited
能设置的样式属性有限,主要是color
、background - color
、border - 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
个元素。
- :first - of - type:选择父元素中指定类型的第一个子元素。例如,
- 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
选中,可设置其特殊样式。
- :enabled:选择启用状态的表单元素,如
- 其他伪类:
- :not(selector):选择不符合指定选择器的元素。例如,
div:not(.special)
选择所有类名不是special
的<div>
元素,可用于排除特定元素进行样式设置。 - :target:选择当前URL中锚点指向的元素。例如,页面中有
<a href="#section1">跳转到Section 1</a>
和<div id="section1">这是Section 1的内容</div>
,当用户点击链接跳
- :not(selector):选择不符合指定选择器的元素。例如,
CSS 面试题,CSS 选择器,CSS 布局,响应式设计,Flexbox,Grid, 动画与过渡,盒模型,浮动与清除浮动,定位 (position),CSS 优化,浏览器兼容性,预处理器,BFC, 视觉格式化模型
更多面试资料,点击获取:
https://pan.quark.cn/s/50438c9ee7c0