max-width min-width max-height min-height

• max-width:设置最大宽度之后，其对象宽度将不超过此最大宽度值，一般设置变量的宽度，固定宽度就不能同时设置。值不能为负数，可以是百分数和具体数值。

.set-max-w{border:1px solid red;max-height: 100px;max-width: 50px;}
.set-min-w{border:1px solid red;margin-top: 200px; min-height: 50px;max-width: 100px;}

<p class="set-max-w">最大宽度80px，最大高度100px</p>
<p class="set-min-w">最大宽度100px，最小高度50px，最大宽度100px，最小高度50px</p>

• 当盒子设定最大宽度时内容是不会溢出的，如果设定最大高度就会溢出，因为文字要折行显示；
  下面的是上面的代码p标签内没有内容的时候

分析：当下面的盒子无内容的时候也会有固定的宽高，当无内容的时候设置的最小高度值能撑起这个盒子。

• 最小高度：其内容较少时时，也能保持BOX的高度为一定超出就自动向下延伸，但到目前为止，只有Opera 和 Mozilla 支持，IE7以上版本支持。

.set-min-w{border:1px solid red;margin-top: 200px; min-height: 60px;min-width: 120px;}

<img src="images/health.png" class="set-min-w">

此时调整min-width的值图片的宽度也会随着变化。

• 看下面代码

.set-min-w{border:1px solid red;margin-top: 200px; max-height: 60px;min-width: 60px;}

<img src="images/health.png" class="set-min-w set-min-h">

将最小高度改为最大高度限制了图片的高度不再像最小高度那样能自适应图片的高度了，同时当图片宽度小于最小高度时图片的宽度将会与最小高度相同否则相反。

• 看如下代码：还会有另外一种情况

.set-min-w{border:1px solid red;margin-top: 200px; min-height: 60px;min-width: 10px;}

<p class="set-min-w set-min-h">最小宽度为50px，最小高度为100px</p>

设置的最小宽度为固定值实际显示的宽度为父元素宽度的100%；并不像最小高度那样。