CSS 里的min-width/max-width和min-height/max-height

前言

min-width/max-width和min-height/max-height这两个CSS属性，在之前的学习中使用的比较少，盒子尺寸大多是用width和height写死的。最近，我在项目中慢慢的开始接触了min-width和max-width，因此也去重新学习了一下。本文将总结我在日常中遇到的一些用法，欢迎大家阅读。

• 自适应布局
  通过width和height属性进行尺寸大小的定义，只能实现砖头式布局。然而，在开发中，我们经常需要页面以及内容根据窗口的大小进行自适应（既能适应台式机的显示屏，也可以适应笔记本、平板电脑的屏幕），那么此时，我们就需要用到min-width/max-width这一属性啦。

.content-fixed-width {
    width: 95%;
    max-width: 1280px;
    margin: auto;
    text-align: center;
}
1
2
3
4
5
6

这里，我们通过写一个公共的类（content-fixed-width），设置 max-width 为1280px，并且设置width为一个百分比、margin为auto，这样，盒子就可以居中显示在页面中，并且不会大小永远为可视窗口大小的95%，最大宽度不超过1280px。在使用时，我们只要给所有最外层的盒子加上这个类，就可以实现页面的整齐与自适应效果。

• icon图大小自适应
  场景：需要显示出一组icon图，每张icon图的大小不一致
  如果给每一个icon图都写一个类来设置它们的大小，那么当数量很大时，这种做法显然不太合理。这里，也可以使用到min-width属性。做法是给这组icon图加一个相同的类，这个类的min-width属性大小设置成 这组icon图最小的宽度，其余的icon图会自动撑开自己的宽度，达到正常显示的效果。

• 限制图片大小
  在公众号的热门文章中，经常会有图片，这些图片都是用户上传产生的，因此尺寸会有大有小，为了避免图片在移动端展示过大影响体验，常常会有下面的max-width限制：

img {
    max-width: 100%;
	height: auto !important
}
1
2
3
4

height:auto是必需的，否则，如果原始图片有设定height, max-width生效的时候，图片就会被水平压缩。强制height为auto可以确保宽度不超出的同时使图片保持原来的比例。但这样也会有体验上的问题，那就是在加载时图片占据高度会从0变成计算高度，图文会有明显的瀑布式下落。(此处是《CSS世界》中介绍的一种情况)

• 超越 !important
  在css中，!important的权重可以说是最高的了，然而，当它和max-width同时出现时，max-width会覆盖掉 具有!important权级的width大小，以及内联样式。

 
 img {
  max-width: 260px;
}
1
2
3
4

给修猫同时设置内联样式以及max-width，效果显示图片宽度为260px。

• 实现展开收起效果
  展开收起效果在业务中经常出现，我们很容易能想到可以使用display:none/block实现，或者使用height：0/auto和overflow:hidden实现。这两种方法都能达到效果，但是交互效果会比较生硬。此时，我们可以使用到max-height：

<div class="telescopic">
    <div>
      通过max-width实现动态<span @click="setIsShow(true)">展开↓span
      ><span @click="setIsShow(false)">收起↑span>
    div>
    <p :class="{ contentBox: isShow }">
      展开后的max-height值，我们只需要设定为保证比展开内容高度大的值就可以，因为max-height值比height计算值大的时候，元素的高度就是height属性的计算高度，在本交互中，也就是height:auto时候的高度值。于是，一个高度不定的任意元素的展开动画效果就实现了。
    p>
  div>
1
2
3
4
5
6
7
8
9

import { ref } from "vue";

const isShow = ref<boolean>(false);
const setIsShow = (val: boolean) => {
  isShow.value = val;
};
1
2
3
4
5
6

.telescopic p {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s;
}
.contentBox {
  max-height: 500px !important;
}
1
2
3
4
5
6
7
8

写在最后

• 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注
• 欢迎大家在评论区分享，一起学习前端