css中min-width与max-width



一、最大宽度属性max-width

1、在CSS中，最大宽度属性(max-width)用来定义宽度显示的最大值，当拖动浏览器边框使其显示范围大于最大宽度的时候，元素显示最大宽度值定义的宽度。

2、在最大宽度属性值中，可以使用三种属性值，分别为auto值、长度值和百分比值，其语法结构如下所示

max-width: auto |  length  | percent;

注意：在IE6.0中，会忽略这个属性，将宽度使用默认值100%显示

 

二、最小宽度属性min-width

1、在CSS中，最小宽度属性(min-width)用来定义宽度显示的最小值，当拖动浏览器边框使其显示范围小于最小宽度的时候，元素显示最小宽度值定义的宽度。

2、在最小宽度属性中，可以使用三种属性值，分别为auto值、长度值和百分比值，其语法结构如下：

min-width: aotu | length | percent;

注意：在IE6.0中，会忽略这个属性，将宽度使用默认值100%显示

 

三、min-width与max-width实例

<div class="min-width"> 
    <img src="url1" /> //宽为73px 
</div> 
<div class="max-width"> //宽度为457px 
 <img src="url2" /> 

</div> 

.max-width img{...}{ max-width:300px;} 
.min-width img{...}{ min-width:300px} 

结果

(1)、“min-width”里的img图片最小宽度为300px，而实际图片只有73px，所以图片被拉伸到300px；

(2)、“max-width”里的img图片最大宽度为300px，而实际图片宽度是457px ，所以图片被缩小到300px

文章转载自：  css min-width与max-width    http://www.studyofnet.com/news/881.html