CSS相关面试问题

• 什么是BFC
  
  • 原文https://blog.csdn.net/blueberry_liang/article/details/90030814
    
  • 释义
    
    • BFC—— Box、Formatting Context
      
    • box：盒子模型
      
    • Formatting Context：渲染文档的容器，css根据它来进行渲染
      
  • 哪些元素会生成BFC:
    
    • 根元素
      
    • float属性不为none
      
    • position为absolute或fixed
      
    • display为inline-block, table-cell, table-caption, flex, inline-flex
      
    • overflow不为visible
      
  • BFC作用
    
    • 防止垂直 margin 重叠
      
    • 避免浮动元素和其他元素重叠
      
    • 清除内部浮动
      
• CSS的重绘与回流
  
  • 原文https://www.cnblogs.com/mdr86553/p/12048742.html
    
  • 什么是重绘
    
    • 当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制
      
  • 什么是回流
    
    • 重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程
      
  • 重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）
    
  • 减少重绘（Repaint）和回流（reflow）
    
    • 为什么？
      
      • 由于重绘和回流均会增加页面的负载，因此需要减少这类情况发生
        
    • 怎么做？
      
      • 少用style，多用class将相同属性封装到一个class中。
        
      • 不要把属性值放在一个循环里当成循环里的变量。
        
      • 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
        
      • 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)
        
      • 不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）
        
      • 用translate替代top改变
        
      • 用opacity替代visibility（在独立图层下优化重绘）
        
• 盒子模型
  
  • 由margin、border、padding、content组成，其中padding与content作为元素的宽度和高度
    
  • box-sizing属性
    
    • content-box：此时元素的宽度和高度仅由content组成
      
    • border-box：此时元素的宽度和高度由border、padding、content组成
      
    • inherit：属性继承上一级元素
      
• 一些细节功能
  
  • 上下左右居中。原文：https://www.cnblogs.com/xiaoxueer/p/11849997.html
    
    • flex布局
      
      • 父元素
        
        • display: flex;
          
        • align-items: center;
          
        • justify-content: center;
          
      • 子元素
        
        • 无
          
    • absolute绝对定位
      
      • 父元素：
        
        • position: relative;
          
      • 子元素
        
        • position: absolute;
          
        • top:50%;
          
        • left:50%;
          
        • transform:translate(-50%, -50%);
          
    • 设置after属性
      
      • 父元素
        
        • text-align: center;
          
      • 父元素:after
        
        • content: '';
          
        • display: inline-block;
          
        • height: 100%;
          
        • vertical-align: middle;
          
      • 子元素
        
        • display: inline-block;
          
        • vertical-align: middle;