Question

我在CodePen上找到了一个全屏视频的好例子： https://codepen.io/dudleystorey/pen/knqyK

我很难理解以下样式：

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

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

Answer 1

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

所以两者的组合可以理解为＆＃34;让元素占用所需的空间，除非它小于其容器的宽度，在这种情况下使它与容器和＃34 ;.所以基本上代码所说的是＆＃34;我不在乎它是否溢出，只是让它填满页面＆＃34;。

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

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

Answer 2

我在Chrome中对其进行了测试，并且删除了width: auto;和height: auto;属性后效果很好。

你可能会看到一个Cargo-Cult Programming的例子（即代码存在，因为程序员认为这是必要的，但实际上并不是必需的） - 或者它可能是遗留的浏览器错误（如果这是奇怪的，因为所有支持<video>的浏览器都支持CSS布局以达到高度合规性。

Answer 3

这不是一个很好的例子div{ width:100%; min-width:600px; }对我来说毫无意义。

考虑一下：

Get-Content "file.csv" | Where {$_.Column -ne "Known Value" |Export new.csv

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

Answer 4

宽度：自动

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

宽度100％

另一方面，如果指定width：100％，则为元素的总和宽度将是其包含块的100％加上任何水平边距，填充和边框（除非你使用了box-sizing：border-box，其中只有边距被添加到100％才能改变其总宽度计算）。这可能是你想要的，但很可能不是。

最小宽度：

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

下面的一些链接可供进一步参考和澄清

https://i.stack.imgur.com/9yBHP.png