【css】max-height,min-height,height一起使用时,优先级问题
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一起使用时,优先级问题的更多相关文章
- 真正的能理解CSS中的line-height,height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- css height:100%和height:auto的区别
css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...
- height:100%与height:inherit的区别
一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素 ...
- 网页上弹出pop窗口实例,(document).height()与$(window).height()的区别
#dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:10 ...
- height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...
- $(document).height()、$("body").height()、$(window).height()区别和联系
前言:在此以高度为示例,宽度问题可类推.在移动端开发中,经常遇到需要把一块内容定位于底部的情况,当页面内容不满一屏时,需要设为fixed,而超过 一屏时,需要设为static随页面顶到底部,此时就需要 ...
- $(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...
- 页面上有3个输入框:分别为max,min,num;三个按钮:分别为生成,排序,去重;在输入框输入三个数字后,先点击生成按钮,生成一个数组长度为num,值为max到min之间的随机整数点击排序,对当前数组进行排序,点击去重,对当前数组进行去重。 每次点击之后使结果显示在控制台
<!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...
- 【MySQL】汇总数据 - avg()、count()、max()、min()、sum()函数的使用
第12章 汇总数据 文章目录 第12章 汇总数据 1.聚集函数 1.1.AVG()函数 avg() 1.2.COUNT()函数 count() 1.3. MAX()函数 max() 1.4.MIN() ...
随机推荐
- Java编程思想__异常
1.使用异常链,需要采用如下方式包装捕获到的异常: public void two() { System.out.println("two()"); try { one(); } ...
- struts配置文件说明
(1)DOCTYPE(文档类型),所有的struts配置文件都需要有正确的doctype. (2)<struts>是根标记元素,在其下使用<package>标签声明不同的包. ...
- #WEB安全基础:HTML/CSS | 0x0 我的第一个网页
#WEB安全基础:HTML/CSS系列,本系列采用第二人称以免你不知道我在对着你说话,以朋友的视角和你交流 HTML的中文名叫做超文本标记语言,CSS叫做层叠样式表 用HTML设计你的第一个网页,你需 ...
- 洛谷P4725 【模板】多项式对数函数(多项式ln)
题意 题目链接 Sol 这个不用背XD 前置知识: \(f(x) = ln(x), f'(x) = \frac{1}{x}\) \(f(g(x)) = f'(g(x)) g'(x)\) 我们要求的是\ ...
- python里文件读写操作
文件读写操作一种基本操作,但是里面也存在很多需要注意的问题,例如字符编码.内存缓冲.指针位置等等.如果忽视这些问题就会引起很多不必要的麻烦.简单来说,文件的读写分为几个过程: 打开文件,并定义操作文件 ...
- font-face在ie无法识别问题
font-face在ie的时候,需要其他格式eot,但是按照网上的设置无法识别,需要把原来的fotmat设置成format('eot');
- 学习用Node.js和Elasticsearch构建搜索引擎(7):零停机时间更新索引配置或迁移索引
上一篇说到如果一个索引的mapping设置过了,想要修改type或analyzer,通常的做法是新建一个索引,重新设置mapping,再把数据同步过来. 那么如何实现零停机时间更新索引配置或迁移索引? ...
- 钉钉扫码登录web网站
钉钉扫码登录网站 前言 由于本公司前后台分离,这里主要讲述后台的实现逻辑与过程,前端相关的一略而过.前端我们采用的是把二维码内嵌到我们的网页中. 流程如下: 1.登录钉钉后台创建一个企业应用 2.根 ...
- 口碑订单,ERP本地加/退菜无法回流至手机端的解决办法-订单金额不统一erp本地加菜H5没有
关于 口碑订单,ERP本地加/退菜无法回流至手机端的解决办法-订单金额不统一erp本地加菜H5没有 1. 2. 3. PS:是正餐后付的务必要选择口碑后付 完成以上设置即可
- OPPO A57 刷机(官方安装包)+完美Root+ 破解主题+屏蔽Root顶部红色框+NV修复
朋友说她的手机被被人刷后,有许多预装的软件问我能不能处理下,让我装个纯净版. 开机可以看到预装了许多软件,通常想要删除预装软件就必须Root,于是下载刷机精灵,360刷机大师,线刷包之类的软件Root ...