width与max-width的区别

柔情只为你懂 2022-06-16 06:51 397阅读 0赞
  1. 之前一直也都不太明白他们之间的应用,感觉他们之间的算是没有区别的(怎么可能!!!总不会无端端多一个属性吧),看了几次的概念也不知道他们的应用究竟在哪里,今天终于知道他们的区别了,动手试试看!!!

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

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

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

  1. 无标题文档

运行结果截图:

Center

  1. 可以看到图片的宽度与容器的宽度一样的,本来原图的宽度是1027px,但是对图片设置了最大宽度之后,图片的宽度如果超过了500px,那么该图片的呈现出来的宽度就会是500px
  2. 那么如果我设置图片的最大宽度是2000px的话,图片的宽度不会是2000px,它只会维持自己的原来的宽度,因为1027px是小于2000px的。

发表评论

表情:
评论列表 (有 0 条评论,397人围观)

还没有评论,来说两句吧...

相关阅读

    相关 widthmax-width区别

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