尺寸相关

• width属性

  该属性用于设置元素的宽度，在box-sizing属性值为content-box时，width为元素内容区的宽度，而当属性值为border-box时，width等于内容区宽度加padding加边框宽度。

  默认值为auto，其计算值取决于其他属性；取值也可为长度值，不允许负值，如10px；或者为百分比，百分比参照其包含块的宽度进行计算，同样不允许负值。

• height属性

  该属性用于设置元素的高度，在box-sizing属性值为content-box时，height为元素内容区的高度，而当属性值为border-box时，height等于内容区高度加padding加边框宽度。

  默认值为auto，和取auto的width一样，实际高度取决于其他属性；取值为长度值或者百分比，不允许负值。

• width、height注意点及示例

  • 注意点

    对于img元素，当设置width(height)时，height(width)会自动根据图片的尺寸进行等比例缩放。

  • 示例

    我的宽度是200px，高度是100px。

• min-width、max-width、min-height和max-height属性

  min-width定义元素的最小宽度，默认值为0，取值可为长度值或者百分比，均不允许负值。

  max-width定义元素的最大宽度，默认值为none（即无最大宽度限制），取值可为长度值或者百分比，均不允许负值。

  min-height定义元素的最小高度，默认值为0，取值可为长度值或者百分比，均不允许负值。

  max-height定义元素的最大高度，默认值为none（即无最大高度限制），取值可为长度值或者百分比，均不允许负值。

• min-width、max-width、min-height和max-height注意点即示例

  • 注意点

    如果min-width的值大于max-width的值，则max-width会自动以min-width的值作为自己的值。

    如果min-height的值大于max-height的值，则max-height会自动以min-height的值作为自己的值。

  • 示例

    1. 我的width设置为100px，但是因为我的min-width设置为200px，所以我的实际宽度为200px。
    2. 我的width设置为300px，但是因为我的max-width设置为200px，所以我的实际宽度为200px。
    3. 我的height设置为50px，但是因为我的min-height设置为100px，所以我的实际高度为100px。
    4. 我的height设置为200px，但是因为我的max-height设置为100px，所以我的实际高度为100px。

• min-width、max-width、min-height和max-height兼容IE方法

  因为这四个属性在IE6中不支持，所以需要针对IE6做兼容。

          .min_width {
              min-width: 300px;
              _width: expression(document.body.clientWidth < 300 ? "300px" : "auto");
          }
  
          .max_width {
              max-width: 600px;
              _width: expression(document.body.clientWidth > 600 ? "600px" : "auto");
          }
  
          .min_height {
              min-height: 300px;
              _height: expression(this.scrollHeight < 300 ? "300px" : "auto");
          }
  
          .max_height {
              max-height: 600px;
              _height: expression(this.scrollHeight > 600 ? "600px" : "auto");
          }
  
          .min_and_max_width {
              min-width: 300px;
              max-width: 600px;
              _width: expression(document.body.clientWidth > 600 ? "600px" : (document.body.clientWidth < 300 ? "300px" : "auto"));
          }
  
          .min_and_max_height {
              min-height: 300px;
              max-height: 600px;
              _height: expression(this.scrollHeight > 600 ? "600px" : (this.scrollHeight < 300 ? "300px" : "auto"));
          }
                  

• 参考链接

  • CSS参考手册
  • min-width、max-width、min-height、max-height在IE6下兼容的解决办法