width与max-width的区别

    之前一直也都不太明白他们之间的应用，感觉他们之间的算是没有区别的（怎么可能！！！总不会无端端多一个属性吧），看了几次的概念也不知道他们的应用究竟在哪里，今天终于知道他们的区别了，动手试试看！！！

width：表示的是元素的宽度，宽度已经被限定住了，就像是被框住了

max-width：表示的是最大的元素的宽度，也就是说元素可以在0-max-width之间，可以有弹性的。

接下来我们举个例子：原图片的宽度为1027px，设定图片最大的宽度为500px,看看出来的效果是图片撑破其父元素，还是宽度大小刚好是500px呢？我们设定装载这图片的容器的宽度为500px,一起看看有什么效果：

运行结果截图：

    可以看到图片的宽度与容器的宽度一样的，本来原图的宽度是1027px,但是对图片设置了最大宽度之后，图片的宽度如果超过了500px，那么该图片的呈现出来的宽度就会是500px。

    那么如果我设置图片的最大宽度是2000px的话，图片的宽度不会是2000px,它只会维持自己的原来的宽度，因为1027px是小于2000px的。