max-height、min-height、height优先级的问题

2024-06-03 19:30:24

前言

我们在实际开发中可能会限制元素的最大高度，那么我们使用的属性必定是max-height，那么不知道大家有没有考虑过如果同时设置max-height和height会发生什么呢？

max-height和height优先级

max-height这个属性会限制height属性的值设置比max-height更大

max-height属性用来设置给定元素的最大高度. 如果height属性设置的高度比该属性设置的高度还大,则height属性会失效.max-height 重载（覆盖掉）height

参考：MDN

min-height和height优先级

min-height这个属性会限制height属性的值设置比min-height更小

min-height属性用来设置给定元素的最小高度. 如果height属性设置的高度比该属性设置的高度还小,则height属性会失效.min-height 重载（覆盖掉）height

min-height和max-height优先级

min-height属性设置的高度比max-height还大，则max-height属性会失效，min-height 重载（覆盖掉）max-height

参考：MDN

总结

max-height < height => max-height 重载 height

min-height > height => min-height 重载 height

min-height > max-height => min-height 重载 max-height

转载于:https://www.cnblogs.com/kunmomo/p/10600286.html

max-height、min-height、height优先级的问题相关推荐

[css] css的height:100%和height:inherit之间有什么区别呢？
[css] css的height:100%和height:inherit之间有什么区别呢? 上周在微博上无节操吐槽了下inherit的段子,没想到回声还不少: 微博inherit无节操段子不过inh ...
CSS中height:100%和height:inherit的异同
1. height:100%和height:inherit的异同 1.1 兼容性差异 height:100% IE6+ √ height:inherit IE8+ √ 1.2 大多数情况作用是一样的 ...
html div 高度100,深入理解CSS的height:100%和height:inherit之间的使用区别
inherit确实是个好东西,不仅节约代码,尤其与background之流打交道:而且还利于维护. 注意,如果想要继承background的图片,不能这样缩写,会显得很天真: CSS Code复制内容 ...
CSS中height:100vh和height:100%的区别是什么？
CSS中height:100vh和height:100%的区别首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1%(可以这么理解?) 1.对于设置hei ...
$(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小, $(document).height()则代表 ...
height:100%和height:inherit比较
height:100%和height:inherit 在我的理解中. height: 100%; 是会继承父元素的100%的高度 height: inherit; 是会继承父元素的高度我觉得他们的意 ...
关于height:100%和height:100vh的区别
关于height:100%和height:100vh的区别 vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 但是当元素没有内容时候,设置height ...
R语言max函数min函数计算各种数据对象最大值最小值实战
R语言max函数min函数计算各种数据对象最大值最小值实战目录 R语言max函数min函数计算各种数据对象最大值最小值实战 #基本语法
汇编语言把最大值放入max 把最小值放入min_Excel的MAX和MIN，如何用白话弄懂？...
今天我们要聊的Excel的最大值和最小值就比较好找!我们继续大白话聊Excel系列,来看看这几个函数究竟怎么用. 在基础统计时,常常需要看一下最大值和最小值,那么用Excel能不能搞定呢?生活中很多电 ...
Pytorch学习-torch.max()和min()深度解析
Pytorch学习-torch.max和min深度解析 max的使用 min同理 dim参数理解二维张量使用max() 三维张量使用max() max的使用 min同理参考链接: 参考链接: 对于 ...

最新文章

热门文章