在CSS布局中max-width 无效的解决方法

max-width 无效的解决方法:

width:100% 和 max-width:100%的区别：

width: 100%是将所有指定元素的宽度 拉伸或收缩到和父元素的宽度一致，

而max-width: 100%则是如果指定元素的宽度不超过父元素的宽度，则大小不变，如果超过了父元素的宽度，则将宽度收缩为父元素的宽度。

所以，出现问题的原因是我将图片设置成max-width:100%，而这个图片宽度未超过父元素的宽度，大小不变，因此这个图片比它上面的遮罩要窄了一截。

总结：掌握width:100% 和 max-width:100%的区别，当max-width:100%未超过父元素宽度而导致无效的时候，把图片设置成width:100%。