CSS面试20真题高频版-盒模型和BFC一、盒模型 1.1 什么是盒模型？当对一个文档进行布局(layout)的时候，

一、盒模型

1.1 什么是盒模型？

当对一个文档进行布局(layout)的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model)，将所有元素表示为一个个矩形的盒子(box)。盒模型指的是HTML元素在渲染时所占据的空间，包括元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)。这些部分组合起来形成了一个矩形的盒子,并且每个盒子都可以相互嵌套。

代码如下：

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    margin：10px;
  }
</style>

<div class="box">
    盒子模型
</div>

此时在浏览器检查元素的时候，会发现盒子元素的大小变成了240px 140px,但是盒子所占的总空间是260px 160px(margin不算入盒子的宽度，但是算入盒子所占的总空间)

这是因为，在CSS 中，盒子模型可以分成:

W3C 标准盒子模型
怪异盒子模型

默认情况下，盒子模型为 W3C标准盒子模型

1.2 标准盒模型 - 宽度就为width

标准盒模型模型图：

上图看出：

盒子宽度 = width + padding + border
盒子所占总宽度 = width + padding + border + margin
盒子高度 = heigh + padding + border
盒子所占总高度 = heigh + padding + border + margin

1.3 IE怪异盒模型 - 宽度为 width + padding + border

1.4 box-sizing : content-box | border-box | inherit;

CSS中box-sizing属性规范浏览器以标准还是怪异盒模型。

content-box:默认值；标准盒模型
border-box:怪异盒模型
inherit:指定box-sizing属性值从父元素继承

代码如下：

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    margin：10px;
    box-sizing: border-box;
  }
</style>

<div class="box">
    盒子模型
</div>

此时在浏览器检查元素的时候，200px

二、BFC(块级格式化上下文)

1.1 什么是BFC

BFC 块级格式化上下文，是页面上的一块独立的渲染区域，有自己的规则，bfc中的元素与外界的元素互不影响

目的

形成一个独立的布局环境，保护其内部的元素不受外部影响，也不影响外部

规则

内部的盒子会在垂直方向上一个接一个的放置
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
BFC的区域不会与float box重叠
计算BFC的高度时，浮动元素也会参与计算
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

触发条件

根元素（即HTML元素）
浮动元素（float值为left或right）
overflow（溢出）的值不为visible(默认：溢出内容会显示在元素框外，不会被剪切或隐藏‌)，为auto（如果内容溢出，自动显示滚动条；如果没有溢出，则不显示滚动条‌）;scroll（在元素内显示滚动条，允许用户滚动浏览溢出的内容‌）;hidden（隐藏溢出的内容，使其不可见‌）
display的值为inline-block;inltable-cell;table-caption;table;inline-table;flex;grid;inline-grid
position的值为absolute;fixed

1.2 应用场景

清除浮动(高度塌陷)、防止margin重叠、自适应多栏布局

清除浮动

一个父元素中的子元素，设置浮动时，父元素没有设置高度，这时子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷。这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。

防止margin重叠

父子关系边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

兄弟关系边距重叠

同级元素在垂直方向上外边距会出现重叠现象，最后外边距的大小取两者绝对值大的那个可通过添加一个空元素或伪类元素，设置overflow:hidden;解决

     <div className="contentBox">
        <div>div1</div>
        <div>div2</div>
    </div>
    
 .contentBox {
     div {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align: center;
        margin: 100px;
    }
}

两个div元素之间的距离为 100px ，发生了 margin 重叠(塌陷)，以最大的为准，如果第一个div的margin 为80的话，两个div之间的距离还是100，以最大的为准。前面讲到，同一个 BFC 的俩个相邻的盒子的 margin 会发生重叠

可以在其中一个div 外面包裹一层容器，并触发这个容器生成一个 BFC ，那么两个 div 就不属于同一个 BFC则不会出现 margin 重叠

自适应多栏布局

    <div className="contentBox">
        <div className="leftBox">div1</div>
        <div className="rightBox">div2</div>
    </div>
    
   .leftBox {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
    .rightBox {
        height: 200px;
        background: #fcc;
    }

因为BFC的区域不会与浮动盒子重叠，所以使右边盒子变为BFC，以此适应两栏布局。给右侧div 设置属性 overflow:hidden