css 高度宽度计算属性_最大宽度（CSS属性）

css 高度宽度计算属性

描述 (Description)

This property sets the maximum content width of a block or a replaced element. This maximum width does not include padding, borders, or margins.

此属性设置块或被替换元素的最大内容宽度。 此最大宽度不包括填充，边框或边距。

An element to which a max-width is applied will never be wider than the value specified even if the width property is set to be wider. There is an exception to this rule, however: if min-width is specified with a value greater than that of max-width, the container’s width will be the largest value, which in this case means that the min-width value will be the one that’s applied.

即使将width属性设置为更宽，应用了max-width的元素也永远不会比指定的值宽。 但是，此规则有一个例外：如果min-width指定的值大于max-width ，则容器的width将是最大值，在这种情况下， min-width值将是一种适用。

max-width is often used in conjunction with min-width to produce a width range for the element concerned.

max-width通常与min-width结合使用，以产生有关元素的宽度范围。

Combining max-width and width

结合最大宽度和宽度

Note that max-width and width shouldn’t be applied to the same element using the same unit, as one will override the other. If, for example, the width is set to 150px and the max-width is set to 60px, the actual width of the element will be 60px, and the width declaration will become redundant.

请注意，不应将max-width和width应用于使用相同单位的同一元素，因为一个元素会覆盖另一个元素。 例如，如果将宽度设置为150px，将max-width设置为60px，则元素的实际宽度将为60px，并且宽度声明将变得多余。

The following style rule shows how conflicts are resolved where an element has been given both a width and a max-width using the same unit (pixels in this case):

以下样式规则显示了如何使用相同的单位(在这种情况下为像素)为元素同时指定宽度和max-width来解决冲突：

.example {
  max-width: 60px;
  width: 150px;
}

.example {
  max-width: 60px;
  width: 150px;
}

In the above example, the width of the element will be fixed at 60px.

在上面的示例中，元素的宽度将固定为60px。

However, it’s acceptable to set max-width and width when the values are different units (although it may not be entirely useful, there are a few cases where it can be used to good effect).

但是，当值是不同的单位时，可以设置max-width和width(尽管它可能并不完全有用，但是在某些情况下可以使用它来达到良好的效果)。

This style rule assigns a max-width of 160px to images with the class “example”, and also assigns a width of 50%:

此样式规则为类别为“ example”的图像分配max-width为160px，并且还分配50％的宽度：

img.example {
  width: 50%;
  max-width: 160px;
  height: auto;
}

The final width of the image in the above example will be the smallest value.

在以上示例中，图像的最终宽度将是最小值。

If you want an image to scale when the page width is small, so that the image doesn’t break out of its column, you could use the above example to ensure that the image’s size decreases once the available space is less than 160 pixels.

如果要在页面宽度较小时缩放图像，以使图像不会超出其列，则可以使用上面的示例来确保一旦可用空间小于160像素，图像的大小就会减小。

If the available space is greater than 160 pixels, the image will expand until it’s 160 pixels wide—but no further. This ensures that the image stays at a sensible size—or its correct aspect ratio—when space allows.

如果可用空间大于160像素，则图像将扩展到160像素宽，但不能再扩大。 这样可以确保在空间允许的情况下，图像保持合理尺寸或正确的宽高比。

The min-width property can be used for the reverse of this scenario.

min-width属性可用于这种情况的逆向。

If the contents of a block require more horizontal space than is allowed by the limits that have been set, the behavior is defined by the overflow property.

如果块的内容需要的水平空间超出了已设置的限制所允许的水平，则行为由overflow属性定义。

例 (Example)

This style rule assigns a maximum width of 400 pixels and a minimum width of 100 pixels to paragraphs within the element with ID "example":

此样式规则将ID为"example"的元素的最大宽度分配为400像素，最小宽度为100像素：

#example p {
  max-width: 400px;
  min-width: 100px;
}

值 (Value)

The property takes a CSS length (px, pt, em, and so on), a percentage, or the keyword none. Negative length values are illegal.

该属性采用CSS长度(px，pt，em等)，百分比或关键字none。 负长度值是非法的。

Percentage values refer to the width of the containing block. If the containing block’s width is negative, the used value is none.

百分比值是指包含块的宽度。 如果包含块的宽度为负，则使用的值为none 。

翻译自: https://www.sitepoint.com/max-width-css-property/

css 高度宽度计算属性