最大宽度自动更改其值

Question

我有一个关于 max-width 的问题，为什么它会自行改变取决于显示宽度。

这是我的代码：

div {
  height: 100px;
  max-width: 500px;
  background-color: powderblue;
}

所以 max-width 是 500px 但是当我调整我的显示尺寸时，max-width 值改变了。

在下图中，我的结果大小为 150px 宽度： enter image description here

如您所见，我的分区宽度实际上是 150px，而不是我的 max-width 值 500px。

那么为什么 max-width 会自动更改其值？如果显示宽度小于 max-width，那么它与屏幕宽度匹配，这样说是否正确？

干杯

Answer 1

Max-width 确定元素可以具有的最大宽度。这意味着您的元素可以获得小于 max-width 的每个宽度。您应该编写 min-width 来指定您期望的最小宽度。

Min-width:500px;

并写 width 以获得精确值。

Answer 2

和max-width，你告诉浏览器元素的max-width是什么。如果元素的 max-width 大于 500px，它会使元素的高度变大。

与max-width，您设置最大宽度，因此它可以更小但不能大于 500px

Answer 3

Max-width 告诉元素不能超过该点，min-width 告诉元素不能低于该值，因此如果您希望元素不收缩或使用 min-width降低宽度

max-width changes its value automatically