当前位置:   article > 正文

面试 CSS 框架八股文十问十答第一期

面试 CSS 框架八股文十问十答第一期

面试 CSS 框架八股文十问十答第一期

作者:程序员小白条个人博客

相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!

⭐点赞⭐收藏⭐不迷路!⭐

1)CSS选择器及其优先级

CSS选择器用于选择页面上的元素,它们可以根据元素的标签名、类名、ID等属性进行选择。选择器的优先级决定了当多个规则同时匹配一个元素时,哪一个规则会被应用。优先级从高到低分为四个级别:

  • 内联样式(Inline Styles):使用style属性直接在HTML元素上定义的样式,具有最高优先级。
  • ID选择器:通过元素的ID属性选择元素(例如,#myElement),比类选择器具有更高的优先级。
  • 类选择器、属性选择器、伪类选择器:通过类名、属性或伪类选择元素。
  • 元素选择器、伪元素选择器:通过元素名或伪元素选择元素。

2)CSS中可继承与不可继承属性有哪些

  • 可继承属性:部分样式属性的值会被子元素继承。例如,font-familycolorline-height等都是可继承的属性。子元素会继承父元素的这些样式值,除非子元素被明确设置了相应的样式。
  • 不可继承属性:有些样式属性的值不会被子元素继承,需要子元素自行设置。例如,borderpaddingmargin等都是不可继承的属性。

3)display的属性值及其作用

display属性用于定义元素的显示类型,常用的取值有:

  • block:元素会被显示为块级元素,独占一行,宽度自动填满父元素。
  • inline:元素会被显示为行内元素,不会独占一行,宽度根据内容自动调整。
  • inline-block:元素会被显示为行内块级元素,同行显示,但可以设置宽高等属性。
  • none:元素会被隐藏,不占用空间。
  • flex:定义一个弹性容器,子元素可以通过设置弹性属性进行伸缩。
  • grid:定义一个网格容器,子元素可以按照网格布局进行排列。

4)display的block、inline和inline-block的区别

  • block:元素会被显示为块级元素,独占一行,宽度自动填满父元素,可以设置宽高、内外边距等属性。
  • inline:元素会被显示为行内元素,不独占一行,宽度根据内容自动调整,不能设置宽高、上下边距。
  • inline-block:元素会被显示为行内块级元素,同行显示,可以设置宽高、内外边距等属性。

5)隐藏元素的方法有哪些

  • display: none;:将元素完全隐藏,不占用页面空间。

    .hidden-element {
      display: none;
    }
    
    • 1
    • 2
    • 3
  • visibility: hidden;:将元素隐藏,但仍然占用页面空间。

    .hidden-element {
      visibility: hidden;
    }
    
    • 1
    • 2
    • 3
  • opacity: 0;:将元素设为完全透明,但仍然占用页面空间。

    .hidden-element {
      opacity: 0;
    }
    
    • 1
    • 2
    • 3
  • position: absolute; left: -9999px;:将元素移出可视区域,但仍然占用页面空间。

    .hidden-element {
      position: absolute;
      left: -9999px;
    }
    
    • 1
    • 2
    • 3
    • 4

选择隐藏的方法取决于需求,例如,如果希望元素在布局中不占用空间,可以使用display: none;。如果希望元素占用空间但不可见,可以使用其他方法。

6)link和@import的区别

  • link是HTML中的标签,用于引入外部样式表,通过rel属性指定样式表的关系,可以同时引入多个样式表。link标签会在页面加载时同时加载,可以影响页面的渲染速度。
  • @import是CSS中的语法规则,用于引入外部样式表,通过在样式表中使用@import语句来引入其他样式表。@import语句只能在样式表中使用,而不能在HTML中使用。@import会在页面加载完毕后再加载,对页面的渲染速度没有直接影响。

7)transition和animation的区别

  • Transition:用于控制元素从一种样式逐渐变为另一种样式的过程。它需要指定过渡的属性、持续时间、过渡效果的速度曲线等。
  • Animation:更灵活,可以定义更复杂的动画效果。可以控制动画的每一帧,包括起始状态、结束状态和中间状态,可以定义关键帧。

8)display:none与visibility:hidden的区别

  • display: none;:完全从文档流中移除元素,不占据任何空间,元素及其子元素都不可见,并且不会触发重排和重绘。
  • visibility: hidden;:元素在页面中隐藏,但仍然占据着它在文档流中的空间,元素不可见但仍保留在文档中,会触发重排和重绘。

9)伪元素和伪类的区别和作用?

  • 伪类(Pseudo-classes):是用于向某些选择器添加特殊的效果的关键词,它们不是真正意义上的元素,而是元素的特殊状态。常见的伪类有:hover:active:focus等,用于根据用户的行为来改变元素的样式。
  • 伪元素(Pseudo-elements):是用于向某些选择器添加特殊效果的关键词,它们允许你为元素的特定部分设置样式。常见的伪元素有::before::after,用于在元素的内容前面或后面插入生成的内容。

10)对requestAnimationframe的理解

requestAnimationFrame 是浏览器提供的一个 API,用于优化 JavaScript 动画的性能。它告诉浏览器希望执行动画,并请求浏览器在下次重绘之前调用指定的函数来更新动画。

与传统的定时器(如 setTimeoutsetInterval)相比,requestAnimationFrame 更加智能和高效,它能够自动调整动画的帧速率以匹配浏览器的刷新率,从而提供更流畅的动画效果,并且在页面不可见时自动停止,节省了资源。

使用 requestAnimationFrame,开发者可以编写更加流畅、更高性能的 JavaScript 动画。

开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star!

⭐点赞⭐收藏⭐不迷路!⭐

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/编程谜题解决者/article/detail/61039
推荐阅读
相关标签
  

闽ICP备14008679号