【CSS】CSS盒子模型和 BFC

CSS盒子模型

面试题：谈谈对CSS盒模型的认识

1. 基本概念：content、padding、margin
2. 标准盒模型、IE盒模型的区别
3. CSS如何设置两种模型
4. JS如何设置、获取模型对应的宽高
5. 实例题：根据盒模型解释边距重叠

盒模型

首先IE标准盒模型的范围包括content、padding、border、margin并且content部分不包含其他部分
而IE盒模型的范围也包括content、padding、border、margin，和标准W3C盒模型不同的是：IE盒模型的content部分包含了border和padding

• content：内容的宽高
• padding：内边距
• border：边框
• margin：外边框

区别：

• 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
• IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

CSS如何设置这两种模型(默认标准盒模型)

    /* 设置当前盒子为 标准盒模型（默认） */
    box-sizing: content-box;

    /* 设置当前盒子为 IE盒模型 */
    box-sizing: border-box;

JS如何设置、获取盒模型对应的宽高

• 通过DOM节点的style样式获取：element.style.width/height，缺点是只能获取行内样式，不能获取内嵌和外链样式
• 通用性W3C标准，兼容Chrome、火狐，window.getComputedStyle(element).width/height
• IE独有的：element.currentStyle.width/height，三种css样式都能获取
• element.getBoundingClientRect().width/height，此 api 的作用是：获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。此 api 可以拿到四个属性：left、top、width、height。

兼容性写法：

  /*
     * 兼容方法，获取元素当前正在显示的样式。
     * 参数：
     *      obj     要获取样式的元素
     *.     name    要获取的样式名
    */
    function getStyle(ele, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele, null)[attr];
        }
        return ele.currentStyle[attr];
    }

margin塌陷/margin重叠

标准文档流中，竖直方向的margin不叠加，只取较大值作为margin(水平放的margin是可以叠加的，即水平方向没有塌陷现象)。
如果不在标准流中，比如盒子都浮动了，那么两个盒子之间是没有margin重叠现象的
注意：margin这个属性本质上描述的是兄弟和兄弟之间的距离，最好不要用这个margin表达父子之间的距离

BFC

W3C
浏览器厂商
开发者
FC（Formatting Context） ：元素在标准流里都都是一个FC()

• 块级元素的布局属于Block Formatting Context(BFC)
• 行内级元素布局属于inline Formatting Context(IFC)

Block Formatting Context，即块级格式化上下文，是页面中的一块渲染区域，BFC的目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素，反之亦然

渲染规则：

再添加两个：

• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
  
• display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
• overflow的值不为visible，为auto、scroll、hidden
• float为left、right
• position为absolute或fixed
• html元素

BFC可以解决：①margin的折叠问题 ②浮动高度塌陷问题 （清楚浮动）③自适应多栏布局

BFC可以解决浮动高度塌陷问题