前端笔试题8 CSS中的三种height

<style>
.a{
height: 1000px;
min-height: 500px;
max-height: 300px;
}
</style>
<div class="a"></div>

以上代码中，最终的height高度是多少？
答案：

500px

首先来看一下max-height，MDN的解释为：CSS属性 max-height 设置元素的最大高度。它防止height属性的使用值（used value） 大于 max-height 的指定值。也就是说，当只有height和max-height两种属性时（这里的“只”是没有min-height）height大于max-height，height就会失效，高度变为了max-height，当heght小于等于max-heght时，则使用height，在这里max-height就是起到了一个限制height最大值的作用。
其次来看一下min-height，MDN的解释为CSS 属性 min-height 能够设置元素的最小高度。这样能够防止 height 属性的应用值小于 min-height 的值。可以得出，min-height的作用和max-height是相似的，只不过min-height是限制最小值。
如果三者同时出现呢，将会是什么结果？无外乎这么几种情况：

1. height > max-height > min-height 元素高度：max-height
2. height > min-height > max-height 元素高度：min-height
3. min-height > height > max-height 元素高度：min-height
4. min-height > max-height > height 元素高度：min-height
5. max-height > min-height > height 元素高度：min-height
6. max-height > height > min-height 元素高度：height
   可以由此得出结论，只要是min-height“篡位”的结果，那么结果都将遵循min-height，剩下的情况则要根据max-height是否被打破来判断。

最后

以上就是贪玩滑板最近收集整理的关于前端笔试题8 CSS中的三种height的全部内容，更多相关前端笔试题8内容请搜索靠谱客的其他文章。