min-width/max-width 和 min-height/max-height 属性间的覆盖规则

在 CSS 中，min-width/max-width（最小宽度/最大宽度）和min-height/max-height（最小高度/最大高度）属性间的覆盖规则如下：

一、单独应用时互不影响

当只设置了min-width时，它只会对元素的最小宽度进行限制，不会影响元素的高度相关属性，同理，min-height、max-width、max-height单独设置时也只对各自对应的维度起作用。

例如：

div {
   
  min-width: 200px;
  /* 此时对元素的高度没有任何影响 */
}

二、同时设置不同维度属性时

1. 如果设置的min-width和min-height值不冲突，那么它们会分别在宽度和高度维度上起作用。

   • 例如，一个元素设置了min-width: 200px; min-height: 100px;，当元素的宽度小于 200 像素时，元素的宽度会被扩展至 200 像素；当元素的高度小于 100 像素时，元素的高度会被扩展至 100 像素。

2. 如果设置的max-width和max-height值不冲突，同样会分别在宽度和高度维度上限制元素的最大尺寸。

   • 例如，max-width: 300px; max-height: 200px;，当元素的宽度超过 300 像素时，宽度会被限制在 300 像素；当元素的高度超过 200 像素时，高度会被限制在 200 像素。

3. 当最小尺寸和最大尺寸在同一维度上冲突时：

   • 如果min-width大于max-width，那么max-width会生效，因为它限制了元素的最大宽度不能超过一个特定值，而min-width的限制被打破。
   • 同理，对于高度维度，如果min-height大于max-height，max-height生效。

例如：

div {
   
  min-width: 300px;
  max-width: 200px;
  /* 最终元素的宽度不会超过 200 像素，因为 max-width 生效 */
}

总之，在 CSS 中，min-width/max-width和min-height/max-height属性在不同维度上各自独立起作用，当在同一维度上出现冲突时，通常最大尺寸限制会优先于最小尺寸限制生效，但具体的表现还会受到其他 CSS 属性和布局方式的影响。