css_min-height、max-height、height详细讲解

首先min-height、max-height、height之间是有权重的等级的。

权重等级：min-height > max-height > height

直接写一个Demo来简单的讲解一下：

下面展示一些 内联代码片。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style lang="less">.div0 {background-color: pink;min-width: 800px;max-width: 1200px;}</style>
</head><body><div class="div0">assd</div>
</body></html>

当你不断的去调整浏览器的宽度，你会发现当浏览器的宽度大于1200px的时候，div盒子的宽度就不会再发生改变了。但是当你把浏览器宽度从1200px不断的减小过程中，你会发现，div盒子的宽度会不断的变化，和浏览器的宽度吻合（再不考虑边距的情况下）。但是，当浏览器的宽度小于800px之后，div盒子的宽度就不会再发生改变了。

css_min-height、max-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 ...
Java语言基础详细讲解
就像人与人之间交流使用的语言需要遵循一定的语法规则一样,Java语言也离不开特定语法的支持,如基本语法.数据类型.变量.常量.运算符与表达式.类型转换和输入输出等,只不过这些语法要比日常生活中语言的语 ...
Yaml版接口自动化详细讲解（Python + pytest + allure + log + yaml + mysql + redis + 钉钉通知 + Jenkins）
目录框架介绍框架结构框架功能讲解 common # 配置 config.yaml # 公共配置 setting.py # 环境路径存放区域 data # 测试用例数据 Files # ...
全卷积网络FCN详细讲解（超级详细哦）
原文链接:https://blog.csdn.net/qq_41760767/article/details/97521397?depth_1-utm_source=distribute.pc_rel ...

css_min-height、max-height、height详细讲解

css_min-height、max-height、height详细讲解相关推荐

最新文章

热门文章