【学习】CSS中width:100% 、 width:auto、width:80%、width：100rpx的区别

学习参考：

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 area范围） = 父元素的content width值
• width:auto        子元素的width值 = content + padding + border + margin  = 父元素的content width值
• width:100rpx    子元素的width值为100rpx

3.由此延伸一个知识点：CSS3de calc()函数

　　有时候会需要子元素width减去margin值这种场景，同时子元素的width是不能写固定值的，这时候就可以用calc（）函数来机型计算了。

　　

width: calc(100% - 80px);

　　减去的80px是自身宽度的话 也可以实现与auto一致的效果