MDN说法:

max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。

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

max-height 重载(覆盖掉) height, 但是 min-height 又会重载(覆盖掉) max-height.

实际效果:

  当 height 和 max-height一起使用时,谁小听谁的

  max-height  <   height     元素高度:   max-height

      height  <  max-height      元素高度:    height

  当 height,max-height,min-height一起使用时

  height  > max-height > min-height          元素高度:max-height

  height  >  min-height > manx-height       元素高度:min-height

  min-height > height > max-height           元素高度:min-height

范例:

html

<html lang="en">
<head>
<meta charset="UTF-8">
<title>max-height、 min-height、 height 一起使用</title>
<style>
ul{
list-style:none;
padding:0;
}
.clearfix{
clear:both;
content:'';
display: block;
}
.clearfix:after{
content:'';
clear:both;
display:block;
}
.clearfix{
zoom:1;
}
.fl {
float:left;
display:inline;
}
.fr {
float:right;
}
.wrap{
width:200px;
margin-left:20px;
}
.box{
height:500px;
background-color:#e64c65;
}
.box2{
height:500px;
max-height:300px;
background-color:rgb(169, 173, 233);
}
.box3{
height:500px;
max-height:600px;
background-color:rgb(199, 69, 166);
}
.box4{
height:500px;
max-height:300px;
min-height:200px;
background-color:#ccc;
} .box5{
height:500px;
max-height:300px;
min-height:400px;
background-color:#ccc;
}
.box6{
height:500px;
max-height:300px;
min-height:600px;
background-color:#ccc;
} </style>
</head>
<body>
<div class="clearfix">
<div class="box wrap fl">
<ul>
<li>原:width:200</li>
<li>原:height:500</li>
<li>实:width:100</li>
<li>实:height:500</li>
</ul>
</div>
<div class="box2 wrap fl">
<ul>
<li>原:width:200</li>
<li>原:height:500</li>
<li>原:max-height:300</li>
<li>实:width:100</li>
<li>实:height:300</li>
</ul>
</div>
<div class="box3 wrap fl">
<ul>
<li>原:width:200</li>
<li>原:height:500</li>
<li>原:max-height:600</li>
<li>实:width:100</li>
<li>实:height:500</li>
</ul>
</div>
<div class="box4 wrap fl">
<ul>
<li>原:width:200</li>
<li>原:height:500</li>
<li>原:max-height:300</li>
<li>原:min-height:200</li>
<li>实:width:100</li>
<li>实:width:300</li>
</ul>
</div>
<div class="box5 wrap fl">
<ul>
<li>原:width:200</li>
<li>原:height:500</li>
<li>原:max-height:300</li>
<li>原:min-height:400</li>
<li>实:width:100</li>
<li>实:width:400</li>
</ul>
</div>
<div class="box6 wrap fl">
<ul>
<li>原:width:200</li>
<li>原:height:500</li>
<li>原:max-height:300</li>
<li>原:min-height:600</li>
<li>实:width:100</li>
<li>实:width:600</li>
</ul>
</div>
</div> </body>
</html>

效果:

参考链接:https://developer.mozilla.org/zh-CN/docs/CSS/max-height

作者:smile.轉角

QQ:493177502

【css】max-height,min-height,height一起使用时,优先级问题的更多相关文章

  1. 真正的能理解CSS中的line-height,height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  2. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

  3. height:100%与height:inherit的区别

    一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素 ...

  4. 网页上弹出pop窗口实例,(document).height()与$(window).height()的区别

    #dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:10 ...

  5. height:100%和height:auto的区别

    一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...

  6. $(document).height()、$("body").height()、$(window).height()区别和联系

    前言:在此以高度为示例,宽度问题可类推.在移动端开发中,经常遇到需要把一块内容定位于底部的情况,当页面内容不满一屏时,需要设为fixed,而超过 一屏时,需要设为static随页面顶到底部,此时就需要 ...

  7. $(window).height() 和 $(document).height()的区别

    $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...

  8. 页面上有3个输入框:分别为max,min,num;三个按钮:分别为生成,排序,去重;在输入框输入三个数字后,先点击生成按钮,生成一个数组长度为num,值为max到min之间的随机整数点击排序,对当前数组进行排序,点击去重,对当前数组进行去重。 每次点击之后使结果显示在控制台

    <!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...

  9. 【MySQL】汇总数据 - avg()、count()、max()、min()、sum()函数的使用

    第12章 汇总数据 文章目录 第12章 汇总数据 1.聚集函数 1.1.AVG()函数 avg() 1.2.COUNT()函数 count() 1.3. MAX()函数 max() 1.4.MIN() ...

随机推荐

  1. Java编程思想__异常

    1.使用异常链,需要采用如下方式包装捕获到的异常: public void two() { System.out.println("two()"); try { one(); } ...

  2. struts配置文件说明

    (1)DOCTYPE(文档类型),所有的struts配置文件都需要有正确的doctype. (2)<struts>是根标记元素,在其下使用<package>标签声明不同的包. ...

  3. #WEB安全基础:HTML/CSS | 0x0 我的第一个网页

    #WEB安全基础:HTML/CSS系列,本系列采用第二人称以免你不知道我在对着你说话,以朋友的视角和你交流 HTML的中文名叫做超文本标记语言,CSS叫做层叠样式表 用HTML设计你的第一个网页,你需 ...

  4. 洛谷P4725 【模板】多项式对数函数(多项式ln)

    题意 题目链接 Sol 这个不用背XD 前置知识: \(f(x) = ln(x), f'(x) = \frac{1}{x}\) \(f(g(x)) = f'(g(x)) g'(x)\) 我们要求的是\ ...

  5. python里文件读写操作

    文件读写操作一种基本操作,但是里面也存在很多需要注意的问题,例如字符编码.内存缓冲.指针位置等等.如果忽视这些问题就会引起很多不必要的麻烦.简单来说,文件的读写分为几个过程: 打开文件,并定义操作文件 ...

  6. font-face在ie无法识别问题

    font-face在ie的时候,需要其他格式eot,但是按照网上的设置无法识别,需要把原来的fotmat设置成format('eot');

  7. 学习用Node.js和Elasticsearch构建搜索引擎(7):零停机时间更新索引配置或迁移索引

    上一篇说到如果一个索引的mapping设置过了,想要修改type或analyzer,通常的做法是新建一个索引,重新设置mapping,再把数据同步过来. 那么如何实现零停机时间更新索引配置或迁移索引? ...

  8. 钉钉扫码登录web网站

    钉钉扫码登录网站 前言  由于本公司前后台分离,这里主要讲述后台的实现逻辑与过程,前端相关的一略而过.前端我们采用的是把二维码内嵌到我们的网页中. 流程如下: 1.登录钉钉后台创建一个企业应用 2.根 ...

  9. 口碑订单,ERP本地加/退菜无法回流至手机端的解决办法-订单金额不统一erp本地加菜H5没有

    关于 口碑订单,ERP本地加/退菜无法回流至手机端的解决办法-订单金额不统一erp本地加菜H5没有 1. 2. 3. PS:是正餐后付的务必要选择口碑后付 完成以上设置即可

  10. OPPO A57 刷机(官方安装包)+完美Root+ 破解主题+屏蔽Root顶部红色框+NV修复

    朋友说她的手机被被人刷后,有许多预装的软件问我能不能处理下,让我装个纯净版. 开机可以看到预装了许多软件,通常想要删除预装软件就必须Root,于是下载刷机精灵,360刷机大师,线刷包之类的软件Root ...