CSS

Q1.简单描述CSS的盒模型

1.盒模型种类：包括标准盒模型和IE盒模型（怪异盒模型）

2.盒模型设置方式：通过box-sizing: content-box / border-box来设置

3.如何获取盒模型的宽高：

    1.非IE: window.getComputedStyle(el).width/height 例：'50px'

    2.IE：window.currentStyle(el).width/height 

    3.通用：el.getBoundingRect().width / height 例：50

    方式1和方式2获取的width和height根据具体盒模型而定

    方式3获取的width和height铁定包含border+padding+content

4.根据盒模型解释边距重叠：

    在标准文档流中：垂直方向的元素边距会发生重叠；在水平方向的元素边距会叠加；

    浮动元素中：元素之间的边距铁定不重叠；

5.解释BFC、（IFC）：

    1.BFC：块级格式化上下文，是一个独立容器

    2.BFC特点（原理）：

        1.本身是个独立容器，容器内外隔离，互不影响

        2.与旁边浮动元素互不重叠

        3.容器高度会包括浮动子元素的高度

        4.容器内部，垂直方向的边距会发生重叠

    3.如何设置：

        1.overflow: 非visible

        2.float: 非none

        3.position: 非static，非relative

        4.display: inline-block、flex、inline-flex

    4.应用场景：

        1.清除容器内浮动（结合特点3）

        2.清除旁边浮动元素会与自身重叠的影响（结合特点2）

        3.解决父子元素margin塌陷的问题