CSS max-width 属性

CSS max-width 语法

在 CSS 中，max-width 属性用于定义元素的最大宽度。

语法：

max-width: 取值;

说明：

max-width 的取值主要有以下 2 种：

关键字：none（默认值，不限制宽度）、fit-content 等。
数值：px、%、rem 等。

对于 max-width 属性，小伙伴们要清楚以下几点。

如果 width 的值大于 max-width，此时 max-width 属性会覆盖 width 属性。
max-width 属性不会覆盖 min-width 属性。如果 min-width 大于 max-width，则 max-width 会被忽略，元素宽度由 min-width 决定。
max-width 对于创建响应式设计非常有用，它可以确保元素在较小的屏幕上收缩，但在较大的屏幕上不会变得过宽。

CSS max-width 摘要

属于	CSS 盒子模型
使用频率	高
是否继承	否
默认值	none
兼容性	查看
官方文档	查看
MDN	查看

CSS max-width 示例

接下来，我们通过几个简单的例子来讲解一下 CSS max-width 属性是如何使用的。

示例 1：max-width 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p {
            max-width: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <p>绿叶网绿叶网</p>
    <p>绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网</p>
    <p>绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网绿叶网</p>
</body>
</html>

页面效果如下图所示。

max-width 基本用法

分析：

由于 p 元素设置了 max-width: 200px;，因此由它内容撑起的宽度最大值是 200px。

示例 2：max-width 实现响应式图片

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .container {
            width: 100px;
            height: 200px;
            border: 1px solid red;
        }
        img {
            max-width: 100%;
            height: auto;    /* 保持图片高宽比 */
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="imgs/bird.jpg" alt="">
    </div>
</body>
</html>

页面效果如下图所示。

max-width 实现响应式图片

分析：

在移动端开发中，我们经常使用 max-width: 100%; 来确保图片不会超过其父容器的宽度。

在这个例子中，虽然图片的原始宽度可能很大，但由于设置了 max-width: 100%;，因此它会被强制缩小以适应 container 的 100px 宽度。如果我们把 max-width: 100%;，此时会发现图片就溢出容器了。

CSS 与尺寸相关的属性

在 CSS 中，与尺寸相关的属性有很多，常用的如下表所示。

CSS 与尺寸相关的属性
属性	说明
width	定义元素的宽度
height	定义元素的高度
max-width	定义元素的最大宽度，防止其超过此值
max-height	定义元素的最大高度，防止其超过此值
min-width	定义元素的最小宽度，确保其不小于此值
min-height	定义元素的最小高度，确保其不小于此值