2024前端面试准备之CSS篇(一)

全文链接

1. CSS选择器的优先级是怎样的

CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器

计算示例:优先级由 A 、B、C、D 的值来决定的,其中它们的值计算规则如下:

  • A 的值等于 1 的前提是存在内联样式, 否则 A = 0
  • B 的值等于 ID选择器 出现的次数
  • C 的值等于 类选择器 和 属性选择器和伪类出现的总次数
  • D 的值等于 标签选择器和伪元素出现的总次数

2. link和@import的区别

  • link属于XHTML标签,⽽**@import**是CSS提供的。
  • ⻚⾯被加载时,link会同时被加载,⽽@import引⽤的CSS会等到⻚⾯被加载完再加载
  • import只在IE 5以上才能识别,⽽link是XHTML标签,⽆兼容问题
  • link⽅式的样式权重⾼于@import的权重。
  • 使⽤dom控制样式时具有差别,当使⽤javascript控制dom去改变样式的时候,只能使⽤link标签,因为@import不是dom可以控制的。

3. 有哪些方式(CSS)可以隐藏页面元素

  • opacity:0 :本质上是将元素的透明度将为0,就看起来隐藏了,但是依然占据空间且可以交互
  • visibility:hidden : 与上⼀个⽅法类似的效果,占据空间,但是不可以交互
  • overflow:hidden : 这个只隐藏元素溢出的部分,但是占据空间且不可交互
  • display:none : 这个是彻底隐藏了元素,元素从⽂档流中消失,既不占据空间也不交互,也不影响布局
  • z-index:-9999 : 原理是将层级放到底部,这样就被覆盖了ÿ

相关推荐

  1. 2024前端面试准备CSS

    2024-02-20 17:40:01       30 阅读
  2. 2024前端面试准备CSS(二)

    2024-02-20 17:40:01       36 阅读
  3. 2024前端面试准备TypeScript

    2024-02-20 17:40:01       32 阅读
  4. 2024前端面试准备HTML

    2024-02-20 17:40:01       30 阅读
  5. 2024前端面试准备uniapp

    2024-02-20 17:40:01       32 阅读
  6. 2024前端面试准备Vue3

    2024-02-20 17:40:01       35 阅读
  7. 2024前端面试准备-HTML&CSS

    2024-02-20 17:40:01       9 阅读
  8. 2024前端面试准备4-Vue相关

    2024-02-20 17:40:01       9 阅读
  9. 2024前端面试准备5-React相关

    2024-02-20 17:40:01       7 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-20 17:40:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-20 17:40:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-20 17:40:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-20 17:40:01       20 阅读

热门阅读

  1. 图像预处理技术与算法

    2024-02-20 17:40:01       29 阅读
  2. 单机启动/开机启动SpringBoot服务的正确方式

    2024-02-20 17:40:01       29 阅读
  3. 实现 css 样式隔离的方法

    2024-02-20 17:40:01       33 阅读
  4. excel如何指定求和

    2024-02-20 17:40:01       24 阅读
  5. Web基础与http协议

    2024-02-20 17:40:01       30 阅读
  6. 前端判断对象为空

    2024-02-20 17:40:01       32 阅读
  7. 数据结构-邻接矩阵的创建与遍历

    2024-02-20 17:40:01       33 阅读