标签：BFC 元素 content 面试 table 相关 重绘 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;
          
 

标签：BFC,元素,content,面试,table,相关,重绘,CSS,属性
来源： https://www.cnblogs.com/coder2coder/p/15772209.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。