CSS max-width
CSS max-width
有时，将元素的宽度限制在一定范围内很有用。
max-width 和
min-width 这两个属性用于设置元素的最大和最小宽度。
max-width 和
min-width 这两个属性用于设置元素的最大和最小宽度。
max- CSS中的width 属性用于设置元素内容框的最大宽度。这意味着内容框的宽度可以小于
max-width值，但不能大于。它设置元素宽度的上限。
max-width值，但不能大于。它设置元素宽度的上限。
当内容大于最大宽度时，它将自动更改元素的高度。如果内容小于
max-width，则此属性无效。此属性可确保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 属性的长度值定义这些段落的最大宽度。第一段的最大宽度为
175px ，第二段为
20em ，第三段为
350pt ，第四段为
10cm 。
第一段的内容大于
max-width 属性的值，因此在输出中，我们可以看到第一段自动更改。
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>
输出
