CSS max-width



CSS max-width

有时,将元素的宽度限制在一定范围内很有用。
max-width
min-width 这两个属性用于设置元素的最大和最小宽度。
max- CSS中的width 属性用于设置元素内容框的最大宽度。这意味着内容框的宽度可以小于
max-width值,但不能大于。它设置元素宽度的上限。
当内容大于最大宽度时,它将自动更改元素的高度。如果内容小于
max-width,则此属性无效。此属性可确保width属性的值不能大于
max-width 属性的值。它不允许负值。

语法

 max-width: none | length | initial | inherit;

此CSS属性的值定义如下。
none:这是默认值,不限制内容框的宽度。
length:该值定义最大宽度的长度,以px,cm,pt等为单位。
initial:属性为默认值。
inherit:它从其父元素继承该属性。
现在,让我们看一下此CSS属性的示例。

示例

在此示例中,有四个带有内容的段落元素。我们使用
max-width 属性的长度值定义这些段落的最大宽度。第一段的最大宽度为
175px ,第二段为
20em ,第三段为
350pt ,第四段为
10cm
第一段的内容大于
max-width 属性的值,因此在输出中,我们可以看到第一段自动更改。
 <!DOCTYPE html>
<html>
<head>
    <title>
        max-width property
    </title>
    <style>
    p {
        border: 4px solid blue;
        background-color: lightblue;
        font-size: 20px;
    }
    #px {
        max-width: 475px;
    }
    #em {
        max-width: 200em;
    }
    #pt {
        max-width: 350pt;
    }
    #cm {
        max-width: 100cm;
    }
    </style>
</head>
<body>
    <h2> max-width: 175px; </h2>
    <p id="px">
        Hi, Welcome to the bianchenghao6.com. This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
    </p>
    <h2> max-width: 20em; </h2>
    <p id="em">
        Hi, Welcome to the bianchenghao6.com. This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
    </p>
    <h2> max-width: 350pt; </h2>
    <p id="pt">
        Hi, Welcome to the bianchenghao6.com. This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
    </p>
    <h2> max-width: 10cm; </h2>
    <p id="cm">
        Hi, Welcome to the bianchenghao6.com. This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
    </p>
</body>
</html>

输出

CSS max-width_https://bianchenghao6.com_【CSS 教程】_第1张