MDN当中有这样一句话
The min-height and max-height properties override height.
min-height
和max-height
会覆盖height
。但我想补充的是,在默认情况下,元素的高度首先会去以height为准,如果height小于min-height,则以min-height为主。max-height同理。
height百分比形式的继承问题
若父元素没有height属性,子元素的height百分比无法继承父元素min-height上的高度。但弱父元素有height属性,子元素的height百分比就会受到父元素min-height、max-height的影响。
mdn中有这样一段关于百分比形式height值的话
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto
. A percentage height on the root element is relative to the initial containing block.
翻译一下:如果该元素包含块的height属性没有明确指定,并且该元素不是绝对定位,那么该元素height百分比的值会被处理成auto。两个条件说的很清楚(i.e.当元素是绝对定位时或者其父元素有height属性时,该元素height属性的百分值有效。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>若父元素没有height属性,子元素的height百分比无法继承父元素min-height上的高度</title>
</head>
<body>
<style>
.parent{
min-height:500px;
}
.child{
height:100%;
background: red;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>