乐趣区

Web-技术CSS最小和最大宽度高度知识点及优缺点

jiezi

作者：Ahmad shaded
译者：前端小智
起源：sitepoint

点赞再看 ，微信搜寻【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

通常，咱们心愿限度元素绝对于其父元素的宽度，同时使其具备动态性。因而，有一个根底宽度或高度的能力，使其扩大的根底上，可用的空间。比如说，咱们有一个按钮，它的宽度应该是最小的，不应该低于它的宽度。这就是最大和最小属性变得不便的中央。

在本文中，咱们将具体介绍 CSS 的最大和最小宽度和高度属性，并应用可能的用例和技巧具体解释每一个属性。

width 属性

首先要探讨的是与宽度相干的属性。咱们有 min-width 和max-width，它们中的每一个都很重要，都有本人的用例。

Min Width

设置 min-width 的值时，其益处在于避免 width 属性应用的值变得小于 min-width 的指定值。请留神，min-width的默认值是auto，它解析为0。

让咱们举一个根本的例子来阐明这一点。

咱们有一个按钮，外面有一个变动的文本。文本的范畴可能从一个单词到多个单词。为了确保即便只有一个单词，它也有最小宽度，应该应用min-width。

最小宽度为100px，这样即便按钮的内容很短，比方Done，或者只有一个图标，它依然足够大，能够被留神到。在应用阿拉伯语等多语言网站时，这一点十分重要。思考以下来自 Twitter 的示例：

在以前的状况下，按钮上带有单词“تم”，示意实现。按钮的宽度太小，因而在前面的案例中，我减少了它的最小宽度。

min-width 和 padding

在内容较长的状况下，min-width能够扩大按钮的宽度，而程度方向上的 padding 应该被增加，以实现一个适合的外观按钮。

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

Max Width

在设置 max-width 值时，它的益处在于避免 width 属性应用的值超过 max-width 的指定值。max-width的默认值是none。

max-width的常见且简略的用例是将其与图像一起应用。思考以下示例：

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

应用最小宽度和最大宽度

当 min-width 和max-width都用于一个元素时，它们中的哪一个将笼罩另一个? 换句话说，哪个优先级更高?

html

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

css

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

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

height 属性

除了最小和最大宽度属性外，咱们还具备与高度雷同的属性。

min-height

设置 min-height 的值时，其益处在于避免应用的 height 属性值变得小于 min-height 的指定值。请留神，最小高度的默认值为auto，它解析为0。

咱们用一个简略的例子来演示一下。

咱们有一个带有形容文本的局部。指标是为 section 设置一个最小高度，这样它就能够解决短或长内容。思考上面的根本状况

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

最小高度为100px，应用 flexbox 时，内容程度和垂直居中。如果内容更长，会产生什么？例如一段？

是的，你猜对了!section的高度将开展以蕴含新内容。有了它，咱们就能够构建灵便的组件，并对其内容做出响应。

事例源码:https://codepen.io/shadeed/pe…

max-height

在设置 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，标签宽度将被限度为特定值。然而，这还不够，标签名称应被截断。

事例地址：https://codepen.io/shadeed/pe…

按钮

对于按钮的最小值和最大值有不同的用例，因为按钮组件有多种变体。思考上面的图：

请留神，按钮的 “Get” 宽度太小。如果不设置最小宽度，则因为任何起因而没有文本时，状况可能会变得更糟。在这种状况下，设置最小宽度很重要。

应用 flexbox 将最小宽度设置为零

min-width的默认值是 auto，它被计算为0。当一个元素是一个flex 项时，min-width的值不会计算为零。flex 我的项目的最小大小等于其内容的大小。

依据 CSSWG：

默认状况下，flex我的项目不会放大到它们的最小内容大小 (最长单词或固定大小元素的长度) 以下。要更改此设置，请设置 min-width 或 min-height属性。

思考上面的例子

这个人的名字有一个很长的单词，这导致了溢出和程度滚动。尽管如此，我还是在题目中增加了上面的 CSS 来截断它

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

因为 title 是flex我的项目，因而解决方案是重置 min-width 并将其强制为零。

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

上面是修复后的样子

依据 CSSWG：

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

意味着，将 overflow 设置为 visible 值以外的值会导致 min-width 被计算为 0，这解决了咱们不设置min-width: 0 的问题。

事例源码：https://codepen.io/shadeed/pe…

应用 flexbox 将最小高度设置为零

尽管与 min-width 相比，这是一个不太常见的问题，然而它可能产生。只是为了确认，问题与不能少于其内容的弹性我的项目无关。后果 min-height 值被设置为与内容一样长。

思考以下示例：

用红色示意的文本应该在父文本中裁剪。因为面板主体是一个 flex 我的项目，所以它的 min-height 与它的内容相等。为了避免这种状况，咱们应该从新设置最小高度值。看看 HTML 和 CSS 是怎么样的。

HTML

<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>

CSS

.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，这将重置该属性，并且当初应该能够失常工作。

事例源码：https://codepen.io/shadeed/pe…

混合最小宽度和最大宽度

在某些状况下，咱们有一个最小宽度的元素，但同时，它没有最大宽度。这可能会导致组件太宽，而咱们并不想这样做。思考以下示例

因为宽度是以像素为单位定义的，因而不能保障下面的办法实用于挪动视口。为了解决这个问题，咱们能够应用百分比来代替像素作为最小和最大属性。思考上面这个具备 article 主体的示例。

我为图像增加了以下 CSS：

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

事例源码:https://codepen.io/shadeed/pe…

页面包装器 / 容器

最罕用的`max-width`用例之一是页面包装器或容器。通过向页面增加最大宽度，咱们能够确保内容对用户来说是可读的、易于浏览的。

上面是一个包装器的例子，它是居中的，左右两边有程度的填充。

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

最大宽度和 ch 单位

ch 是一个绝对于数字 0 的大小，1ch 就是数字 0 的宽度。如定义一个 3ch 的宽度，那么就只能装下 3个0。

<!-- HTML 代码 -->

<div>0000</div>

/* CSS 代码 */

div {
  width: 3ch;
  background: powderblue;
}

在后面的 wrapper 元素示例中，咱们能够利用 ch 单元，因为它是一个article 主体。

.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;}

点击菜单按钮能够看到动画的运行。

事例源码：https://codepen.io/shadeed/pe…

Hero 元素的最小高度

一般来说，我不喜爱给元素增加固定的高度。我感觉这样做，会毁坏流式布局的构造。但有些状况设置固定高度却很有用。

思考上面的例子，在这里咱们有一个设置了固定高度的 hero 局部。

是，当内容较长时，它会溢出并来到 hero 包装器，这可不太好。

为了事后解决这个问题，咱们能够应用 min-height 来代替 height。咱们能够用这种形式先解决问题，只管这可能会导致页面看起来很奇怪，然而我认为应该首先避免内容管理系统(CMS) 中产生这样的事件。这样，问题就解决了，看起来也不错。

内容溢出的问题不仅在于内容是否大于固定的hero 高度。它能够产生在屏幕大小调整作为文本换行的后果。

如果改用min-height，则上述情况基本不会产生。

大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。

模态组件

对于模态组件，它须要最小和最大宽度，以便能够适应挪动设施到 PC 的屏幕上的适应。

思路 1 

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

思路 2 

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

对于我来说，我更喜爱第二个思路，因为我只须要定义 max-width: 600px。modal 是一个 <div> 元素，因而它曾经具备其父元素的 100% 宽度，对吗？

思考上面为模态设计简化的测试案例。请留神，如果可用视口空间有余，则宽度如何更改为其父级的100%。

事例源码：https://codepen.io/shadeed/pe…

最小高度和粘性页脚

当一个网站的内容不够长，它心愿看到页脚粘到底部。让咱们用一个可视化的例子来更好地展现这一点。

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

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

事例源码：https://codepen.io/shadeed/pe…

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

为了使比例容器可能依据视口大小进行响应缩放，引入了 padding hack。当初，咱们能够通过组合 CSS 中的视口单位和最大宽度 / 高度来模拟雷同的行为。

咱们有一个尺寸为 644 * 1000 像素的图像。为了使其晦涩，咱们须要以下内容：

  • 纵横比：高度 / 宽度
  • 容器的宽度：能够是固定数字，也能够是动静数字（100%）
  • 设置 height 为视口宽度的 100%乘以纵横比
  • 设置max-heigh，该高度是容器的宽度乘以纵横比
  • max-width设置为等于容器宽度

人才们的【三连】就是小智一直分享的最大能源，如果本篇博客有任何谬误和倡议，欢送人才们留言，最初，谢谢大家的观看。

原文：https://www.impressivewebs.co…

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

交换

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。

退出移动版