当前位置:Web前端 > css> 正文

css min-width与max-width

时间:2015-4-13类别:Web前端

css min-width与max-width

css min-width与max-width

Css max-width与css min-width可以同时在一个CSS选择器使用设置一个对象最大最小宽度样式。一般对图片对象设置此两项样式比较多。

 

一、最大宽度属性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实例

 

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

    <img src="url2" />

    </li>

  •  

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

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

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

     

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐