1

我知道我不理解 CSS 不时做的一些事情，但是，我经常将“宽度”样式设置为一个元素（比如一个输入元素），但如果有空间，它会增长以填充它（就好像它被设置为自动）和（比如对于一个选择元素）如果没有选项元素，它会缩小到最小的尺寸（当'宽度'仍然设置时）。

我意识到这些场景很容易用'min-width'和'max-width' CSS样式处理，但我的问题是：为什么在它并没有真正设置任何东西的情况下甚至有一个'width'样式（似乎）？在这种情况下到底发生了什么？

我正在寻找一个有助于我理解 CSS 在这种情况下的行为方式的答案。

--------------------------更新----------- ----------------------------------

正如这里的其他人向我展示的那样，我观察到的行为一定是由其他一些因素引起的（可能是因为输入元素在 td 元素中？有时表格确实看起来做奇怪的事情），显然这里显示的 jsFiddles 没有t复制我的场景。不知道我是如何误解 CSS 这样的，但无论如何，这个问题仍然很有帮助，因为我从关于何时/为什么应该使用“min-width”和“max-width”而不是简单地使用的答案/解释中受益设置“宽度”。

简而言之，“width”、“max-width”和“min-width”在正确的场景下肯定有它们的用途。

4

3 回答 3

3

原因是这样的：

  • 宽度 - 将其翻译为“这是我想要的元素的宽度”。
  • min-width - 将其翻译为“请不要让我的元素宽度小于此值”。
  • max-width - 将其翻译为“请不要让我的元素宽度大于此值”。
于 2013-03-27T17:39:44.190 回答
1

如果您不知道original width容器的名称，并希望将其限制为某个宽度，则max-width使用

如果您想在容器中展开内容，但又不想超过 200px，则使用 max-width,,,,,,,,

考虑这种情况

1.您正在使用width

2.（你不知道容器的宽度）

3.你不希望它超过200px

如果你盲目地放width="200px"，那么容器可能只有 150px，而 50px 被浪费在屏幕上。因此使用了 max-width

于 2013-03-27T17:48:00.057 回答
0

所以我为你做了一些挖掘。97ldave 是正确的，它与浏览器兼容性和用户之间的屏幕分辨率差异有关。

查看w3schools - Width 属性，然后查看w3schools- Max-width 属性。滚动到名为“浏览器兼容性”的部分。看起来Width-min max在 IE 中的支持比其他支持更远。

希望对您有所帮助，该网站可以作为快速参考。

于 2013-03-27T17:38:29.170 回答