前端高频面试题整理含答案-Css（2024）

1.CSS选择器的优先级是如何计算的？

CSS选择器的优先级是根据不同选择器的特定权重来计算的。当多个选择器应用于同一个元素时，优先级高的选择器将覆盖优先级低的选择器。

内联样式>ID选择器>类选择器>通用选择器（*，子选择器>,相邻兄弟选择器+,普通兄弟选择器~）。

2.CSS中的浮动和清除浮动的概念？

float属性为left或right，）是一种布局技术，它允许元素在页面上向左或向右浮动，使其脱离正常的文档流，并允许其他元素环绕它。可能会导致一些布局问题，例如父容器高度塌陷、浮动元素重叠等。

清除浮动的方法有：使用空的块级元素并设置clear: both;

         使用伪元素:after来清除浮动，例.clearfix:after { content: ""; display: table; clear: both; }

                                 使用overflow: hidden;属性来清除浮动，但需要注意该方法可能会隐藏溢出的内容

3.请解释一下CSS中的伪类和伪元素的区别？

伪类（pseudo-class）是用于选择元素的特定状态或行为的关键词，可以通过选择器与元素结合来选择元素的特定状态，它们以冒号（:）开头。

常见伪类：  :hover（鼠标悬停）、:active（被激活）、:focus（获得焦点）等；

伪元素（pseudo-element）则是用于向文档中的某个元素添加特定的样式或内容的关键词。它们以双冒号（::）开头，用于向选择器添加额外的内容。

常见的伪元素包括::before（在元素之前插入内容）、::after（在元素之后插入内容）等；

4.讲解CSS中的flexbox布局，它有哪些属性？

Flexbox布局是CSS中一种用于创建灵活的、适应的布局模型的技术。它通过定义容器和其内部元素之间的关系来实现灵活的布局。

5.CSS中的动画和过渡的区别和使用场景？

1. 区别：

   • 动画（animation）：动画是一种更复杂、更灵活的效果实现方式。它可以定义多个关键帧（keyframes），并在这些关键帧之间进行过渡。通过指定动画的名称、持续时间、延迟时间、重复次数等属性，可以实现更加复杂的动态效果。
   • 过渡（transition）：过渡是一种简单的效果实现方式。它只需要指定元素的属性变化，并设置过渡的持续时间、延迟时间等属性，就可以实现属性平滑过渡的效果。
2. animation 的属性：
3. transition的属性

6.CSS中的伪类选择器:empty是什么？如何使用它？

:empty，它用于选择没有子元素的元素。

7.什么是盒模型？请解释一下标准盒模型和IE盒模型的区别。

标准盒模型的宽度和高度只包括内容区域，而IE盒模型的宽度和高度包括了内容区域、内边距、边框。

8.设置透明度的几种方法？

        1.opacity （0-1）：0；

        2：rgba()最后一个值设置透明度；

     

9. css让元素消失的几种方法？

1. display: none; 使用display属性设置为none可以完全隐藏元素，并且不占据任何空间。该元素将从文档流中移除，其他元素会重新排列填补其空间。

2. visibility: hidden; 使用visibility属性设置为hidden可以隐藏元素，但仍然占据空间。元素在页面上不可见，但仍然会影响布局。

3. opacity: 0; 使用opacity属性设置为0可以使元素完全透明，但仍然占据空间。元素在页面上不可见，但仍然会影响布局。

4. position: absolute; left: -9999px; 将元素的位置设置在屏幕外，例如将left属性设置为一个很大的负值，可以使元素在页面上不可见，但仍然占据空间。

5. height: 0; width: 0; overflow: hidden; 将元素的高度和宽度设置为0，并且使用overflow属性设置为hidden，可以使元素在页面上不可见，且不占据空间。

10.css设置盒子水平居中的几种方法？

        1.   .box { margin-left: auto; margin-right: auto; }；

        2.    .box{ display: flex; justify-content: center; };

        3.    .box { position: absolute; left: 50%; transform: translateX(-50%); };

        4.     将父容器设置为display: table，子元素设置为display: table-cell，并使用text-align属性将子元素内容水平居中

                

           5.        使用grid布局： 将父容器设置为display: grid，并使用justify-items属性将子元素水平居中。

                

11.CSS设置盒子水平垂直居中的几种方法？

1. 使用Flexbox布局：

   • 将父容器设置为Flex布局：display: flex;
   • 使用justify-content: center;将子元素水平居中
   • 使用align-items: center;将子元素垂直居中

2. 使用绝对定位和transform属性：

   • 将父容器设置为相对定位：position: relative;
   • 将子元素设置为绝对定位：position: absolute;
   • 使用top: 50%;和left: 50%;将子元素的左上角定位到父容器的中心位置
   • 使用transform: translate(-50%, -50%);将子元素向左上方移动自身宽高的一半，实现居中效果

3. 使用表格布局：

   • 将父容器设置为表格布局：display: table;
   • 将子元素设置为表格单元格：display: table-cell;
   • 使用vertical-align: middle;将子元素垂直居中
   • 使用text-align: center;将子元素水平居中

4. 使用Grid布局：

   • 将父容器设置为Grid布局：display: grid;
   • 使用place-items: center;将子元素水平垂直居中

5. 使用定位和负边距：

   • 将父容器设置为相对定位：position: relative;
   • 将子元素设置为绝对定位：position: absolute;
   • 使用top: 50%;和left: 50%;将子元素的左上角定位到父容器的中心位置
   • 使用负边距将子元素向左上方移动自身宽高的一半，实现居中效果：margin-top: -50%; margin-left: -50%;

12.讲解使用css预处理器，scss和less的好处？

1. 变量和计算：预处理器允许使用变量来存储颜色、字体、尺寸等常用的CSS属性值，此外，预处理器还支持数学运算和函数，可以更灵活地计算样式值。

2. 嵌套规则：使得样式表的结构更加清晰和易于维护。通过嵌套，可以减少选择器的重复书写，提高代码的可读性。

3. 混合（Mixin）：混合是一种可重用的样式片段，可以在多个选择器中共享。使得样式的修改更加方便。

4. 继承：预处理器支持样式规则的继承，可以通过关键字@extend将一个选择器的样式应用到另一个选择器上。

5. 导入和模块化：预处理器允许将样式表拆分为多个文件，并通过导入语句进行组合。这样可以提高代码的可维护性和可复用性，使得样式的组织更加灵活。

总的来说，使用CSS预处理器可以提高开发效率、减少代码冗余、增加代码的可读性和可维护性，以及提供更多的样式编写和管理的功能。

13.less 和 scss 的区别？

        

14.详述display？

display属性是CSS中用来控制元素如何显示的属性。它可以设置元素的显示方式，包括块级元素、内联元素、行内块元素等。常用的display属性值有以下几种：

1. block：将元素显示为块级元素，会独占一行，并且可以设置宽度、高度、边距等属性。

2. inline：将元素显示为内联元素，不会独占一行，只会占据内容所需的空间，不能设置宽度、高度等块级属性。

3. inline-block：将元素显示为行内块元素，不会独占一行，可以设置宽度、高度等块级属性。

4. none：将元素隐藏，不占据空间，相当于元素不存在。

5. flex：将元素显示为弹性盒子，可以通过设置flex属性来控制子元素的布局方式。

6. grid：将元素显示为网格容器，可以通过设置grid属性来控制子元素的布局方式。

7. table：将元素显示为表格，可以使用表格相关的属性进行布局。

8. inline-table：将元素显示为内联表格，不会独占一行。

9. list-item：将元素显示为列表项，常用于无序列表和有序列表。

10. inherit：继承父元素的display属性值。

这些是display属性的常见取值，通过设置display属性，可以灵活地控制元素的显示方式，实现不同的布局效果。

15.举例几种css属性在低版本浏览器不能兼容的示例？

1. border-radius：在低版本的IE浏览器（如IE8及更早版本）中，不支持。

2. box-shadow：在一些低版本的浏览器中，如IE9及更早版本，不支持box-shadow属性。

3. transform：在一些低版本的浏览器中，如IE9及更早版本，不支持导致旋转、缩放等变换效果无法显示。

4. flexbox布局：在一些低版本的浏览器中，如IE10及更早版本，不支持，导致弹性布局无法正常显示。

5. @keyframes动画：在一些低版本的浏览器中，如IE9及更早版本，不支持@keyframes关键帧动画属性，导致动画效果无法显示。

6. opacity：在一些低版本的浏览器中，如IE8及更早版本，不支持opacity属性，导致透明度效果无法显示。

16.简述css优化方法？

1. 合并和压缩CSS文件：将多个CSS文件合并为一个文件，并使用压缩工具来减小文件大小，从而减少网络请求和加载时间。

2. 避免使用过多的选择器：过多的选择器会增加CSS解析和渲染的时间。尽量简化选择器，避免嵌套过深。

3. 避免使用!important：过多地使用!important会导致样式的不可预测性和难以维护性。

4. 使用媒体查询：通过使用媒体查询，可以根据不同的设备或屏幕尺寸应用不同的CSS样式，避免加载不必要的样式。

5. 使用CSS预处理器：使用CSS预处理器（如Sass、Less等）可以提高开发效率，并生成更优化的CSS代码。

17.css的误差3像素是什么，如何解决？

误差3像素是指在某些情况下，元素之间可能存在3像素的偏差或间隙。这种误差通常出现在使用浮动、定位或盒模型等属性时。

18.css3的属性有哪些，举例？

1. 边框属性：

   • border-radius：设置边框的圆角。
   • box-shadow：设置元素的阴影效果。
   • border-image：使用图片来定义边框样式。

2. 背景属性：

   • background-size：设置背景图片的尺寸。
   • background-origin：指定背景图片的起始位置。
   • background-clip：指定背景图片的裁剪区域。

3. 文本属性：

   • text-shadow：设置文本的阴影效果。
   • text-overflow：控制文本溢出时的显示方式。
   • word-wrap：控制长单词或URL的换行方式。

4. 过渡和动画属性：

   • transition：定义元素过渡效果的属性。
   • animation：定义元素动画效果的属性。

5. 布局属性：

   • flexbox：用于灵活地布局元素的属性。
   • grid：用于创建网格布局的属性。

6. 选择器属性：

   • :nth-child()：选择指定位置的子元素。
   • :not()：选择除了指定元素以外的其他元素。

19.css中什么会引发重绘与回流？

重绘（Repaint）指的是当元素的样式发生改变，但不影响其布局时，浏览器会重新绘制该元素。例如，改变元素的颜色、背景等属性。

回流（Reflow）指的是当元素的布局发生改变，需要重新计算元素的位置和大小时，浏览器会进行回流操作。例如，改变元素的宽度、高度、位置等属性。

频繁的重绘和回流操作会影响网页的性能。为了提高性能，我们可以采取以下措施：

1. 使用 CSS3 的 transform 和 opacity 属性来代替常用的重绘属性，如改变元素的颜色、背景等。
2. 将需要多次重绘或回流的操作合并为一次操作，减少重绘和回流的次数。
3. 避免频繁读取布局信息，可以将布局信息缓存起来，减少回流的次数。
4. 使用文档片段进行 DOM 操作，然后一次性插入文档中，减少回流的次数。
5. 使用 CSS3 的动画效果，如使用 transform 和 opacity 属性实现动画效果，可以利用硬件加速，减少重绘和回流的开销。

20.css实现一个三角形？

.triangle{
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-left-color: red;
}