学习参考：
https://blog.csdn.net/Mr_Tony/article/details/97790079
https://blog.csdn.net/m0_38102188/article/details/80611615
https://blog.csdn.net/Great_Eagle/article/details/81130222 (结论来源，最全面的图解)
1.W3C盒模型（标准盒模型）和IE盒模型（怪异盒模型）：
W3C标准盒模型：用户设置的width和height仅仅指content area的宽高
IE怪异盒模型：用户设置的with和height包含了content area + padding area + border area三部分
注意：这两种设置with 和 height时候 都不包括margin！！！！
在CSS3中可以分别通过box-sizing：content-box设置成W3C标准和模型，通过 box-sizing:border-box 设置成IE怪异盒模型
所以，两种不同模式下的宽高计算规则如下：
W3C标准盒模型的元素宽高计算：
W3C element witdth = with + padding + border + margin
W3C element height = height + padding + border + margin
IE怪异盒模型的元素宽高计算：
IE element width = margin + width（包含了三部分内容）
IE element height = margin + height（包含了三部分内容）
2.width:100% width:auto width:80% width:100rpx的区别
- width:100% 子元素的width值 = 父元素的content width值
- width:auto 子元素的width值(content + padding + border + margin) = 父元素的content width值
- width:100rpx 子元素的width值为100rpx
（以上三者中的"子元素的width值"是根据盒模型来计算的哈）
3.由此延伸一个知识点：CSS3de calc()函数
有时候会需要子元素width减去margin值这种场景，同时子元素的width是不能写固定值的，这时候就可以用calc（）函数来机型计算了。
width: calc(100% - 80px);
减去的80px是自身宽度的话 也可以实现与auto一致的效果
