通常，我们想限制元素相对于其父元素的宽度，同时使其动态。因此，具有基础宽度或高度并能够根据可用空间进行扩展。例如，假设我们有一个按钮，该按钮应具有最小宽度，并且该宽度不应低于该最小宽度。这是最大和最小属性变得很方便的地方。

在本文中，我们将介绍宽度和高度的最大和最小CSS属性，并通过可能的用例和技巧详细解释每个属性。

宽度属性

首先要讨论的是宽度相关的属性。我们有min-width和max-width，并且每一个都很重要，并且都有其用例。

最小宽度

设置的值时min-width，其好处在于防止width属性的使用值变得小于的指定值min-width。请注意，的默认值min-width是auto，它解析为0。

让我们以一个基本的例子来证明这一点。

我们有一个按钮，其中的文本不同。文本的范围可以从一个单词到多个单词。为了确保即使只有一个字也将具有最小宽度，min-width应该使用。最小宽度是100px这样的，即使按钮的内容很短（例如“完成”字或仅是图标），它的大小也仍然足以引起注意。在使用阿拉伯语等多语言网站时，这一点非常重要。考虑以下来自Twitter的示例：

在以前的情况下，按钮上带有单词“تم”，表示完成。按钮的宽度太小，因此我min-width在后面的案例中增加了它的宽度。

最小宽度和填充

虽然min-width可以在内容较长的情况下延长按钮的宽度，padding但应在水平面上添加按钮以实现适当的外观。

最大宽度

设置的值时max-width，其好处在于防止width属性的使用值变得大于的指定值max-width。其缺省值max-width是none。

一个常见且简单的用例max-width是将其与图像一起使用。考虑以下示例：

图像大于其父元素。通过使用max-width: 100%，图像的宽度不会超过其父代的宽度。如果图像小于其父图像，max-width: 100%则不会对图像产生实际影响，因为它小于其父图像。

使用最小宽度和最大宽度

当两个min-width和max-width用于一个元件，它们中的哪一个将覆盖其他？换句话说，哪个优先级更高？

如果min-widthvalue大于max-width，则该min-width值将作为元素的宽度。考虑以下示例。

<div class="wrapper">
  <div class="sub"></div>
</div>

.sub {
  width: 100px;
  min-width: 50%;
  max-width: 100%;
}

初始width值为100px，然后加上min-width和max-width。结果是元素宽度未超过50%其包含的块/父元素。

高度属性

除了最小和最大宽度属性外，我们还具有与高度相同的属性。

最小高度

设置的值时min-height，其好处在于防止height属性的使用值变得小于的指定值min-height。请注意，的默认值min-height是auto，它解析为0。

让我们以一个示例来演示一个简单的用例。

我们有一个带有描述文字的部分。目标是使该部分的高度最小，以便可以处理短内容或长内容。考虑以下基本情况：

.sub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100px;
  color: #fff;
  background: #3c78dB;
}

最小高度为100px，使用flexbox时，内容在水平和垂直方向上居中。如果内容更长，会发生什么？例如一段？

是的，你猜对了！该部分的高度将扩展以包含新内容。有了它，我们可以构建具有流动性并响应其内容的组件。

最大高度

设置的值时max-height，其好处在于防止height属性的使用值变得大于的指定值max-height。请注意，默认值max-height是none。

考虑下面的示例，其中我设置max-height了内容。但是，因为它大于指定的空间，所以会发生溢出。因此，文本超出了其父边界。

最小和最大属性的用例

我们将通过一些常见和不常见的用例min-width，min-height，max-width，和max-height。

标签列表

当具有标签列表时，建议限制标签的最小宽度，这样，如果标签的内容较短，则不会影响其外观。

通过具有这种灵活性，无论内容有多短，标签都将看起来不错。但是，如果内容作者输入了非常长的标签名称，而他使用的内容管理系统没有最大字符长度的标签，将会发生什么情况呢？我们也可以使用max-width。

.c-tag {
  display: inline-block;
  min-width: 100px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*Other styles*/
}

通过使用max-width，标签宽度将被限制为特定值。但是，这还不够。标签名称应被截断。

纽扣

按钮的最小值和最大值有不同的用例，因为按钮组件有多种变体。考虑下图：

请注意，按钮的“获取”宽度太小。如果未设置最小宽度，则由于任何原因而没有文本时，情况可能会变得更糟。在这种情况下，设置最小宽度很重要。

使用Flexbox将最小宽度设置为零

的默认值min-width是auto，计算为零。当元素是弹性项目时，的值min-width不会计算为零。伸缩项目的最小大小等于其内容的大小。

根据CSSWG：

默认情况下，弹性项目不会缩小到其最小内容大小（最长的单词或固定大小的元素的长度）以下。要更改此设置，请设置min-width或min-height属性。

考虑以下示例。

这个人的名字有一个很长的单词，导致溢出和水平滚动。不过，我在标题中添加了以下CSS来截断它：

.c-person__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

由于标题是弹性项目，解决方案是重置min-width并强制使其变为零。

.c-person__name {
    /*Other styles*/
    min-width: 0;
}

修复后的外观如下：

根据CSSWG：

在其主轴上可见溢出的弹性项目上，当在弹性项目的主轴min-size属性中指定时，指定自动最小尺寸。

这意味着，将其设置overflow为visiblevalue 以外的值可能会导致min-width将a计算为零，从而无需设置即可解决我们的问题min-width: 0。

使用Flexbox将最小高度设置为零

尽管与相比min-width，这是一个不太常见的问题，但是它可能会发生。只是为了确认，问题与弹性项目有关，该弹性项目不能短于其内容。结果，该min-height值设置为内容的长度。

考虑以下示例：

红色的文本应剪切在其父级中。由于面板主体是柔韧性项目，因此它min-height与其内容相同。为防止这种情况，我们应该重置最小高度值。让我们看看HTML和CSS如何：

<div class="c-panel">
  <h2 class="c-panel__title"><!-- Title --></h2>
  <div class="c-panel__body">
    <div class="c-panel__content"><!-- Content --></div>
  </div>
</div>

.c-panel {
  display: flex;
  flex-direction: column;
  height: 180px;
}

.c-panel__body {
  min-height: 0;
}

.c-panel__content {
  overflow-y: scroll;
  height: 100%;
}

通过添加min-height: 0到面板主体中，这将重置属性，并且现在应该可以正常工作。

演示版

混合最小宽度和最大宽度

在某些情况下，我们有一个宽度最小的元素，但同时它没有最大宽度。如果没有作者的意图，这可能会导致组件太宽。考虑以下示例：

由于宽度是以像素为单位定义的，因此不能保证以上内容适用于移动视口。为了解决这个问题，我们可以使用百分比代替像素作为最小和最大属性。考虑以下具有文章正文的示例。

我为图像添加了以下CSS：

img {
  min-width: 35%;
  max-width: 70%;
}

页面包装器/容器

最有用的用例之一max-width是页面包装器或容器。通过在页面上增加最大宽度，我们可以确保内容可读且易于用户扫描。

下面是居中包装的示例，该包装在左侧和右侧具有水平填充。

.wrapper {
    max-width: 1170px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}

最大宽度和ch单位

该ch单元是等于0在元素的字体（零）字符宽度。通过将此单元与组合max-width。根据Smashing Magazine上的这篇文章，建议的行长为每行45到75个字符。

在前面的wrapper元素示例中ch，由于它是商品主体，因此我们可以从中受益。

.wrapper {
    max-width: 70ch;
    /* Other styles */
}

对高度未知的元素进行动画处理

在某些情况下，我们面临着使手风琴动画或具有意外内容高度的移动菜单面临的挑战。在这种情况下，max-height可能是一个很好的解决方案。

考虑以下示例：

单击菜单按钮后，菜单应随动画从上到下滑动。如果没有固定高度（不建议使用），除非使用JavaScript，否则这是不可能的。但是，使用max-height，这是可能的。这样做的想法是为高度增加一个很大的值，例如，max-height: 20rem可能无法达到，然后我们可以从max-height: 0到设置动画max-height: 20rem。

.c-nav {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s linear;
}

.c-nav.is-active {
    max-height: 22rem;
}

单击菜单按钮以查看动画。

英雄元素的最低高度

通常，我不喜欢为元素添加固定的高度。我觉得这样做，我反对使网变得流畅，而要构建像水一样流畅的组件。在添加非常长的内容的情况下（在这种情况下），将最小高度添加到英雄部分很有用。

考虑以下示例，其中我们的英雄区域设置了固定的高度。一切看起来都很好。

但是，如果内容较长，它将溢出并从英雄包装器中退出。这个不好。

要预先解决该问题，我们可以添加min-height而不是height，我们至少这样做是为了挽救我们的良心。即使这可能会使页面看起来很奇怪，但我认为应该首先防止这种情况在内容管理系统（CMS）中发生。这样，该问题已解决，并且看起来不错。

内容溢出的问题不仅在于内容大于固定的英雄高度。由于文本换行，可能会在屏幕调整大小时发生。

如果min-height改用上述方法，则根本不会发生上述情况。

模态分量

对于模态组件，它需要最小和最大宽度，以便可以在从移动设备到台式机的屏幕上工作。在这方面，我记得关于CSS技巧的一篇有趣的文章，讨论了用于此目的的内容。

概念1

.c-modal__body {
    width: 600px;
    max-width: 100%;
}

概念2

.c-modal__body {
    width: 100%;
    max-width: 600px;
}

对我来说，我更喜欢第二个概念，因为我只需要定义即可max-width: 600px。情态是一个<div>元素，因此它已经具有其父元素的100％宽度，对吗？

考虑下面为模态设计简化的测试案例。请注意，如果可用视口空间不足，则宽度如何更改为其父级的100％。

最小高度和粘性页脚

当网站的内容不够长时，预计页脚不会停留在底部。让我们以一个直观的例子来更好地说明这一点。

请注意，页脚未粘贴在浏览器窗口的末尾。那是因为内容不足以达到浏览器窗口高度的长度。修复后，其外观应如下所示：

首先，将body元素制作为flexbox容器，然后将其最小高度设置为视口高度的100％。

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    margin-top: auto;
}

我建议检查该文章关于粘页脚。

演示版

具有最大宽度/高度和视口单位的流体比率

为了使比例容器能够根据视口大小进行响应缩放，引入了padding hack。现在，我们可以通过组合CSS中的视口单位和最大宽度/高度来模仿相同的行为。

根据Miriam Suzanne 的文章，我想解释一下它是如何工作的。

我们有一个尺寸为644 * 1000像素的图像。为了使其流畅，我们需要以下内容：

• 长宽比：高/宽
• 容器的宽度：可以是固定数字，也可以是动态数字（100％）
• 将height视口宽度乘以宽高比的100％
• 设置max-height容器宽度乘以长宽比
• 将设置max-width为等于容器宽度

img {
  --ratio: 664 / 1000;
  --container-width: 30em;
  display: block;
  height: calc(100vw * var(--ratio));
  max-height: calc(var(--container-width) * var(--ratio));
  width: 100%;
  max-width: var(--container-width);
}

HTML /正文高度为100％

当我们希望<body>元素占据视口的100％高度时。我们该怎么做？这是Web社区中的常见问题/用例，如StackOverflow上的此问题中所示。

首先，我们需要添加height: 100%到<html>元素。这将确保根元素的高度为100％。然后，我们将其添加min-height到<body>元素中，并使用了原因min-height，因为无论其内容多长时间，它都可以使车身高度保持动态。

html {
  height: 100%;
}

body {
  min-height: 100%;
}

演示版

笔记

最小宽度和块元素

在某些情况下，我们忘记了我们要应用于min-width的元素是一个块元素。结果，这可能会造成混淆，并且不会影响该元素。确保该元素不是块级元素。

CSS比较功能

在研究人们在StackOverflow中面临的痛点和问题时，我偶然发现了这个问题，作者问了以下问题：

是否可以做这样的事情 max-width: calc(max(500px, 100% - 80px)) 或 max-width: max(500px, calc(100% - 80px)))

所需的行为是保持元素的宽度500px，并且不应超过该宽度。如果视口的宽度不足以容纳该元素，则其宽度将为100% - 80px。

至于上述问题的解决方案，我尝试了第二种解决方案，并且在撰写本文时已在最新的Chrome（v79）和Safari（v13.0.3）中运行。由于这超出了本文的范围，因此我可能会很快写出来，因此我将探讨问题中建议的解决方案。

.yourselector {
  max-width: calc(100% - 80px);
}

/* Update: I changed the max-width from 500px to 580px. Thanks @fvsch */
@media screen and (max-width: 580px) {
  .yourselector {
    max-width: 500px;
  }
}