likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 9

前言

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

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. 遵照从上往下从左往右的布局排列

代码案例一

    *{
      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的宽度为

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

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

2024 高频前端面试题汇总之CSS篇（二） 案例二可以看看我原先的文章

  • 触发条件

    1. overflow: 不为visible
    2. float
    3. display: inline-block || inline-xxx || flex || table-xxx || grid
    4. position: absolute || fixed

  • 应用 清除浮动

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

  1. position: absolute + translate || margin负值(已知宽高)
 .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：
  }
  1. flex
 .box{// 父盒子
      dispaly:flex
      justify-content: center;
      align-items: center;
      }
  1. 网格布局diasplay：grid
      display: grid;
      justify-content: center;
      align-items: center;
  1. table: text-align + vertical-align (子容器不能是块级)
.box{// 父盒子
      dispaly:table
      text-align: center;
      vertical-align: center;
      }
  .item{
    display:inline-block;
  }
  1. margin 如觉得本文对你有帮助的话，欢迎点赞❤❤❤，写作不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写作的动力，感谢支持！
转载自:https://juejin.cn/post/7340828555532697635
评论
请登录