深入剖析width与max-width/min-width属性（百分比）

本博客意在剖析width与max-width/min-width属性

width和max-width/min-width属性均属于CSS中常用属性，其中

• width属性设置元素的宽度。默认情况下，它会设置内容区域的宽度，但是如果box-sizing设置为border-box，它会设置边框区域的宽度
• max-width/min-width属性设置元素的最大/最小宽度。它可以防止使用的width属性值变得比max-width指定的值大/小，值得注意的是，min-width属性会覆盖max-width属性，针对这一点，后续会有验证

在width和max-width/min-width属性使用过程中，属性值均可为100%，在MDN中对这种情况进行了如下阐述

• <percentage>
  • Defines the max-width as a percentage of the containing block's width.
  • Defines the width as a percentage of the containing block's width.

如上所示，二者相关内容定义类似，但在实际应用中略有不同，例如在如下示例中，

设置img的父盒子即div的width为浏览器宽度的25%，img的width为100%（此处代表img宽度与父盒子宽度相同࿰