当前位置： 首页 > news >正文

WHAT - CSS 中的 min-width

news 来源：原创 2025/7/14 22:09:39

文章目录

  • 基本语法
  • 常见取值
  • 使用场景举例
  • min-width: 0
    • 为什么 min-width: 0 重要？
    • 场景演示
    • 提示
  • 注意事项

在 WHAT - CSS 中的 width 中我们已经详细介绍过 width。那为什么 CSS 还要提供一个 min-width？

阅读本文前可先阅读 MDN - min-width。

min-width 是 CSS 中的一个属性，用于设置元素的 最小宽度。它的作用是：即使内容或父容器试图将该元素压缩得更小，也不会让元素宽度小于 min-width 指定的值。

基本语法

selector {min-width: <length> | <percentage> | auto;
}

常见取值

值说明
px, em, rem 等固定宽度，例如 min-width: 200px
%相对于父元素的宽度，例如 min-width: 50%
auto默认行为，不限制最小宽度

使用场景举例

  1. 防止按钮被压缩过小
button {min-width: 100px;
}

确保按钮至少有 100 像素宽，即使内容很短（如“OK”）。

  1. 响应式布局中保持内容可读
.card {min-width: 300px;
}

即使屏幕变小，也不让卡片缩得小于 300 像素，避免内容拥挤。

min-width: 0

min-width: 0 在 CSS 中非常重要，尤其在 Flexbox 或 Grid 布局中。它的意思是：

允许元素的内容被压缩到 0 宽度（不会强制保留内容的最小宽度）。

为什么 min-width: 0 重要？

很多元素默认有 min-width: auto，这会导致：

  • 某些内容（如文字、长链接）会强制撑开容器。
  • 即使你设置了 flex: 1，它也不会收缩到你期望的程度。

场景演示

问题：内容撑开了容器

.container {display: flex;
}.item {flex: 1;/* 默认 min-width: auto，会被内容撑开 */
}

如果 .item 里有一段很长的文本，它不会换行，也不会压缩，会把父容器撑大。

解决方法：加上 min-width: 0

.item {flex: 1;min-width: 0; /* ✅ 允许压缩 */
}

这告诉浏览器：这个元素可以收缩得比内容小，从而触发内容的换行或溢出隐藏。

提示

在以下布局中，如果你发现子元素「不收缩」或「不换行」，试着加 min-width: 0：

  • display: flex
  • display: grid
  • 使用 overflow: hidden、text-overflow: ellipsis

注意事项

  • 如果设置了 width 和 min-width，浏览器会取 更大的那个值。
  • 和 max-width 相反：min-width 控制最小值，max-width 控制最大值。

相关文章：

WHAT - CSS 中的 min-width

文章目录 基本语法常见取值使用场景举例min-width: 0为什么 min-width: 0 重要&#xff1f;场景演示提示 注意事项 在 WHAT - CSS 中的 width 中我们已经详细介绍过 width。那为什么 CSS 还要提供一个 min-width&#xff1f; 阅读本文前可先阅读 MDN - min-width。 min-width…...

编程日记 2025/7/14 22:09:39

测试W5500的第2步_使用ioLibrary库创建TCP客户端

ioLibrary库下载地址&#xff1a;文件下载地址:https://gitee.com/wiznet-hk/STM32F10x_W5500_Examples 源文件下载地址:https://gitee.com/wiznet-hk 没有注册的&#xff0c;只能复制粘贴了。 本文介绍了如何初始化STM32的硬件资源&#xff0c;配置W5500的网络参数&#xff…...

编程日记 2025/7/14 21:56:35

深度学习中的正则化方法与卷积神经网络基础

笔记 1 正则化方法 1.1 什么是正则化 防止模型过拟合(训练集效果好, 测试集效果差), 提高模型泛化能力 一种防止过拟合, 提高模型泛化能力的策略 L1正则: 需要通过手动写代码实现 L2正则: SGD(weight_decay) dropout BN 1.2 Dropout正则化 让神经元以p概率随机死亡, 每…...

编程日记 2025/7/14 21:28:28

pg_dump

以下是 PostgreSQL 中 pg_dump 命令的 核心参数 及 使用示例 的详细说明&#xff1a; 一、核心参数分类及说明 pg_dump 主要用于备份单个数据库&#xff0c;支持多种格式和灵活的控制选项。以下是其关键参数分类&#xff1a; 1. 连接参数 参数说明-h, --hostHOST数据库服务器…...

编程日记 2025/7/10 15:18:37

css使用clip-path属性切割显示可见内容

1. 需求 想要实现一个渐变的箭头Dom&#xff0c;不想使用svg、canvas去画&#xff0c;可以考虑使用css的clip-path属性切割显示内容。 2. 实现 <div class"arrow">箭头 </div>.arrow{width: 200px;height: 60px;background-image: linear-gradient(45…...

编程日记 2025/7/14 21:34:41

系统设计——项目设计经验总结1

摘要 在系统设计的时候&#xff0c;注意域的区分&#xff0c;功能区分、类的区分、方法区分范围和定义。在系统设计的时候的&#xff0c;需要思考类、方法在什么情况下会涉及到修改&#xff0c;遵循记住&#xff1a;一个类应该只有一个原因被修改&#xff01; 当不满足&#x…...

编程日记 2025/7/14 21:38:37

如何在WordPress网站上添加即时聊天功能

在 WordPress 网站上添加即时聊天功能既简单又有益。近年来&#xff0c;即时聊天已经有了长足的发展&#xff0c;融入了强大的交流和自动化功能&#xff0c;类似于流行的人工智能聊天机器人。无论您是想提高销售转化率还是将人工智能整合到客户服务流程中&#xff0c;在 WordPr…...

编程日记 2025/7/14 21:48:08

[luogu12542] [APIO2025] 排列游戏 - 交互 - 博弈 - 分类讨论 - 构造

传送门&#xff1a;https://www.luogu.com.cn/problem/P12542 题目大意&#xff1a;给定一个长为 n n n 的排列和一张 m m m 个点 e e e 条边的简单连通图。每次你可以在图上每个点设置一个 0 ∼ n − 1 0\sim n-1 0∼n−1、两两不同的权值发给交互库&#xff0c;交互库会…...

编程日记 2025/7/14 21:51:30

图像处理基础知识

OpenCV计算机视觉开发实践&#xff1a;基于Qt C - 商品搜索 - 京东 信息是自然界物质运动总体的一个重要方面&#xff0c;人们认识世界和改造世界就是要获得各种各样的图像信息&#xff0c;这些信息是人类获得外界信息的主要来源。大约有70%的信息是通过人眼获得的。近代科学研…...

编程日记 2025/7/14 17:26:27

使用MybatisPlus实现sql日志打印优化

背景&#xff1a; 在排查无忧行后台服务日志时&#xff0c;一个请求可能会包含多个执行的sql&#xff0c;经常会遇到SQL语句与对应参数不连续显示&#xff0c;或者参数较多需要逐个匹配的情况。这种情况下&#xff0c;如果需要还原完整SQL语句就会比较耗时。因此&#xff0c;我…...

编程日记 2025/7/10 21:31:18

HarmonyOS5云服务技术分享--ArkTS开发Node环境

✨ 你好呀&#xff0c;开发者小伙伴们&#xff01;今天我们来聊聊如何在HarmonyOS&#xff08;ArkTS API 9及以上&#xff09;中玩转云函数&#xff0c;特别是结合Node.js和HTTP触发器的开发技巧。文章会手把手带你从零开始&#xff0c;用最接地气的方式探索这个功能&#xff0…...

编程日记 2025/7/14 21:19:12

水利数据采集MCU水资源的智能守护者

水利数据采集仪MCU&#xff0c;堪称水资源的智能守护者&#xff0c;其重要性不言而喻。在水利工程建设和水资源管理领域&#xff0c;MCU数据采集仪扮演着不可或缺的角色。它通过高精度的传感器和先进的微控制器技术&#xff0c;实时监测和采集水流量、水位、水质等关键数据&…...

编程日记 2025/7/13 13:41:57

深度学习之用CelebA_Spoof数据集搭建一个活体检测-用MNN来推理时候如何利用Conan对软件包进行管理

我为什么用Conan 前面的文章&#xff1a;深度学习之用CelebA_Spoof数据集搭建一个活体检测-训练好的模型用MNN来推理有提到怎么使用MNN对训练好的模型进行推理&#xff0c;里面并没有提到我是怎么编译和进行代码依赖包的管理的详细步骤&#xff0c;在这里我是用的是Conan:一个…...

编程日记 2025/7/11 5:40:24

深入解剖 G1 收集器的分区模型与调优策略

JVM 垃圾收集系列之三 | 高并发低延迟系统的首选 GC 解法&#xff01; 一、为什么我们需要 G1 垃圾收集器&#xff1f; 在传统 GC&#xff08;如 CMS&#xff09;中&#xff0c;我们常常面临的问题是&#xff1a; GC 停顿不可预测&#xff08;Stop-The-World&#xff09;内存…...

编程日记 2025/7/14 21:47:04

兰亭妙微・UI/UX 设计・全链路开发

【遇见专业设计&#xff0c;共筑卓越产品】 在数字化浪潮中&#xff0c;界面是产品与用户对话的第一窗口。 兰亭妙微&#xff08;蓝蓝设计&#xff09;&#xff0c;自 2008 年深耕 UI/UX 领域&#xff0c;以清华团队为核心&#xff0c;16 年专注软件与互联网产品的界面设计开…...

编程日记 2025/7/14 21:10:31

Babylon.js学习之路《六、材质与纹理：为模型赋予真实的表面效果》

文章目录 1. 引言&#xff1a;材质与纹理的重要性1.1 材质与纹理的核心作用 2. 基础材质&#xff1a;StandardMaterial2.1 材质属性详解2.2 实战&#xff1a;创建金属材质 3. 纹理贴图&#xff1a;从基础到高级3.1 基础纹理映射3.2 多纹理混合技术 4. 高级材质&#xff1a;PBRM…...

编程日记 2025/7/14 21:34:40

飞致云旗下开源项目GitHub Star总数突破150,000个

2025年5月19日&#xff0c;中国领先的开源软件提供商飞致云宣布&#xff0c;其旗下开源项目在代码托管平台GitHub上所获得的Star总数已经超过150,000个。基于在开源领域的长期耕耘和探索&#xff0c;飞致云的开源势能不断增强&#xff0c;获得第一个五万GitHub Star用时89个月&…...

编程日记 2025/7/11 13:39:40

萌新联赛第（三）场

C题 这道题用暴力去写想都不要想&#xff0c;一定超时&#xff0c;于是我们需要优化&#xff0c;下面是思路过程&#xff1a; 如图&#xff0c;本题只需找到x的因数个数和(n-x)的因数个数&#xff0c;这两个相乘&#xff0c;得到的就是对于这个x来说组合的个数&#xff0c;且x…...

编程日记 2025/7/14 22:03:43

cplex12.9 安装教程以及下载

cplex 感觉不是很好找&#xff0c;尤其是教育版&#xff0c;我这里提供一个版本&#xff0c;在下面的图可以看到&#xff0c;不仅可以配置matlab&#xff0c;也可以配置vs,现在拿vs2017来测试一下&#xff0c;具体文件的文件有需要的可以复制下面的链接获取 我用网盘分享了「c…...

编程日记 2025/7/5 22:22:00

Pycharm-jupyternotebook不渲染

解决方案&#xff1a; https://youtrack.jetbrains.com/issue/PY-54244 import plotly.io as pio pio.renderers.default "vscode"...

编程日记 2025/7/3 1:22:49

layui 介绍

layui&#xff08;谐音&#xff1a;类 UI) 是一套开源的 Web UI 解决方案&#xff0c;采用自身经典的模块化规范&#xff0c;并遵循原生 HTML/CSS/JS 的开发方式&#xff0c;极易上手&#xff0c;拿来即用。其风格简约轻盈&#xff0c;而组件优雅丰盈&#xff0c;从源代码到使用…...

编程日记 2025/7/14 13:20:29

大数据相关操作

大数据相关操作 一、环境配置 1、修改主机名 #修改主机名 hostnamectl set-hostname master2、固定IP地址 # 进入修改 sudo vim /etc/netplan/01-network-manager-all.yaml# 修改配置文件 # Let NetworkManager manage all devices on this system network:version: 2rend…...

编程日记 2025/7/11 12:36:57

谷歌宣布推出 Android 的新安全功能，以防止诈骗和盗窃

在上周二的 Android Show 上&#xff0c;也就是Google I/O 开发者大会之前&#xff0c;谷歌宣布了 Android 的全新安全和隐私功能。这些新功能包括对通话、屏幕共享、消息、设备访问和系统级权限的全新保护。谷歌希望通过这些功能保护用户免遭诈骗&#xff0c;在设备被盗或被攻…...

编程日记 2025/7/8 13:39:07

WSL虚拟机整体迁移教程（如何将WSL从C盘迁移到其他盘）

文章目录 WSL虚拟机迁移教程一、查看当前主机的子系统二、导出 WSL 子系统三、将打包好的文件发送给另一个人四、在另一台机器导入并恢复子系统五、附加命令六、注意事项和导出文件信息6.1 注意事项6.2 导出文件信息使用 wsl --export 命令导出整个 WSL 子系统时&#xff0c;它…...

编程日记 2025/7/11 11:18:23

汽车区域电子电气架构（Zonal E/E）的统一

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 钝感力的“钝”&#xff0c;不是木讷、迟钝&#xff0c;而是直面困境的韧劲和耐力&#xff0c;是面对外界…...

编程日记 2025/7/9 16:32:28

开源一个记账软件，支持docker一键部署

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 &#x1f38f;&#xff1a;你只管努力&#xff0c;剩下的交给时间 &#x1f3e0; &#xff1a;小破站 开源一个记账软件&#xff0c;支持docker一键部署 项目简介功能特性技术栈快速开始环境要求运行步…...

编程日记 2025/7/3 1:22:46

新能源汽车焊接智能节气阀

在新能源汽车产业迅猛发展的浪潮中&#xff0c;制造工艺的优劣直接关系到车辆的性能、安全与市场竞争力。焊接&#xff0c;作为新能源汽车生产流程里的关键一环&#xff0c;无论是构建车身框架&#xff0c;还是连接电池模组&#xff0c;其质量的好坏都起着决定性作用。而在焊接…...

编程日记 2025/7/11 1:08:45

React 第四十四节Router中 usefetcher的使用详解及注意事项

前言 useFetcher 是 React Router 中一个强大的钩子&#xff0c;用于在不触发页面导航的情况下执行数据加载&#xff08;GET&#xff09;或提交&#xff08;POST&#xff09;。 一、useFetcher 应用场景&#xff1a; 1、后台数据预加载&#xff08;如鼠标悬停时加载数据&…...

编程日记 2025/7/7 8:46:20

33、魔法防御术——React 19 安全攻防实战

一、奥术护盾&#xff08;基础防御&#xff09; 1. 敏感数据加密术 // cryptoUtils.js - 数据加密工具export const encrypt (data) > {// 实际项目应使用Web Crypto API或crypto-jsreturn btoa(encodeURIComponent(data));};​export const decrypt (data) > {try {…...

编程日记 2025/7/9 11:46:49

NVM 安装与配置指南

简介 Node Version Manager&#xff08;NVM&#xff09;是一个常用的 Node.js 版本管理工具&#xff0c;可用于在开发过程中方便地切换不同版本的 Node.js。通过 NVM&#xff0c;用户可以根据项目需求选择不同的 Node.js 版本&#xff0c;而无需手动安装和卸载多个版本的 Node…...

编程日记 2025/7/6 16:56:23

SpringMVC04所有注解按照使用位置划分| 按照使用层级划分（业务层、视图层、控制层）

目录 一、所有注解按照使用位置划分&#xff08;类、方法、参数&#xff09; 1. 类级别注解 2. 方法级别注解 3. 参数级别注解 4. 字段/返回值注解 二、按照使用层级划分&#xff08;业务层、视图层、控制层&#xff09; 1、控制层&#xff08;Controller Layer&#x…...

编程日记 2025/7/10 22:49:32

【数据库】-1 mysql 的安装

文章目录 1、mysql数据库1.1 mysql数据库的简要介绍 2、mysql数据库的安装2.1 centos安装2.2 ubuntu安装 1、mysql数据库 1.1 mysql数据库的简要介绍 MySQL是一种开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;由瑞典MySQL AB公司开发&#xff0c;目前…...

编程日记 2025/7/10 1:18:25

MySQL与Redis一致性问题分析

一、一致性问题概述 1.1 什么是一致性问题&#xff1f; 在数据库-缓存架构中&#xff0c;当MySQL中的数据&#xff08;最新值&#xff09;与Redis缓存中的数据&#xff08;缓存旧值&#xff09;出现差异时&#xff0c;由于程序总是优先读取Redis缓存&#xff0c;就会导致应用…...

编程日记 2025/7/12 15:44:27

Xshell传输文件

新建文件 点击新建 完善主机地址 然后输入我们的远端服务器的SSH协议 一般的是这样的ssh -p 44562 rootregion-1.autodl.com 由于Xshell比较特殊我们输入ssh rootregion-1.autodl.com 44562这样的形式 然后输入服务器的密码即可...

编程日记 2025/7/11 5:30:05

怎样用 esProc 为大主子表关联提速

类似订单和明细表这样的主子表关联比较常见&#xff0c;在 SQL 中&#xff0c;这种关联用 JOIN 实现&#xff0c;在两个表都很大的情况下&#xff0c;常常出现计算速度非常慢的现象。 如果预先将主子表都按照主键有序存储&#xff0c;就可以使用归并算法实现关联。这种算法只需…...

编程日记 2025/7/10 1:26:13

打卡day31

文件的规范拆分和写法 知识点回顾 规范的文件命名规范的文件夹管理机器学习项目的拆分编码格式和类型注解 作业&#xff1a;尝试针对之前的心脏病项目&#xff0c;准备拆分的项目文件&#xff0c;思考下哪些部分可以未来复用。 导入依赖库 # 忽视警告 import warnings warn…...

编程日记 2025/7/3 21:03:28

编译原理的部分概念

解释程序&#xff1a;边解释边执行&#xff1a;不断读取源程序的语句&#xff0c;解释语句&#xff0c;读取此语句需要的数据&#xff0c;根据执行结果读取下一条语句&#xff0c;继续解释执行&#xff0c;直到返回结果。 编译程序&#xff1a;将源程序完整地转换成机器语言程…...

编程日记 2025/7/6 6:25:07

Java中字符串（String类）的常用方法

以下是Java中字符串&#xff08;String类&#xff09;的常用方法分类详解&#xff0c;包含核心方法说明和示例代码&#xff1a; 一、字符串基础信息 方法说明示例输出length()返回字符串长度"Hello".length()5isEmpty()判断字符串是否为空&#xff08;长度是否为0&a…...

编程日记 2025/7/10 10:37:19

什么是 ERP，中国企业如何科学应用 ERP

中国企业在引入 ERP 系统过程中&#xff0c;常因盲目跟风大型企业选型、忽视自身业务适配性&#xff0c;导致系统功能过剩、实施成本高企、员工接受度低等问题&#xff0c;最终造成项目成功率不足 10%。因此&#xff0c;理性认知 ERP 的价值定位与本土化实施路径&#xff0c;成…...

编程日记 2025/7/7 13:09:58

使用SQLite Expert个人版VACUUM功能修复数据库

使用SQLite Expert个人版VACUUM功能修复数据库 一、SQLite Expert工具简介 SQLite Expert 是一款功能强大的SQLite数据库管理工具&#xff0c;分为免费的个人版&#xff08;Personal Edition&#xff09;和收费的专业版&#xff08;Professional Edition&#xff09;。其核心功…...

编程日记 2025/7/11 9:12:56

同源策略深度防御指南：CSP 高级应用与企业微信全场景适配（含 report-uri 实战）

一、CSP 核心指令权威解析与企业微信适配 内容安全策略&#xff08;CSP&#xff09;通过Content-Security-Policy响应头实现资源加载的细粒度控制&#xff0c;其核心指令与企业微信场景强相关&#xff1a; 1.1 frame-ancestors&#xff1a;iframe 嵌入源控制 权威规范&#…...

编程日记 2025/6/28 22:14:31

【AGI】大模型微调技术-四大微调框架

【AGI】大模型微调技术-四大微调框架 &#xff08;1&#xff09;微调基础概念介绍1.1 微调基本概念1.2 全量微调与高效微调1.3 模型微调的优劣势分析1.4 高效微调与LoRA、QLoRA &#xff08;2&#xff09;高效微调的应用场景&#xff08;3&#xff09;流微调工具介绍3.1 unslot…...

编程日记 2025/7/14 1:35:39

小白编程学习之巧解「消失的数字」

一、引言&#xff1a;一个看似简单的「找不同」问题 今天遇到一道有趣的算法题&#xff1a;给定一个含 n 个整数的数组 nums&#xff0c;其中每个元素都在 [1, n] 范围内&#xff0c;要求找出所有在 [1, n] 中但未出现在数组中的数字。 这让我想起小时候玩的「找错题」游戏 —…...

编程日记 2025/7/4 14:06:24

在 Git 中添加子模块（submodule）的详细步骤

在 Git 中添加子模块&#xff08;submodule&#xff09;的详细步骤如下&#xff1a; 1. 添加子模块 命令格式&#xff1a; git submodule add <仓库URL> [目标路径]仓库URL&#xff1a;子模块的 Git 仓库地址&#xff08;HTTP/SSH 均可&#xff09;。目标路径&#xff…...

编程日记 2025/7/13 18:57:43

瑞萨单片机笔记

1.CS for CC map文件中显示变量地址 Link Option->List->Output Symbol information 2.FDL库函数 pfdl_status_t R_FDL_Write(pfdl_u16 index, __near pfdl_u08* buffer, pfdl_u16 bytecount) pfdl_status_t R_FDL_Read(pfdl_u16 index, __near pfdl_u08* buffer, pfdl_…...

编程日记 2025/7/9 13:28:37

单片机复用功能重映射Remap功能

目录 一、查看“DS5319 stm32f10x中等密度mcu数据手册&#xff08;英文&#xff09;”手册 二、查看“RM0008 STM32F10xxx参考手册&#xff08;中文&#xff09;”手册 三、重映射&#xff08;Remap&#xff09;功能程序编写 自己学习过程中容易遗忘的知识点&#xff0c;记录…...

编程日记 2025/7/3 21:52:20

小白入门FPGA设计，如何快速学习？

很多刚入门的小伙伴&#xff0c;初次听说FPGA&#xff08;现场可编程门阵列&#xff09;&#xff0c;脑子里只有一个字&#xff1a;玄&#xff01; 什么“时序逻辑”“Verilog”“Vivado”&#xff0c;仿佛一夜之间掉进了电子黑魔法的深坑。 但真相是—— FPGA&#xff0c;其实…...

编程日记 2025/7/10 1:53:36

友思特应用 | LCD显示屏等玻璃行业的OCT检测应用

导读 光学相干层析成像(OCT)是一种非侵入式光学成像方法&#xff0c;提供微米尺度的空间分辨率&#xff0c;能够生成内部结构截面图像。自20世纪90年代初发明第一台OCT以来&#xff0c;它在眼科领域得到了广泛应用&#xff0c;并成为临床诊断的黄金标准之一。除了在生物医学领…...

编程日记 2025/7/9 8:18:57

Python的sys模块：系统交互的关键纽带

Python的sys模块&#xff1a;系统交互的关键纽带 对话实录 小白&#xff1a;&#xff08;挠头&#xff09;我知道 Python 能做很多事&#xff0c;可怎么让它和计算机系统‘交流’呢&#xff0c;比如获取系统信息、处理命令行参数&#xff1f; 专家&#xff1a;&#xff08;微…...

编程日记 2025/7/11 1:10:28

若依项目集成sentinel、seata和shardingSphere

集成组件包括MySQL分库分表及读写分离、seata以及Sentinel 若依项目文档连接 代码下载地址 需要结合ruoyi代码配合看&#xff0c;前提是熟悉基本代码结构&#xff0c;熟悉feign调用和基础网关配置等。 采用的版本信息 <java.version>1.8</java.version> <spr…...

编程日记 2025/7/11 1:14:04