CSS - min-width 属性

CSS min-width 属性设置元素的最小宽度。如果内容超过最小宽度，元素将扩展以适应内容。如果内容适合指定的最小宽度，则对元素的大小没有影响。

语法

min-width: length | percentage | initial | inherit;

属性值

值	描述
长度	使用长度单位（例如 px、em、rem 等）设置元素的最小宽度。默认值为 0。
百分比	使用百分比值（例如 10%）相对于容器的大小设置元素的最小宽度。
初始	将其属性设置为默认值。
继承	从父元素继承该属性。

CSS Min Width 属性示例

以下示例说明了使用不同值的 min-width 属性。

使用长度值的最小宽度属性

要设置元素宽度的最小限制，我们可以使用长度单位（例如 px、em、rem 等）指定最小宽度值。如果内容大于 min-width，则元素会扩展以容纳内容。如果内容小于 min-width，则空间可见。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         padding: 5px;
         background-color: lightgreen;
      }

      .display {
         display: inline-block;
      }

      .ex1 {
         min-width: 400px;
      }

      .ex2 {
         min-width: 30em;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-width property
   </h2>
   <h4>
      min-width: 400px (the minimum width is 400px, 
      if content is larger, the height will increase.)
   </h4>
   <span class="container ex1 display">
      TutorialsPoint provides extensive online tutorials
   </span>
   <br/>
   <h4>
      min-width: 30em (the minimum width is 30em, 
      if content is larger, the height will increase.)
   </h4>
   <span class="container ex2 display">
      TutorialsPoint provides extensive online tutorials
   </span>
</body>
</html>

使用百分比值的最小宽度属性

要设置元素宽度的最小限制，我们可以使用百分比值（例如 10%）相对于包含元素的大小指定最小宽度值。如果内容大于 min-width，则元素会扩展以容纳内容。如果内容小于 min-width，则空间可见。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .props {
         display: inline-block;
         padding: 15px;
         background-color: lightgreen;
      }

      .ex1 {
         min-width: 70%;
      }

      .ex2 {
         min-width: 90%;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-width property
   </h2>
   <h4>
      min-width: 70% (the minimum width is 70% of 
      the body's width, height increases, if content 
      is larger than the min-width)
   </h4>

   <span class="ex1 props">
      TutorialsPoint provides extensive online tutorials
   </span>
   <br/>
   <h4>
      min-width: 90% (the minimum width is 90% of 
      the body's width, height increases, if content 
      is larger than the min-width)
   </h4>

   <span class="ex2 props">
      TutorialsPoint provides extensive online tutorials
   </span>
</body>
</html>

支持的浏览器

属性
min-width	1.0	7.0	1.0	2.0.2	7.0

css_properties_reference.htm

打印页面