25年高频【前端面试题】（CSS篇）

最新推荐文章于 2025-10-09 11:34:21 发布

原创最新推荐文章于 2025-10-09 11:34:21 发布 · 839 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #面试 #职场和发展 #java #职场发展

Java面试收集专栏收录该内容

19 篇文章

订阅专栏

1.CSS选择器及其优先级

对于选择器的优先级：

标签选择器、伪元素选择器：1；
类选择器、伪类选择器、属性选择器：10；
id 选择器：100；
内联样式：1000

2.隐藏元素的方法有哪些

display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
transform: scale(0,0) ：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

3.伪元素和伪类选择器的区别和作用

伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。

css
 体验AI代码助手
 代码解读
复制代码
p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类选择器：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。
```
css
 体验AI代码助手
 代码解读
复制代码
a:hover {color: #FF00FF}
p:first-child {color: red}
```

4.对盒模型的理解

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

标准盒模型的width和height属性的范围只包含了content，
IE盒模型的width和height属性的范围包含了border、padding和content。

5.为什么有时候用translate来改变位置而不是定位？

transform:translate(x,y)文档上面提到过transform只会引起合成线程的最后一步合成，并不会重新生成layout树，也就是不会引起reflow。

6.对 CSSSprites 的理解

也就是雪碧图，把所有的小图标放在一个大图里面，这样的话请求资源只要请求一张大图就行了。

7.什么是物理像素，逻辑像素和像素密度

物理像素：就是真实的手机像素

逻辑像素：简单的理解为css像素

在高倍屏上，1逻辑像素等于多个物理像素

8.单行、多行文本溢出隐藏

单行文本溢出

css
 体验AI代码助手
 代码解读
复制代码
overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

多行文本溢出

css
 体验AI代码助手
 代码解读
复制代码
overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

9.如何判断元素是否到达可视区域

以图片显示为例：

window.innerHeight 是浏览器可视区的高度；
document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

10.定位与浮动

给父级div定义height属性
最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
使用 :after 伪元素。

11.对BFC的理解，如何创建BFC

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

创建BFC的条件：

元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll；

BFC的作用：

解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。

12.什么是margin重叠问题？如何解决？

两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。

触发BFC就好了。

13. 元素的层叠顺序

背景和边框：建立当前层叠上下文元素的背景和边框。
负的z-index：当前层叠上下文中，z-index属性值为负的元素。
块级盒：文档流内非行内级非定位后代元素。
浮动盒：非定位浮动元素。
行内盒：文档流内行内级非定位后代元素。
z-index:0：层叠级数为0的定位元素。
正z-index：z-index属性值为正的定位元素。

14.画一条0.5px的线

采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：
```
css
 体验AI代码助手
 代码解读
复制代码
transform: scale(1,0.5);
```

采用meta viewport的方式

css
 体验AI代码助手
 代码解读
复制代码
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

同理画一条1px的线在2倍屏上

简单来说就是用伪元素+transform

css
 体验AI代码助手
 代码解读
复制代码
.scale-1px::after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}