max-width min-width max-height min-height

max-width:设置最大宽度之后，其对象宽度将不超过此最大宽度值，一般设置变量的宽度，固定宽度就不能同时设置。值不能为负数，可以是百分数和具体数值。

.set-max-w{border:1px solid red;max-height: 100px;max-width: 50px;}
.set-min-w{border:1px solid red;margin-top: 200px; min-height: 50px;max-width: 100px;}

<p class="set-max-w">最大宽度80px，最大高度100px</p>
<p class="set-min-w">最大宽度100px，最小高度50px，最大宽度100px，最小高度50px</p>

当盒子设定最大宽度时内容是不会溢出的，如果设定最大高度就会溢出，因为文字要折行显示；
下面的是上面的代码p标签内没有内容的时候

分析：当下面的盒子无内容的时候也会有固定的宽高，当无内容的时候设置的最小高度值能撑起这个盒子。

最小高度：其内容较少时时，也能保持BOX的高度为一定超出就自动向下延伸，但到目前为止，只有Opera 和 Mozilla 支持，IE7以上版本支持。

.set-min-w{border:1px solid red;margin-top: 200px; min-height: 60px;min-width: 120px;}

<img src="data:images/health.png" class="set-min-w">

此时调整min-width的值图片的宽度也会随着变化。

看下面代码

.set-min-w{border:1px solid red;margin-top: 200px; max-height: 60px;min-width: 60px;}

<img src="data:images/health.png" class="set-min-w set-min-h">

将最小高度改为最大高度限制了图片的高度不再像最小高度那样能自适应图片的高度了，同时当图片宽度小于最小高度时图片的宽度将会与最小高度相同否则相反。

看如下代码：还会有另外一种情况

.set-min-w{border:1px solid red;margin-top: 200px; min-height: 60px;min-width: 10px;}

<p class="set-min-w set-min-h">最小宽度为50px，最小高度为100px</p>

设置的最小宽度为固定值实际显示的宽度为父元素宽度的100%；并不像最小高度那样。

max-width min-width max-height min-height相关推荐

你不知道的CSS函数，Min、Max、Clamp()函数基础用法
目录 1.Min函数 2.Max函数 3.clamp函数 1.流体尺寸 2.反响应式计算工具参考文档 3.动态分割线 4.兼容性 5.总结 1.Min函数 min() 函数会从表达式的值中选择一个 ...
html中min属性,HTML的min属性和max属性怎么用？
HTML min属性用于指定度量的下限,max属性用于指定度量的上限:min属性的值必须小于max属性的值.min属性的默认值为0:如果没有规定 max 属性的值,则默认值是 1.max属性与min属 ...
Redis中有序集合zset数据类型（增加（添加元素）、获取（获取指定范围元素、返回权值在min和max之间的成员、返回成员member的score值）、删除（删除指定元素和指定权值范围的元素））
sorted set,有序集合元素为string类型元素具有唯⼀性,不重复 [值不能重复] 每个元素都会关联⼀个double类型的score,表示权重,通过权重将元素从⼩到⼤排序说明:没有修 ...
【Unity】修改UGUI Minimap(2.2.5)的显示范围（min，max）
修改UGUI Minimap的显示范围(min,max) 今天开发遇到需求,要将小地图显示的范围调的更大,但是经过调试发现最大也只有100,于是用了一个比较笨的方法,那就直接去Editor中更改最大值 ...
python和R对dataframe的单列数据进行统计：value_counts、table、unique、nunique、min、max、mean、sort、length、var、quantile、
python和R对dataframe的单列数据进行统计:value_counts.table.unique.nunique.min.max.mean.sort.length.var.quantile. ...
实现O(1)时间复杂度带有min和max 函数的栈
仅仅是演示实现.不考虑栈使用的数据结构是vector 还是其它容器. 代码例如以下 #include <iostream> #include <vector>using nam ...
hive值乘以0.01保留一位小数_Hive窗口函数01-SUM、MIN、MAX、AVG
Hive窗口函数sum.min.max.avg入门 1. 数据说明现有 hive 表 cookie1, 内容如下: hive> select * from cookie1; cookie1 2 ...
MIN()与MAX()函数的注意事项
MIN()与MAX()函数的注意事项定义: MIN()函数用于返回一个列范围内的最小非空值:MAX()函数用于返回最大值.这两个函数可以用于大多数的数据类型,返回的值根据对不同数据类型的排序规 ...
java快速寻找一个数组的最大值或最小值， min， max，三种方法
java 中寻找一个数组中的最大值或最小,除了自己专门编写一个 min 或 max 函数外,还有几种方式方便使用. 1. 使用 stream 将一个数组放进 stream 里面,然后直接调用 str ...
mysql max字符串数值_针对字符串值的mysql:min()和max()。
我有一个连接两个表的SQL Select语句. 主表包含产品的其他信息,并联接到第二个尺寸表. 第二个表包含存储为字符串的非数字大小列表,其结构简单如下- sizeID=主键 sizename=字符串 ...

max-width min-width max-height min-height

max-width min-width max-height min-height相关推荐

最新文章

热门文章