html宽度等于高度Web 技巧CSS最小和最年夜宽度/高度常识点及优缺陷

在本文中，我们将详细先容CSS的最大和最小宽度和高度属性，并利用可能的用例和技巧详细阐明每一个属性。

width 属性

首先要谈论的是与宽度干系的属性。
我们有min-width和max-width，它们中的每一个都很主要，都有自己的用例。

Min Width

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

html宽度等于高度Web 技巧CSS最小和最年夜宽度/高度常识点及优缺陷 JavaScript

让我们举一个基本的例子来解释这一点。

我们有一个按钮，里面有一个变革的文本。
文本的范围可能从一个单词到多个单词。
为了确保纵然只有一个单词，它也有最小宽度，该当利用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

<divclass="wrapper"><divclass="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/pen/cfb600cf30acdae9cf6f9cb5347a37cf

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;/Otherstyles/}

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

事例地址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

按钮

对付按钮的最小值和最大值有不同的用例，由于按钮组件有多种变体。
考虑下面的图：

请把稳，按钮的“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{/Otherstyles/min-width:0;}

下面是修复后的样子

根据CSSWG：

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

意味着，将overflow设置为visible值以外的值会导致min-width被打算为0，这办理了我们不设置min-width: 0的问题。

事例源码：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57

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

虽然与min-width比较，这是一个不太常见的问题，但是它可能发生。
只是为了确认，问题与不能少于其内容的弹性项目有关。
结果min-height值被设置为与内容一样长。

考虑以下示例：

用赤色表示的文本该当在父文本中裁剪。
由于面板主体是一个flex项目，以是它的min-height与它的内容相等。
为了防止这种情形，我们该当重新设置最小高度值。
看看HTML和CSS是怎么样的。

HTML

<divclass="c-panel"><h2class="c-panel__title"></h2><divclass="c-panel__body"><divclass="c-panel__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/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100

稠浊最小宽度和最大宽度

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

由于宽度因此像素为单位定义的，因此不能担保上面的方法适用于移动视口。
为理解决这个问题，我们可以利用百分最近代替像素作为最小和最大属性。
考虑下面这个具有article主体的示例。

我为图像添加了以下CSS：

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

事例源码:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124

####　页面包装器/容器

最常用的｀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。

<div>0000</div>/CSS代码/div{width:3ch;background:powderblue;}

在前面的wrapper元素示例中，我们可以利用ch单元，由于它是一个article 主体。

.wrapper{max-width:70ch;/Otherstyles/}对高度未知的元素进行动画处理

在某些情形下，我们面临着使手风琴或移动菜单具故意想不到的内容高度的寻衅。
在这种情形下，max-height可能是一个很好的办理方案。

请考虑以下示例：

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

.c-nav{max-height:0;overflow:hidden;transition:0.3slinear;}.c-nav.is-active{max-height:22rem;}

点击菜单按钮可以看到动画的运行。

事例源码：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da

Hero 元素的最小高度

一样平常来说，我不喜好给元素添加固定的高度。
我以为这样做，会毁坏流式布局的构造。
但有些情形设置固定高度却很有用。

考虑下面的例子，在这里我们有一个设置了固定高度的hero部分。

是，当内容较永劫，它会溢出并离开hero包装器，这可不太好。

为了预先办理这个问题，我们可以利用min-height来代替height。
我们可以用这种办法先办理问题，只管这可能会导致页面看起来很奇怪，但是我认为该当首先防止内容管理系统(CMS)中发生这样的事情。
这样，问题就办理了，看起来也不错。

内容溢出的问题不仅在于内容是否大于固定的hero 高度。
它可以发生在屏幕大小调度作为文本换行的结果。

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

模态组件

对付模态组件，它须要最小和最大宽度，以便可以适应移动设备到PC的屏幕上的适应。