CSS之关于min-width、max-width、min-height和max-height的使用

最新推荐文章于 2024-05-06 08:45:00 发布

wait......

最新推荐文章于 2024-05-06 08:45:00 发布

阅读量3.6k

点赞数 11

分类专栏： CSS知识点文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qwerty053/article/details/121667370

版权

7 篇文章 0 订阅

订阅专栏

设div父盒子A中有个div子盒子B，设B的min-height为H，则H为盒子B的最小高度值，意思是：

当B中内容填充的高度小于H时，B的高度就是H；当B中内容填充的高度大于H时，B的高度就是其中内容填充到的高度。

通俗一点来说，就是如果min-height的高度设小了还可以变大，但是设大了就只能这样。看下面的例子：

同样以上面的两个数据为例，得到的图如下：

通俗一点来说，就是max-height高度设大了可以根据内容高度变化，设小了就只能这样

⭐️与min-width不同，子盒子的min-width和max-width会受到父盒子width的影响

⭐️设子盒子的min-width为H，父盒子width为width，使用min-width是指：

举例：

当父盒子A宽度为200px，子盒子B min-width为10px时：
在这里插入图片描述

当父盒子A宽度为10px，子盒子B min-width为200px时，与上图一样

⭐️设子盒子的max-width为H，父盒子width为width，使用max-width是指：

举例：

当父盒子A宽度为200px，子盒子 max-width为10px时，

在这里插入图片描述

当父盒子A宽度为10px，子盒子 max-width为200px时，同上图

关注

专栏目录