min-width: 100%; width: auto实际上是什么意思？

Question

8

我找到了一个在CodePen上的全屏视频好例子： https://codepen.io/dudleystorey/pen/knqyK 我对以下样式不太理解：

video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

为什么我们不能只指定最小宽度和最小高度？为什么需要将宽度和高度设置为自动？

- twelve_chairs

4个回答

1

我在Chrome中测试过，去掉width: auto;和height: auto;属性后它可以正常工作。

你可能正在看到装箱式编程的一个例子（即存在的代码是因为程序员认为它是必要的，但实际上它并不是必要的）- 或者它可能是由于旧版浏览器的错误（如果是这样的话，那很奇怪，因为所有支持<video>的浏览器都支持高度符合CSS布局）。

- Dai

感谢您的回答。正如您所提到的，与<video>元素相比，更多浏览器支持min/max-width/height（minmaxwh和video）。因此，在提供的示例中使用width: auto;和height: auto;并不是很有意义。 - twelve_chairs

1

我觉得这个例子不太好，min-width:100% 对我来说没有意义。

考虑一下这个：

div{
  width:100%;
  min-width:600px;
}

在这种情况下，如果页面或div容器的宽度小于600px（比如400px），那么它会将div的宽度默认设置为600px，并添加一个滚动条——这个宽度大于100%。

- Polynomial Proton

感谢您的回答。在这种情况下，min-width:100％; min-height:100％会破坏video的宽高比。有关更多详细信息，请参见缩放HTML5视频并破坏宽高比以填充整个站点。 - twelve_chairs

0

宽度：自动

像 div 或 p 这样的块级元素的初始宽度是自动的。这使其扩展以占据其包含块内所有可用的水平空间。如果它有任何水平填充或边框，则这些宽度不会添加到元素的总宽度中。

宽度100％

另一方面，如果您指定 width:100%，则元素的总宽度将是其包含块的100％加上任何水平边距、填充和边框（除非您使用了 box-sizing:border-box，在这种情况下，只有边距被添加到100％以更改其总宽度的计算方式）。这可能是您想要的，但很可能不是。

最小宽度：

CSS 中的 min-width 属性用于设置指定元素的最小宽度。无论在声明中的 width 之前还是之后，min-width 属性始终覆盖 width 属性。

以下是一些链接，供参考和澄清

https://istack.dev59.com/9yBHP.webp

- Abhishek Agarwalla

请问我为什么得到了负1分的原因是什么？有什么建议可以改进我的答案吗？ - Abhishek Agarwalla

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ppajer · Accepted Answer

min-width:100%保证元素至少与其容器一样宽。 width:auto允许元素保持其原始大小。

因此，两者的组合可以理解为“让元素占用它需要的所有空间，除非它比其容器的宽度小，在这种情况下使它和容器一样宽”。所以基本上，代码的意思是“我不在乎它是否溢出，只需使其填满页面”。

话虽如此，没有理由添加width:auto，因为它是width的初始值，除非要覆盖应用于元素的其他CSS样式。

在此示例代码中，仅使用min-width就足够了。