• width || height = content 内容区域
• 比如设定元素width = 300px，padding = 20px，border=20px，那么实际的内容区域宽度为content = 300px；整个盒子的宽度为300+20*2+20*2 = 380px，也就是设定额外的padding或border会向外扩张元素的大小；
• 占的总的位置大小为：margin + border + padding + width || height（width || height 为 content 内容区域 ）
• 即若想占的总的位置大小不变，增加padding就得较少width || height

• width || height = content + padding + border
• 比如设定元素width = 300px，padding = 20px，border=20px，那么实际的内容区域宽度为content = 300 - 20 * 2 - 20 * 2 = 220px，整个盒子的宽度也就是它自己本身的width = 300px，也就是固定宽度后，如果增大border或者padding会压缩内容区的宽度；
• 整个盒子实际宽度和高度就是我们设置的盒子的宽度和高度，只是padding和border自动限制到div内，实际的内容区域宽度和高度自适应改变了，但总宽度、高度不变。
• box-sizing:border-box是非常好用的样式属性，解脱了我们设置宽度和高度后再设置padding和border时重新计算设置宽度、高度的问题（因为我们可能需要保证整个盒子大小不变）。
• 占的总的位置大小为：margin + width || height

如下：两个盒子width和height都相同，padding、border、margin的大小也都相同，但一个是content-box一个是border-box

小提示：上面两个大盒子的margin都是20px，但在标准文档流中有margin的塌陷现象，即竖直方向的margin不叠加（所以红蓝二者之间的垂直距离只有20px），以较大的为准。注意：若脱离了标准流则没有此现象。
总结：
1 content-box盒模型中，给子盒子设置width时，若使用的是百分比，是依据父盒子的width也即content设置的
2 border-box盒模型中，给子盒子设置width时，若使用的是百分比，则是依据父盒子的width减去border和padding后的宽度也即content的宽度大小设置的
都是根据父盒子的content大小设置，只是父盒子content的计算方式不同而已

在实际的开发中，为保持浏览器的兼容性，通常将盒子模型统一为IE的盒子模型，有利于布局

content-box的最大缺点就是：当你想让两个子容器float:left，宽度各50%，然后给一点padding，最后让子容器并排充满父容器，一切想的挺美好，然而你发现结果并不是这么美好，因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，于是，width就不能50%了，只能是50%再减去padding的像素值。

border-box的诞生，主要就是解决content-box的最大缺点。border-box意味着子容器的padding和border的厚度都算在50%之内，这样，你可以随意的修改padding和border的厚度值，根本不用担心父容器被撑爆。

现在最著名的CSS框架几乎都采用了border-box，所以它才是事实的标准。框架想要具备栅格系统，就肯定要去使用border-box，如果用content-box会有一种想死的感觉。

box-sizing属性是不具备继承性的，原因很简单，box-sizing属性本来就应该是灵活使用的，全局设定为border-box或者全局设定为content-box都有弊端。
假如你确定你的页面整体或者某个大块的所有元素都应当用上border-box，那么你应该搞一个：

* {
    box-sizing: border-box;
}

或者搞一个：

#某id * {
    box-sizing: border-box;
}

通常情况下，上面这种代码是没必要加的，事实上：你只需要在必须使用border-box的元素身上使用border-box，其他所有元素都保持content-box就好了。

子元素有padding和border，或者至少有其一，并且需要给子元素设定100%宽度（或者50%宽度等等），这时候显然需要border-box。设为border-box之后，padding和border的厚度可以随意调，并不会溢出父元素。如果是content-box，那么，宽度必然会溢出，而且，为了不溢出，你设定子元素的宽度就只能是一个定值，或者是一个计算值（比如calc(100% - 20px)）。

子元素的高度是100px，并有一个margin-top: 10px;，而父元素的高度却也只是100px
为什么父元素高度是100px而不是110px呢，下面给父元素加上一个属性如下：

#father {
	background: green;
	overflow: hidden;
}

此时父元素背景显示出来，高度也变成110px，如上图
原理：给父元素添加overflow: hidden属性实际就是给父元素创建了一个BFC，就是块级格式化上下文。

• BFC：块级格式化上下文。与BFC对应的是IFC（不常用）。
• BFC很常见的应用就是边距重叠解决。

BFC的原理就是BFC的渲染规则（可以说出4点就可以）。

• BFC 内部的子元素，在垂直方向，边距会发生重叠。
• BFC的区域不会与浮动元素的box重叠，这个主要用于清除浮动带来的影响
• BFC在页面中是一个独立的容器，外面的元素不会影响里面的元素，反过来里面的元素也不会影响外面的元素。
• 计算BFC的高度时，浮动的子元素也会参与计算。

有如下4个方法可以创建BFC。

• float属性：float的属性值不为none。意思是，只要设置了float的值不是none，当前元素就创建了BFC。
• position属性：只要position的值不是static或者relative，那么就创建了一个BFC。比如设置position:fixed,position:absolute都是创建了BFC。
• display属性：只要display属性为inline-block、table-cell,、table-caption, table、flex, inline-flex（与table相关的那几个属性）都可以创建BFC。
• overflow属性：只要overflow属性值不为visible，都可以创建BFC，例如overflow:auto，overflow:hidden均可以创建BFC。【最为常用】

• 解决 margin 重叠
• 清除浮动