css中的min-height、max-height、min-width、max-width

首先，项目中是想实现，根据文本内容的多少，自动动态改变div框的尺寸，当然得让它在一个合理的范围内变动，这时就用到了这几个css样式；

关于min-height、max-height:

<!-- 测试min-height与max-height -->
<div style="border:1px solid black;min-height:100px;max-height:300px; width:300px; overflow-y:auto;">
</div>

当此div初始化时，他的默认高度为min-height，且当div中的文本高度小于min-height时，div都一直保持min-height的高度值：

只有当div中的文本高度已经大于min-height的值了，此时div的高度才产生变化，且变化的范围必定小于max-height的值：

随着文本高度的增大，div的高度也随着自动增大，直到达到max-height的高度，div的高度就不会在发生变化了。
这时候，因为我们div设置了overflow-y:auto,所以出现滚动条：

这样就实现了div高度在合理范围内的动态变化；
min-width与max-width的用法跟min-height、max-height一样只是，使用min-width与max-width时，需要将div的display样式设置为：display:inline-block;

<div style="border:1px solid gray;height:100px;min-width:100px;max-width:300px;overflow-x:auto;display:inline-block;">
</div>

推荐博文：
http://www.cnblogs.com/pigtail/archive/2012/06/28/2568646.html

css中的min-height、max-height、min-width、max-width相关推荐

html地球仪代码,html – 在CSS中旋转地球仪
我在CSS中创建一个旋转地球效果.我在CSS中创建了地球: body { background-color: #111; } #earth { width: 300px; height: 300px; ...
html 设置min height,CSS中min-height使用技巧
DIV+CSS中最小高度设定min-height设定最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozi ...
设置最小值与最大值 css,一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景...
作者:Ahmad shaded 译者:前端小智来源:sitepoint点赞再看,微信搜索[大迁世界]关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://github. ...
一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景
作者:Ahmad shaded 译者:前端小智来源:sitepoint 点赞再看,微信搜索**[大迁世界]**关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://gi ...
【CSS中width、height的默认值】
对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...
C++中max，min函数，以及vector字符未定义问题（未声明的标志符）
max,min函数在头文件windows.h中 vector 在头文件vector.h中
python内置函数返回序列中最大元素_Python之路(第八篇)Python内置函数、zip()、max()、min()...
一.python内置函数 abs() 求绝对值例子 print(abs(-2)) all() 把序列中每一个元素做布尔运算,如果全部都是true,就返回true, 但是如果是空字符串.空列表也返回t ...
python中max()、min()获得最大值与最小值_（Python基础教程之十）Python max（）和min（）–在列表或数组中查找最大值和最小值...
使用**max()和min()**方法在可比较元素的集合(例如列表,集合或数组)中查找最大(或最小)项的Python示例. 1. Python max() function max() 该功能用于– ...
解决css中height:100%失效的问题
解决css中height:100%失效的问题参考文章: (1)解决css中height:100%失效的问题 (2)https://www.cnblogs.com/wangweizhang/p/111 ...
真正的能理解CSS中的line-height，height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...

css中的min-height、max-height、min-width、max-width

css中的min-height、max-height、min-width、max-width相关推荐

最新文章

热门文章