html - 如何使用最小宽度、最大宽度和宽度 100%

Question

任何人都请帮我描述一个合适的最小宽度最大宽度和宽度 100% 的例子，我为什么要专门使用这个？

编辑

对于大多数计算机分辨率可能匹配的最小宽度，我应该使用什么。对于大多数计算机分辨率可能匹配的最大宽度，我应该使用什么。

编辑我需要更好的例子，因为 yahoo.com 使用

score 14 · Accepted Answer

min-width：如果设置为 50px，则默认情况下，您的 div 宽度为 50px。如果 div 内的内容的宽度超过 50px，那么它（你的 div 的最小宽度）将会扩展。

max-width：如果设置为 50px，如果 div 内的内容宽度大于 50px，那么它（你的 div 的 max-width）将不会展开，根据你的溢出设置，可能会出现水平滚动。

width:100%默认情况下，div 的宽度为 100%，但如果您有浮动 div，并且希望它们占据容器的所有水平空间，那么 width:100% 确实有帮助。

score 5 · Accepted Answer

这很笼统，但是：

min-width在您将宽度设置为 % 并且您不希望元素太小的情况下非常有用。
```
<div style="100%">
    <div style="width:30%;min-width:50px;"></div>
</div>
```

所以如果父 div 太小，孩子至少有 50px。

或者，如果 div 取决于父窗口宽度，则可以使用它。min-width 的优先级高于 width 和 max-width。

score 1 · Accepted Answer

最小宽度：

div 的最小宽度，它永远不会小于给定的宽度。

如果 min-width:50px 的 div 将始终最小为 50 px 或更大。

如果 min-width:50% div 将是其所在对象的 50%。

（如果它在 1200px 的 div 中，它将是 600px）

（如果第一个 div 将是屏幕的 50%）

最大宽度

与最小值相同，但现在它永远不会变大而不是永远不会变小。因此，如果：

最大宽度：50%

div 永远不会大于其所在对象的 50%。

如果您希望页面在每个分辨率上看起来完全相同，则使用 %。

如果你有 1 个宽度为 80% 的 div

 <div id="1">

和其中 1 个 div，宽度为 50%

   <div id="2">

div 2 将是 80% 的 50%，因此它将是总页面的 40%。

如果您的 div 没有宽度，则可以使用 min-width 和 max width：

然后，div 将介于 min-width 和 max-width 之间，具体取决于内容。

如果你使用 width:100% 它使 div 100% 成为对象的宽度。

如果它的第一个 div 是屏幕的整个宽度。

如果它在宽度为 500px 的 div 中，则 div 将是 500 px 的 100% 所以 500px

score 1 · Accepted Answer

min-width用于固定最小宽度，宽度值达到给定范围后，div会自动开始展开

max-width用于在该范围 div 不会得到扩展之后给出最大宽度。

width:100%将 div 扩展到浏览器/父元素的可用空间

4 回答 4