前言

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;
}

这里，我们通过写一个公共的类（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
}

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

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

 <img src="@/assets/images/cat.jpg" style="width: 400px !important" />img {max-width: 260px;
}

给修猫同时设置内联样式以及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>

import { ref } from "vue";const isShow = ref<boolean>(false);
const setIsShow = (val: boolean) => {isShow.value = val;
};

.telescopic p {max-height: 0;overflow: hidden;transition: max-height 0.3s;
}
.contentBox {max-height: 500px !important;
}

写在最后

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

CSS 里的min-width/max-width和min-height/max-height相关推荐

html中collapse代码怎么写,CSS里的visibility属性有个鲜为人知的属性值：collapse
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS里的visibility属性,相信你用过不下几百 ...
html div height=,height在css里什么意思？
height在css里是高度的意思,是CSS中的高度属性.下面本篇文章就来给大家介绍一下CSS height属性,希望对大家有所帮助. height属性设置元素的高度. height属性定义元素内容区 ...
jQuery--.css(width)和.width()的区别
首先先解释下普通元素和非普通元素,非普通元素是指window,document这些元素对象,普通元素是指除window,document这些非普通元素外的元素,如:div 对于普通的元素 ,他们的作 ...
HTML CSS里display：block的原理和用法
display:block:比较常用于这两个标签,因为这两个标签非块元素.如果不用display:block定义,那么定义width.height等和长宽相关的css属性时不会生效. </htm ...
织梦 css里的图片标签,织梦{dede:field.body /}中用CSS的expression参数控制图片大小
{dede:field.body /} css:图片高和宽最大都是600px. .content img{ max-width:600px; max-height:600px; width:600px ...
css里给文字加下划线代码,css添加文字下划线样式的方法
css添加文字下划线样式的方法发布时间:2020-08-31 13:54:27 来源:亿速云阅读:65 作者:小新这篇文章将为大家详细讲解有关css添加文字下划线样式的方法,小编觉得挺实用的,因 ...
你学废了Python的max函数与min函数的妙用吗？
呃,那个啥,众所周知哈,Python里的max函数与min函数是用来求一个序列的最大值与最小值的,例如max([1,2,3])的结果就很显然是3,下面,我先给出比较正式的函数介绍. [想看高端操作的可 ...
PyTorch 笔记（08）— Tensor 比较运算（torch.gt、lt、ge、le、eq、ne、torch.topk、torch.sort、torch.max、torch.min）
1. 常用函数比较函数中有一些是逐元素比较,操作类似逐元素操作,还有一些类似归并操作,常用的比较函数如下表所示. 表中第一行的比较操作已经实现了运算符重载,因此可以使用 a>=b,a>b ...
CSS里总算是有了一种简单的垂直居中布局的方法了
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
pandas使用max函数和min函数计算dataframe日期（时间）数据列中最大日期和最小日期对应的数据行(maximum and minimum date or time row)
pandas使用max函数和min函数计算dataframe日期(时间)数据列中最大日期和最小日期对应的数据行(maximum and minimum date or time row in data ...

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

前言

写在最后

CSS 里的min-width/max-width和min-height/max-height相关推荐

最新文章

热门文章