前言

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

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

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

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

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

是什么回流：浏览器渲染页面之前需要对结构进行布局计算重绘：将已经计算好布局的容器绘制出来
触发回流：页面上有容器的几何属性发生变更重绘：容器非几何属性变更（字体，颜色）

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

7 # 谈谈你对BFC的理解

是什么块级格式化上下文，是页面中一个渲染区域，有一套属于自己的渲染规则
渲染规则
1. BFC容器在计算高度时，浮动元素的高度也会计算在内
2. BFC容器内的子元素的margin-top不会和BfC这个父容器发成重叠
3. 遵照从上往下从左往右的布局排列

代码案例一

>    *{
      margin: 0;padding: 0;
    }
    ul{
      overflow: auto;
    }
    li{
      list-style: none;
      width: 200px;
      height: 50px;
      background-color: chocolate;
     float: left;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

在父容器中没有加bfc容器ul的宽度为

在添加bfc容器时ul的宽度为

案例二可以看看我原先的文章

掌握前端利器：深度解析CSS浮动及应用技巧

触发条件
1. overflow: 不为visible
2. float
3. display: inline-block || inline-xxx || flex || table-xxx || grid
4. position: absolute || fixed
应用清除浮动

8.水平垂直居中的方式有哪些？ !!!!!

position: absolute + translate || margin负值(已知宽高)

css 复制代码

 .box{// 父盒子
      width: 500px;
      height: 500px;
      display：relative；
      }
  .item{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
  } 
  在知道子盒子高宽时
   .item{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 50%;  
      margin-top：-100px：
      margin-left：-100px：
  }

flex

css 复制代码

 .box{// 父盒子
      dispaly:flex
      justify-content: center;
      align-items: center;
      }

网格布局diasplay：grid

css 复制代码

      display: grid;
      justify-content: center;
      align-items: center;

table: text-align + vertical-align (子容器不能是块级)

css 复制代码

.box{// 父盒子
      dispaly:table
      text-align: center;
      vertical-align: center;
      }
  .item{
    display:inline-block;
  }

margin 如觉得本文对你有帮助的话，欢迎点赞❤❤❤，写作不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写作的动力，感谢支持！

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

前言

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

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

7 # 谈谈你对BFC的理解

8.水平垂直居中的方式有哪些？ !!!!!

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