height、max-height、min-height一起用时,哪个优先级高?
有如下html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 父元素 -->
<div style=" max-height: 100px; height: 300px; min-height: 200px;width: 200px;background-color: red;">
<!-- 子元素 -->
<div style="height: 300px; background-color: aqua;">
</div>
</div>
</body>
</html>
很好奇父元素200px是怎么来的,说明min-height生效了吗?但是如果是min-height生效了,又因为子元素300px,不是会自适应吗?
想知道200px怎么作用的,如果是min-height生效,那为什么父元素最后的高度不是和子元素高度一样
回复
1个回答

test
2024-06-20
max-height: 100px;
height: 300px;
min-height: 200px;
height
先和maxheight
比,如果大于,则此时height
计算值为maxheight
的值,这里为100px
。- 上面得出的结果再和
min-height
比,如果小于,则此时height
的计算值为minHeight
,这里为200px
。
故最后height
为200px
。css max-height
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容