百度的笔试题有一道选择题如下:问div的高度为多少
<style>
#app{
height:1000px;
min-height:500px;
max-height:300px;
}
</style>
<body>
<div id="app">
</div>
</body>
这就涉及到优先级的问题,经过实践得到高度为min-height即500px。
在此经过实践,总结一些规律:
max-height
这个属性会阻止height
属性的设置值变得比max-height
更大。max-height
属性用来设置给定元素的最大高度. 如果[height]
属性设置的高度比该属性设置的高度还大,则[height]
属性会失效.max-height
会覆盖掉height
, 但是min-height
又会覆盖掉max-height
实际效果有以下规律:
- 当
height
和max-height
同时存在,取较小值,即:- max-height < height ------ 高度为max-height
- max-height > height ------ 高度为height
- 当
height
和min-height
同时存在,取较大值,即:- min-height < height ------高度为height
- min-height > height ------ 高度为min-height
- 当
height
和min-height
和max-height
同时存在,则:- height > max-height > min-height ------高度为max-height
- height > min-height > max-height ------高度为min-height
- min-height > height > max-height ------高度为min-height