版本:CSS2,设置或检索对象的最小宽度。
语法:min-width:length | percentage
适用于:除非置换内联元素,table-row, table-row-group之外的所有元素
继承性:无
动画性:当值为 length | percentage 时
length: 用长度值来定义最小宽度,不允许负值
percentage: 用百分比来定义最小宽度,不允许负值
版本:CSS2 ,设置或检索对象的最大宽度。
语法:max-width:length | percentage | none
适用于:除非置换内联元素,table-row, table-row-group之外的所有元素
继承性:无
动画性:当值为 length | percentage 时
none: 无最大宽度限制(默认值)
length: 用长度值来定义最大宽度,不允许负值
percentage: 用百分比来定义最大宽度,不允许负值
版本:CSS2 ,检索或设置对象的最小高度。
语法:min-height:length | percentage
适用于:除非置换内联元素,table-row, table-row-group之外的所有元素
继承性:无
动画性:当值为 length | percentage 时
length: 用长度值来定义最小高度,不允许负值
percentage: 用百分比来定义最小高度。不允许负值
版本:CSS2 ,检索或设置对象的最大高度。
语法:max-height:length | percentage | none
适用于:除非置换内联元素,table-row, table-row-group之外的所有元素
继承性:无
动画性:当值为 | 时
none: 无最小高度限制 (默认值)
length: 用长度值来定义最大高度,不允许负值
percentage: 用百分比来定义最大高度,不允许负值
效果如下:
代码如下:
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"/> <title>visibility 样式</title> <style> /*div1宽高为100px,图片宽高为 80px,默认图片没有填满 div1*/ .div1 { width: 100px; height: 100px; background-color: #1b6d85; float: left; } /*div2宽高为100px,图片宽高为 80px,设置图片最小宽高为父容器的宽高,所以会拉伸进行填满*/ .div2 { width: 100px; height: 100px; background-color: #1b6d85; float: left; margin-left: 200px; } .div2 img { /*min-width 与 min-width 只设置其中一个时,另一个会等比例进行缩放*/ min-width: 100%; min-width: 100%; } /*div3宽高为50px,图片宽高为80px,设置图片最大宽高为父容器的宽高,所以会压缩进行填满*/ .div3 { width: 50px; height: 50px; background-color: #1b6d85; float: left; margin-left: 200px; } .div3 img { /*max-width 与 max-height 只设置其中一个时,另一个会等比例进行缩放*/ max-width: 100%; } </style> </head> <body> <div class="div1"> <img src="../image/1.png"> </div> <div class="div2"> <img src="../image/1.png"> </div> <div class="div3"> <img src="../image/1.png"> </div> </body> </html>