• 一、width&min-width&max-width
• 二、height&min-height&max-height

一、width&min-width&max-width

• demo

• 从上图可得出以下结论：
  • 单独设置 min-width，则保证元素有宽度
  • 单独设置 max-width，则保证元素有最大宽度
  • 同时设置 width 和 max-width，保证元素的最小宽度为 width 的值，而元素的最大宽度则为 max-width 的值
  • 同时设置 width 和 min-width，min-width 的值会直接覆盖width的值，元素最终的宽度为min-width的值
  • 同时设置 width 、 min-width 和 max-width，min-width 的值会直接覆盖width的值，元素元素的最小宽度为min-width的值，而元素的最大宽度则为 max-width 的值

二、height&min-height&max-height

• demo

• 从上图可得出以下结论：
  • 单独设置height 或者 min-height，都能保证元素有高度
  • 单独设置max-height，在元素没有内容的情况下，是不会有高度的；如果有内容，则保证元素的最大高度为 max-height 的值，不会超过此值
  • 同时设置 height 和 max-height，保证元素的最小宽度为 height 的值，而元素的最大宽度则为 max-height 的值
  • 同时设置 height 和 min-height，min-height 的值会直接覆盖height的值，元素最终的宽度为min-height的值
  • 同时设置 height 、 min-height 和 max-height，min-height 的值会直接覆盖height的值，元素元素的最小宽度为min-height的值，而元素的最大宽度则为 max-height 的值