CSS盒模型

1、基本概念

盒模型由里向外由content、padding、border、margin组成。

盒模型是有两种标准的，一个是标准模型，一个是IE模型。
标准模型中，盒模型的宽高只是内容（content）的宽高；
而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

2、CSS3 的属性 box-sizing

1.content-box（标准模型）

这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

2.border-box （IE模型）

为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

3.inherit

规定应从父元素继承 box-sizing 属性的值。

/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;

3、通过JS获取宽高

最常见的就是通过节点的offsetWidth/offsetHeight。

4、开发中和框模型相关的应用及小问题

4.1浏览器间的盒子模型

标准盒子模型与IE模型之间的差异：标准的盒子模型就是上述介绍的那种，而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。

4.2 利用盒子模型化三角形

控制border-color,可以设置四个方向的三角形。

4.3外边距重叠

外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界重合在一起而形成一个单一边界,外边距的重叠只产生在普通流的垂直相邻边界间。合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。（如图）

        .child1 {
            width: 200px;
            height: 120px;
            text-align: center;
            background-color: green;
            margin: 50px auto;
        }
        .child2 {
            width: 200px;
            height: 120px;
            text-align: center;
            background-color: green;
            margin: 20px auto;
        }

如下图，父元素没有设置margin-top，而子元素设置了margin-top：50px;可以看出，父元素也一起有了边距

5、边距重叠解决方案(BFC)

因为上面4所提及的编剧重叠问题，就有了BFC，首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
（display 属性为 block, list-item, table 的元素，会生成 block-level box）

5.1 BFC的原理

一、内部的box会在垂直方向，一个接一个的放置；
二、每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）；
三、box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠；
四、bfc的区域不会与浮动区域的box重叠；
五、bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的；
六、计算bfc高度的时候，浮动元素也会参与计算。

5.2 哪些元素会生成BFC

一、根元素；
二、float属性不为none；
三、position为absolute或fixed；
四、display为inline-block, table-cell, table-caption, flex, inline-flex；
五、overflow不为visible。
这里就不对BFC的作用及原理展开了，下回写个文章介绍一下。