2024 高频前端面试题汇总之CSS篇（二）

扯蛋4382024-02-29 16:22

前言

📢最近准备春招啦了，所以整理了一些前端高频大厂面试题，分享给大家，如有问题欢迎留言指正，面试专栏我会长期更新，欢迎大家点赞🤞、收藏📌，关注➕，感谢！

2024 高频前端面试题汇总之CSS篇（一） 这个上期的文章

5. css中有哪些方式可以隐藏页面元素？区别是什么？

  1. display: none 脱离文档流 无法响应事件 回流重绘
  2. visibility: hidden 占据文档流 无法响应事件 重绘
  3. opacity: 0 占据文档流 响应事件 重绘 || 不重绘
  4. position: absolute 脱离文档流 无法响应事件 回流重绘
  5. clip-path: circle(0%) 占据文档流 无法响应事件 重绘

6.# 说说回流重绘 （重排重绘）

  • 是什么 回流：浏览器渲染页面之前需要对结构进行布局计算 重绘：将已经计算好布局的容器绘制出来

  • 触发 回流：页面上有容器的几何属性发生变更 重绘：容器非几何属性变更 （字体，颜色）

    回流必定重绘，重绘不一定回流

7 # 谈谈你对BFC的理解

  • 是什么 块级格式化上下文，是页面中一个渲染区域，有一套属于自己的渲染规则

  • 渲染规则

    1. BFC容器在计算高度时，浮动元素的高度也会计算在内
    2. BFC容器内的子元素的margin-top不会和BfC这个父容器发成重叠
    3. 遵照从上往下从左往右的布局排列

代码案例一