2024年前端CSS面试题

1.说说你对盒子模型的理解?

盒子模型是CSS中用于描述元素的一种模型，将元素看作一个盒子，盒子由边框（border）、内边距（padding）、内容（content）和外边距（margin）四部分组成。

边框是盒子周围的一条线，可以设置颜色、宽度等属性。

内边距是盒子内容和边框之间的空白区域，可以设置颜色、宽度等属性。

内容是盒子中显示的文字、图片等内容。

外边距是盒子和其他盒子之间的空白区域，可以设置颜色、宽度等属性。

盒子模型分为两种：标准盒模型和弹性盒模型。标准盒模型是CSS1中定义的盒子模型，默认情况下，所有元素都使用标准盒模型。弹性盒模型是CSS3中定义的盒子模型，可以根据元素的宽度或高度进行自适应。

2谈谈你对BFC的理解?

BFC（Block Formatting Context）是CSS中的一个概念，用于解决浮动元素之间相互影响的问题。BFC是指由一个或多个块元素组成的区域，这些块元素之间的浮动元素不会相互影响。

BFC可以通过以下两种方式创建：

使用display: block或display: flex或display: grid设置元素的display属性。

使用float: left或float: right设置元素的float属性。

BFC可以解决以下问题：

浮动元素之间的塌陷问题。

浮动元素与其他元素的边距和内边距的冲突问题。

浮动元素与表格的冲突问题。

3.什么是响应式设计?响应式设计的基本原理是什么?如何做?

响应式设计是指网站或应用程序能够根据不同的屏幕尺寸进行自动适配的设计。响应式设计的基本原理是使用CSS媒体查询来匹配不同屏幕尺寸的设备。

响应式设计的实现方法主要有以下两种：

使用CSS媒体查询来匹配不同屏幕尺寸的设备。

使用CSS flex布局或grid布局来实现自适应布局。

4.元素水平垂直居中的方法有哪些?如果元素不定宽高呢?

元素水平垂直居中的方法主要有以下几种：

使用text-align: center设置元素的水平居中。

使用margin-left: auto; margin-right: auto;设置元素的水平居中。

使用display: flex; justify-content: center;设置元素的水平居中。

使用display: grid; place-content: center;设置元素的水平居中。

使用line-height: height;设置元素的垂直居中。

使用margin-top: auto; margin-bottom: auto;设置元素的垂直居中。

使用display: flex; align-items: center;设置元素的垂直居中。

使用display: grid; place-content: center; align-items: center;设置元素的垂直居中。

如果元素不定宽高，可以使用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);来实现水平垂直居中。

5.如何实现两栏布局,右侧自适应?三栏布局中间自适应呢?

实现两栏布局，右侧自适应，可以使用以下方法：

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.left-column {
  width: 50%;
}

.right-column {
  width: 50%;
  flex: 1;
}

实现三栏布局，中间自适应，可以使用以下方法：

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.left-column {
  width: 25%;
}

.middle-column {
  width: 50%;
  flex: 1;
}

.right-column {
  width: 25%;
}

6.css选择器有哪些?优先级?哪些属性可以继承?

CSS选择器可以根据元素的属性、位置、类型等进行选择。CSS选择器主要有以下几种：

标签选择器：根据元素的标签名称进行选择。

类选择器：根据元素的类属性进行选择。

ID选择器：根据元素的ID属性进行选择。

组合选择器：根据多个选择器进行选择。

伪类选择器：根据元素的状态进行选择。

伪元素选择器：根据元素的结构进行选择。

CSS选择器的优先级由以下几点决定：

选择器的类型：ID选择器的优先级最高，其次是类选择器、标签选择器、组合选择器、伪类选择器、伪元素选择器。

选择器的顺序：在同一级别中，选择器出现的顺序越靠前，优先级越高。

!important声明：使用!important声明的样式将覆盖所有其他样式。

以下是CSS选择器的优先级：

选择器类型 优先级

ID选择器 1

类选择器 2

标签选择器 3

组合选择器 4

伪类选择器 5

伪元素选择器 6

CSS属性可以根据以下几点进行继承：

所有属性都可以由父元素向子元素继承，除非父元素设置了inherit属性或!important声明。

以下属性不可以继承：

定位相关属性：position、top、right、bottom、left、z-index

背景相关属性：background-image、background-repeat、background-position、background-color、background-clip、background-origin、background-size

边框相关属性：border-width、border-style、border-color、border-radius

外边距相关属性：margin-top、margin-right、margin-bottom、margin-left

内边距相关属性：padding-top、padding-right、padding-bottom、padding-left

文本相关属性：font-family、font-size、font-style、font-weight、font-variant、font-stretch、line-height、color

字体相关属性：letter-spacing、word-spacing、text-align、text-decoration、text-transform、text-indent、text-overflow、text-shadow

列表相关属性：list-style-type、list-style-position、list-style-image

表格相关属性：border-collapse、border-spacing

表格单元格相关属性：width、height、border-width、border-style、border-color、border-radius、margin、padding

7.css中，有哪些方式可以隐藏页面元素?区别?

CSS中，有以下几种方式可以隐藏页面元素：

使用display: none属性来完全隐藏元素。

使用visibility: hidden属性来隐藏元素，但元素仍会占用空间。

使用opacity: 0属性来使元素透明，从而达到隐藏的效果。

区别

display: none属性完全隐藏元素，元素不会占用空间。

visibility: hidden属性隐藏元素，但元素仍会占用空间。

opacity: 0属性使元素透明，从而达到隐藏的效果，但元素仍会占用空间。

8.如何实现单行/多行文本溢出的省略样式?

实现单行/多行文本溢出的省略样式，可以使用以下方法：

使用text-overflow: ellipsis属性来设置溢出文本的省略样式。

使用white-space: nowrap属性来禁止文本换行。

使用overflow: hidden属性来隐藏溢出文本。

9.cSS如何画一个三角形?原理是什么?

CSS可以使用border-bottom属性来画一个三角形。border-bottom属性可以设置边框的宽度、样式和颜色。

示例

.triangle {
  border-bottom: 10px solid red;
}

原理

border-bottom属性设置的边框宽度为10px，样式为solid，颜色为red。因此，将会在元素的底部绘制一个10px宽、红色的边框，从而形成一个三角形。

10.如何使用css完成视差滚动效果?

视差滚动效果是指当页面滚动时，背景图片或元素会以不同的速度滚动，从而产生一种深度或运动的错觉。

CSS可以使用transform属性和translate()函数来实现视差滚动效果。

示例

.bg {
  background-image: url("image.png");
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.element {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  .bg {
    transform: translate(-50%, -50%) scale(0.5);
  }

  .element {
    transform: translate(-50%, -50%) scale(0.7);
  }
}

效果

<div class="bg"></div>
<div class="element"></div>

原理

transform: translate(-50%, -50%)属性将元素沿着水平和垂直方向平移50%。scale(0.5)属性将元素缩小到原来的一半。

11.csS3新增了哪些新特性?

CSS3新增了许多新特性，包括：

Flex布局：Flex布局是一种新的布局方式，可以实现更加灵活的布局。

Grid布局：Grid布局是一种网格布局方式，可以实现更加精确的布局。

多列布局：多列布局可以将元素分成多个列，从而实现更加紧凑的布局。

响应式布局：响应式布局可以根据不同屏幕尺寸，自动适应不同的布局。

媒体查询：媒体查询可以根据不同设备或浏览器，指定不同的样式。

伪类选择器：伪类选择器可以根据元素的状态或位置，选择元素。

伪元素选择器：伪元素选择器可以创建元素的虚拟子元素。

3D变换：3D变换可以将元素进行3D变换，实现一些特殊的效果。

过渡动画：过渡动画可以让元素在变化时更加自然。

动画：动画可以让元素进行动态变化。

字体图像：字体图像可以将字体转换为图像，实现一些特殊的效果。

SVG：SVG是一种可缩放矢量图形格式，可以用于创建复杂的图形。

12.css3动画有哪些?

CSS3动画有以下几种：

过渡动画：过渡动画可以让元素在变化时更加自然。

动画：动画可以让元素进行动态变化。

过渡动画

过渡动画可以让元素在变化时更加自然。过渡动画可以通过以下属性来设置：

transition-property: 设置动画的属性。

transition-duration: 设置动画的持续时间。

transition-timing-function: 设置动画的速度曲线。

transition-delay: 设置动画的延迟时间。

动画

动画可以让元素进行动态变化。动画可以通过以下属性来设置：

animation-name: 设置动画的名称。

animation-duration: 设置动画的持续时间。

animation-timing-function: 设置动画的速度曲线。

animation-delay: 设置动画的延迟时间。

animation-iteration-count: 设置动画的重复次数。

animation-direction: 设置动画的播放方向。

animation-fill-mode: 设置动画在动画完成后或被中断后元素的状态。

13.介绍一下grid网格布局

Grid布局是一种网格布局方式，可以实现更加精确的布局。Grid布局可以通过以下属性来设置：

grid-template-columns: 设置网格的列。

grid-template-rows: 设置网格的行。

grid-template-areas: 设置网格的区域。

grid-column-start: 设置元素在列中的起始位置。

grid-column-end: 设置元素在列中的结束位置。

grid-row-start: 设置元素在行中的起始位置。

grid-row-end: 设置元素在行中的结束位置。

place-content: 设置元素在网格中的布局方式。

justify-content: 设置元素在列中的布局方式。

align-items: 设置元素在行中的布局方式。

14.说说flexbox(弹性盒布局模型),以及适用场景?

Flexbox是一种新的布局方式，可以实现更加灵活的布局。Flexbox适用于以下场景：

水平布局

垂直布局

多列布局

流式布局

弹性布局

Flexbox的优势在于：

可以根据元素的宽度或高度进行自动布局

可以实现灵活的布局效果

可以实现响应式布局

Flexbox的缺点在于：

学习成本较高

在某些情况下可能不够灵活

15.说说设备像素.css像素、设备独立像素、dpr.ppi之间的区别?

设备像素、CSS像素、设备独立像素、dpr、ppi之间的区别：

设备像素：是指屏幕上的一个物理像素，通常是固定的。

CSS像素：是指在 CSS 中使用的像素单位，通常是设备像素的倍数。

设备独立像素：是指与设备像素无关的像素单位，通常是基于 16 的倍数。

dpr：是指设备像素密度，通常是指每英寸的像素数。

ppi：是指屏幕像素密度，通常是指每英寸的像素数。

区别：

属性 说明

设备像素 是指屏幕上的一个物理像素，通常是固定的

CSS 像素 是指在 CSS 中使用的像素单位，通常是设备像素的倍数

设备独立像素 是指与设备像素无关的像素单位，通常是基于 16 的倍数

dpr 是指设备像素密度，通常是指每英寸的像素数

ppi 是指屏幕像素密度，通常是指每英寸的像素数

16.说说em/px/rem/vh/vw区别?

属性 说明

em 是指相对于父元素的字体大小

px 是指绝对像素单位，与设备像素密度有关

rem 是基于根元素的字体大小

vh 是指屏幕高度的百分比

vw 是指屏幕宽度的百分比

区别：

属性 说明

em 是指相对于父元素的字体大小，适用于响应式布局

px 是指绝对像素单位，与设备像素密度有关，不适用于响应式布局

rem 是基于根元素的字体大小，适用于响应式布局

vh 是指屏幕高度的百分比，适用于响应式布局

vw 是指屏幕宽度的百分比，适用于响应式布局

17.让Chrome支持小于12px的文字方式有哪些?区别?

使用 rem 单位：rem 单位是基于根元素的字体大小，因此可以通过设置根元素的字体大小来控制所有元素的字体大小。

使用 font-size: calc() 函数：font-size: calc() 函数可以通过计算来设置字体大小，因此可以通过设置一个较大的初始字体大小来支持小于 12px 的文字。

使用 font-size: -webkit-xxx-font-size() 属性：-webkit-xxx-font-size() 属性是 Chrome 专有的属性，可以用于支持小于 12px 的文字。

18.怎么理解回流跟重绘?什么场景下会触发?

回流和重绘是 CSS 渲染过程中的两个重要概念。

回流：是指浏览器重新计算元素的布局，包括元素的位置、大小、边距、内边距等。回流会导致元素的样式发生变化，因此需要重新绘制元素。

重绘：是指浏览器重新绘制元素，包括元素的背景、颜色、字体等。重绘不会导致元素的布局发生变化，但会影响元素的显示效果。

回流和重绘会导致页面性能下降，因此需要尽量避免。

回流触发场景：

元素的属性发生变化，例如 width、height、position、float 等。

元素的样式发生变化，例如 color、font-size、background-color 等。

元素的父元素发生变化，例如 display、position、float 等。

重绘触发场景：

元素的背景、颜色、字体等发生变化。

元素的 transform 属性发生变化。

元素的 opacity 属性发生变化。

19.说说对Css预编语言的理解?有哪些区别?

CSS 预编语言是指在 CSS 代码中使用 JavaScript 代码进行处理的技术。CSS 预编语言可以实现一些 CSS 无法实现的功能，例如：

动态生成 CSS 代码。

条件编译 CSS 代码。

模块化 CSS 代码。

CSS 预编语言有以下几种：

Sass：Sass 是 CSS 的模块化预编语言。Sass 可以使用类似 CSS 的语法来编写 CSS 代码，并提供一些 CSS 无法实现的功能，例如变量、嵌套、函数等。

Less：Less 是 CSS 的模块化预编语言。Less 与 Sass 类似，但 Less 的语法更接近 CSS。

Stylus：Stylus 是 CSS 的模块化预编语言。Stylus 的语法与 CSS 完全不同，因此学习成本较高。

CSS 预编语言的区别：

语言 特点

Sass 语法与 CSS 相似，提供更多功能

Less 语法与 CSS 相似，学习成本较低

Stylus 语法与 CSS 完全不同，学习成本较高

20.如果要做优化,cSS提高性能的方法有哪些?

CSS 提高性能的方法有以下几种：

使用 CSS 预编语言：CSS 预编语言可以帮助我们减少 CSS 代码的冗余，从而提高 CSS 的性能。

使用 CSS 变量：CSS 变量可以帮助我们避免重复使用 CSS 属性值，从而提高 CSS 的性能。

使用 CSS 嵌套：CSS 嵌套可以帮助我们将 CSS 代码组织得更加合理，从而提高 CSS 的性能。

使用 CSS 媒体查询：CSS 媒体查询可以帮助我们根据不同的屏幕尺寸或设备类型，生成不同的 CSS 代码，从而提高 CSS 的性能。

使用 CSS 性能工具：CSS 性能工具可以帮助我们分析 CSS 代码的性能，从而找到性能瓶颈并进行优化。

具体使用哪种方法可以根据实际情况来选择。