参考链接：https://segmentfault.com/a/11...https://juejin.im/post/59b73d...CSS面试-marginOverlap和BFC基础知识块-级元素和块级元素块级元素是那些将在视觉上格式化为块的元素，用外行的话来说，就是那些将换行的元素。例如：显示属性为block、list-item、table、flex、grid。块元素块元素是显示属性值为block的元素，它应该是块级元素的子集。行内级元素和行内级元素行内级元素是那些不为自己的内容形成一个新的块，而是让内容分散到多行的元素。例如：显示属性为inline、inline-table、inline-block、inline-flex、inline-grid。内联元素内联元素只是具有inline显示属性值的元素。替换元素和非替换元素替换元素浏览器根据元素的标签和属性来决定元素的具体显示内容。常见的替换元素有这些：img、input、textarea、select、button等。替换元素宽度定义如果width和height的计算值为auto且元素有固有宽度，则width的使用值为计算值如果width为auto且元素具有固有宽度，则使用的width值为固有宽度。如果width的计算值是auto，height的计算值不是auto，并且元素有固有的纵横比，width的使用值就是“高度使用值*固有纵横比”比如img时只有它的高度值定义后，其宽度将根据固有纵横比按比例设置。另外，当width的计算值为auto时，width使用的值为iframe、canvas等300px#####替换元素高度定义替换元素高度定义如果width和height的计算值为auto且元素有一个固有高度，那么使用的高度值就是固有高度如果计算出的高度值是auto并且元素有一个固有高度，那么使用的高度值就是固有高度。如果height的计算值是auto，width的计算值不是auto，并且元素有固有的纵横比，height的使用值是：width的使用值/固有的纵横比如果height的计算值是auto和上面的条件完全不符，高度的值不能大于150px，宽度不能大于矩形高度的2倍。非置换元素浏览器中的大多数元素都是非置换元素，即它的内容直接显示给浏览器。对于非替换元素，宽度设置不适用。BFCBFC的全称是“BlockFormattingContext”，中文意思是“BlockFormattingContext”。BFC是页面上一个孤立的渲染区域。容器内部的子元素不会影响布局中的外部元素，反之亦然。触发BFC的根元素的float取值不是noneoverflow，取值为auto、scroll或hiddendisplay。如果table-cell、table-caption、inline-block、flex或inline-flexposition的值不是relative或static，则BFC布局规则内的框将在垂直方向上一一放置。盒子的垂直距离由边距决定，属于同一个BFC的两个相邻盒子的上边距和下边距将重叠每个元素的左侧并触及包含框的左侧，即使有floating，BFC的区域不会和float重叠。BFC在页面上是一个孤立的。独立容器，容器内的子元素不会影响容器外的元素，反之亦然BFC计算高度时，浮动元素也参与计算IFCIFC（InlineFormattingContexts）直译为“内联格式化上下文”。IFC布局规则在IFC中，从父元素的顶部开始，框一个接一个地水平排列。对于包含在其中的所有框，行框总是足够高。但是，它可能比其中包含的最高盒子还高。当框的高度低于包含它的行框的高度时，行内的框在行内的垂直对齐由行内的'verticalalign'属性决定。框的总宽度小于包含它们的行框的宽度，它们在行框中的水平位置由“文本对齐”属性确定。当一个inlinebox超过linebox的宽度时，它被分成若干个boxes，而这些boxes又被分成若干个lineboxesacrossthe
