css max-width_CSS中的max-width属性

css max-width

CSS | 最大宽度属性 (CSS | max-width property)

The max-width property is used to help in setting the width of an element to the maximum. Although if the element or content is already larger than the maximum width then the height of that content or element will be changed.

max-width属性用于帮助将元素的宽度设置为最大。尽管如果元素或内容已经大于最大宽度，则该内容或元素的高度将被更改。

The max-width property doesn't work on content which is smaller than the maximum width. The maximum width property overrides the width property. The default value of the max-width property is none. The width of the element can be measured in terms of %, px, cm or none.

max-width属性不适用于小于最大宽度的内容。最大宽度属性将覆盖width属性。 max-width属性的默认值为none。元素的宽度可以用％， px ， cm或不测量。

Syntax:

句法：

    Element
{
max-width : 50% / 50px /50cm etc.
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
.element1 {
background-color: #f40;
color: #ffffff;
max-width: 50%;
}
.element2 {
background-color: #f40;
color: #ffffff;
max-width: 200px;
}
.element3 {
background-color: #f40;
color: #ffffff;
max-width: 300px;
}
</style>
</head>
<body>
<div class="element1">
<p>This is sample text in element1 DIV.</p>
</div>
<div class="element2">
<p>This is sample text in element2 DIV.</p>
</div>
<div class="element3">
<p>This is sample text in element3 DIV.</p>
</div>
</body>
</html>

Output

输出量

In the above example, there are three CSS classes element1, element2 and element3 and applied max-width are 50%, 200px and 300px respectively.

在上面的示例中，存在三个CSS类element1 ， element2和element3，并且所应用的最大宽度分别为50％， 200px和300px 。

属性值 (Property values)

Value	Description
none	There is no maximum width. This is default.
length	It defines the maximum width in px, cm, etc.
%	This is used to define the maximum width in percent of the containing block.
initial	This sets this property to its default value.
inherit	This inherits this property from its parent element.

值	描述
没有	没有最大宽度。这是默认值。
长度	它以px，cm等为单位定义最大宽度。
％	这用于定义包含块的最大宽度(以百分比为单位)。
初始	将此属性设置为其默认值。
继承	这将从其父元素继承此属性。

Hence, the max-width property comes in handy when you want to style your element in a very specific manner i.e., to adjust the width.

因此，当您要以非常特定的方式(例如调整宽度)来设置元素样式时， max-width属性会派上用场。

Sometimes a website focuses more on its content for the audience, they want their content to be comprehensive and legible. Those websites tend to keep the width of their content a bit large.

有时，网站会更着重于面向受众的内容，他们希望其内容全面且清晰易读。这些网站倾向于将其内容的宽度保持较大。

But not everywhere this property can be applied as you do not want your site to look clumsy or congested. Thus, one needs to be very careful while using this property to decide where to use it.

但是，并非所有地方都可以应用此属性，因为您不希望站点显得笨拙或拥挤。因此，在使用此属性来决定在哪里使用它时需要非常小心。