2025年CSS面试题总结[通俗易懂]

前面的话

小柒前面总结了与HTML相关的面试题，这篇文章总结CSS相关面试题。

题目

(1) 盒子模型的理解？

盒模型分为两种：标准模式与混杂模式（IE模式）

标准盒子模型

IE盒子模型

一般的我们所说的width、height都是指标准盒子模型下的width(也就是content)。

(2) CSS 中哪些属性可以同父元素继承 ?

字体系列：font-family，font-size，font-style，font-weight，font-stretch，font-size-adjust；

列表相关：list-style，list-style-image，list-style-position，list-style-type，list-style-color；

文本系列：text-indent，text-align，line-height，word-spaceing，letter-spacing，text-transform，direction，color；

元素可见性：visibility；

表格布局：caption-side，border-collapse，border-spacing，empty-cells，table-layout；

光标属性：cursor；

(3) box-sizing 常用的属性有哪些？分别有什么作用？

box-sizing用于告诉浏览器如何计算一个元素总宽度和总高度。

属性：content-box、 border-box、inherit

box-sizing：content-box
表示标准盒模型，width = content，总宽度 = content+ padding+border

box-sizing: border-box
表示IE盒模型，总宽度 = width = content+ padding+border

(4) 页面导入样式时，使用 link 和 @import 有什么区别？

link是XHML标签，除了能加载css文件，还可以定义rel连接属性；@import只能加载css

link标签引入的css文件被同时加载；@import引入css将在页面加载完毕之后被加载

link无兼容性问题，@import只用IE5以上能识别

总的来说link标签优于@import标签。

(5) a标签的4个伪类样式的正确顺序是怎样的？

正确的伪类样式的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

(6) 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法？

如果一个块级元素没有设置height，那么其高度由子元素撑开，如果子元素使用了浮动，脱离了标准的文档流，那么父元素的高度将不能被其撑开。表现出高度塌陷的现象。

这时我们要避免这种情况发生，就需要清除浮动, 就算子元素浮动了，其父元素也不出现高度塌陷现象。

清除浮动的方式：

父级元素定义height。但这样定死的高度，往往不是我们想要的。

父级结尾处添加一个空div,设置css样式clear:both。原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度。

父级定义伪元素:after和zoom(推荐使用)。原理：元素生成伪元素的作用和效果相当于方法2中的原理，（使用伪元素生成一个看不见的块级元素，并且设置clear:both样式）但是IE8以上和非IE浏览器才支持:after，zoom(IE专有属性)可解决ie6,ie7浮动问题

父级div添加css属性：overflow:hidden

(7) position 、float 和 display 的取值和各自的意思和用法

position 属性取值：static(默认)、relative(处于文档流)、absolute（脱离文档流）、fixed（脱离文档流）、inherit
注意： z-index只对脱离文档流的元素有效

float：left (或 right)，向左（或右）浮动。（脱离文档流）

display 属性取值：none、inline、inline-block、block、table 相关属性值、flex、inherit。

(8) css3的相关动画属性?

CSS3动画三兄弟：transition、transform、animation。

(9) css文件有几种引入方式？

外链式（link引入）

内联式

行内式

@import引入

(10) CSS Sprite 是什么，谈谈这个技术的优缺点。

CSS Sprite将多张图片合并在一张图上。

优点：

利用CSS Sprite 能很好的减少网页的请求次数，提高页面的性能

能减少图片总字节

缺点：

合并图片时，要把多张图片有序合理的合并在一张图上，制作起来比较麻烦

(11) 浏览器标准模式和怪异模式之间的区别是什么？

标准模式：浏览器按W3C标准解析执行代码；

怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

(12) 如何解决多个元素重叠问题？

使用z-index属性可以设置元素的层叠顺序,适用于定位元素。

(13) CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？新增伪类有那些？

id 选择器（ #myid）

类选择器（.myclassname）

标签选择器（div, h1, p）

相邻选择器（h1 + p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（ * ）

属性选择器（a[rel = “external”]）

伪类选择器（a: hover, li: nth – child）

优先级：

优先级为: !important > id > class > tag , important 比内联优先级高

优先级就近原则，同权重情况下样式定义最近者为准;

(14) 为什么要初始化 CSS 样式 ?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化，往往会出现浏览器之间的页面显示出现差异。

(15) 说说你对边距折叠的理解?

外边距折叠（margin塌陷）：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）

什么时候会造成margin塌陷？

相邻的元素都在普通流中。

相邻的元素之间没有其他非空内容隔开

如何解决margin塌陷？

浮动元素、inline-block元素、绝对定位元素不会与垂直方向上的其他元素造成margin塌陷

创建BFC（块级格式化上下文）的元素，不会造成margin塌陷。

(16) 何时应当时用 padding 和 margin ？

margin 是用来隔开元素与元素的间距；

padding 是用来隔开元素与内容的间隔，让内容（文字）与（包裹）元素之间有一段距离。

(17) ::before 和 :before 中双冒号和单冒号有什么区别？

起初，伪元素是用:表示的，但在css3中，伪元素的语法被修改为双冒号。这里的::before 和 :before表示的意思一样，都是伪元素。放在主体内容之前作为一个子元素，并不才能在dom之中，只存在页面之中。

一般:表示伪类，比如:hover等。

(18) CSS 里的 visibility 属性有个 collapse 属性值？在不同浏览器下有什么区别

当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局，被行或列占据的空间会留给其他内容使用

在Chrome中，如果此值在非表格元素上使用，与hidden值没有什么区别。

在Firefox、Opera和IE中，如果此值在非表格元素上使用，与display:none没有什么区别。

(19) 用 position: absolute 跟用 float 有什么区别吗？

都是脱离标准流。position: absolute定位时，可以精准的将元素放在各个位置；而float只能向左、右两侧浮动。

各自都有自己的优点。在菜单栏，或者一些图标的横向排列时，一个 float 就解决了，而且每个元素之间不会有任何间距(所以可以用 float 消除元素间的距离)；

(20) line-height: 150%与line-height: 1.5的区别。

 

        父元素内容

        

            子元素


            line-height问题

line-height: 150% : 父元素先根据自身的字体计算出行高：16*150% = 24px。然后子元素继承这个行高。

line-height: 1.5：子元素根据自己的字体乘以1.5来计算行高：30 * 1.5 = 45px

(21) 任意高度元素的展开收起动画

使用height + overflow：hidden实现比较生硬。好的方式使用max-height

.element { 

   
max-height: 0;
overflow:hidden;
transition: height .25s;

}

.element:active { 

   
max-height: 666px;

}

(22) 轻松实现hover图片变成另外一张图片

img:hover { 

   
content: url(xxx.jpg);

}