前端高频面试题整理含答案-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 的属性：