CSS 属性

max-width 属性用于设置元素宽度的上限。

属性值

  • none − 元素的宽度没有限制。

  • <length> − 任何长度单位。元素的宽度值永远不能超过此距离。

  • <percentage>: 将元素的宽度限制为包含块的宽度的百分比。

  • initial: 将 max-width 的值设置为其默认值。

  • inherit: max-width 的值从其父级继承值。

适用范围

除不可替换的内联元素和表格元素之外的所有 HTML 元素。

DOM 语法

object.style.maxWidth = "50px"

CSS max-width: <length> 值

以下示例演示 max-width: 100px 属性将元素的最大宽度设置为 100px -

<html>
<head>
<style>
   p {
      max-width:100px;
      height:200px;
      border:4px solid #0000ff;
      padding:5px;
      margin:10px;
   }
</style>
</head>
<body>
   <p>
      This paragraph is 200px high and max-width is 100px
      Hence the border is not covering the entire text and
      there is some part of text outside the border. This is
      due to the max-width value set for p tag.
   </p>
</body>
</html>

CSS max-width: 具有不同的值

这是另一个示例，演示了 max-width 属性中不同类型值的用法 -

<html>
<head>
<style>
   div.a {
      border: 2px solid red;
      max-width: 200px;
      width: 400px;
      overflow: auto;
      margin-bottom: 4px;
   }
   div.b {
      border: 2px solid blue;
      max-width: 40%;
      overflow: auto;
      margin-bottom: 4px;
   }
   div.c {
      border: 2px solid red;
      max-width: none;
      width: 400px;
      overflow: auto;
      margin-bottom: 4px;
   }
</style>
</head>
<body>
   <div class="a">
      <h2>max-width: 200px and width:400px</h2>
      <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 200px less than the width which is 400px.</p>
   </div>
   <div class="b">
      <h2>max-width: 40%</h2>
      <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is 40%.</p>
   </div>
      <div class="c">
      <h2>max-width: none (default):</h2>
      <p>The <i>max-width</i> property allows you to specify maximum width of a box. Here the max-width is none.</p>
   </div>
</body>
</html>