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

css宽度适应内容

news 2026/2/11 2:58:39

废话不多说,看如下demo,我需要将下面这个盒子的宽度变成内容自适应
在这里插入图片描述
方法有很多,如下

父元素设置display:flex 实现子元素宽度适应内容

如下给父元素设置flex能实现宽度自适应内容

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {display: flex;}div {background-color: #0d1472;color: white;}</style></head><body><div>内容自适应宽度</div></body></html>

效果如下
在这里插入图片描述
但是这样有一个小缺点,那就是改变了父元素的display属性,我们仅仅是为了让box的宽度自适应内容,不应该去改变别的元素
所以我们可以使用其它的,如下`1

使用fit-content属性实现box自适应内容

fit-content 行为类似于 fit-content(stretch)，实际上这意味着盒子会使用可用的空间，但永远不会超过,

意味着fit-content 的宽度会使用内容的宽度,但是不会超过max-width的宽度
示例如下

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {background-color: #0d1472;color: white;width: fit-content;}</style></head><body><div>内容自适应宽度</div></body></html>

在这里插入图片描述

相关文章：

css宽度适应内容

废话不多说,看如下demo,我需要将下面这个盒子的宽度变成内容自适应 方法有很多,如下 父元素设置display:flex 实现子元素宽度适应内容 如下给父元素设置flex能实现宽度自适应内容 <!DOCTYPE html><html lang"en"><head><meta charset"U…...

编程日记 2024/1/14 10:23:37

粒子物理和原子核物理的理论在模拟和分析电路中的粒子束和辐射效应中的应用

粒子物理和原子核物理的理论可以应用于模拟和分析电路中的粒子束和辐射效应&#xff0c;特别是在粒子加速器和辐射探测器的设计和优化方面。通过这些理论的应用&#xff0c;可以提高加速器和探测器的性能&#xff0c;推动粒子物理和原子核物理的研究进展。粒子物理和原子核物理…...

编程日记 2024/1/14 10:18:32

Opentsdb官方优化文档 - 翻译

文档地址 : Tuning — OpenTSDB 2.4 documentation Tuning As with any database there are many tuning parameters for OpenTSDB that can be used to improve write and read performance. Some of these options are specific to certain backends, others are global. …...

编程日记 2024/1/14 10:15:30

JavaScript深拷贝与浅拷贝的全面解析

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ 目录 ✨ 前言 ✨ 正文 浅拷贝 对象的浅拷贝 数组的浅拷贝 浅拷贝的问题 深拷贝 什么是深拷贝…...

编程日记 2024/1/14 10:13:28

ESU毅速丨制造企业需不需要建设增材制造中心？

随着科技的不断发展&#xff0c;增材制造技术已经成为制造行业的新宠。越来越多的企业开始考虑建设增材制造中心&#xff0c;以提高生产效率、降低成本、加速产品创新。但是&#xff0c;对于制造企业来说&#xff0c;是否需要建设增材制造中心呢&#xff1f; 首先&#xff0c;我…...

编程日记 2024/1/14 10:12:27

Linux shell编程学习笔记39：df命令

0 前言1 df命令的功能、格式和选项说明 1.1 df命令的功能1.2 df命令的格式1.3 df命令选项说明 2 df命令使用实例 2.1 df&#xff1a;显示主要文件系统信息2.2 df -a&#xff1a;显示所有文件系统信息2.3 df -t[]TYPE或--type[]TYPE&#xff1a;显示TYPE指定类型的文件系统信…...

编程日记 2024/1/14 10:03:17

简单高效 LaTeX 科学排版 第004集 命令与环境

这是《简单高效LaTeX》的第四个视频&#xff0c;主要演示讨论基本命令与排版环境&#xff0c;还有保留字符。 视频地址&#xff1a;https://www.ixigua.com/7298100920137548288?id7298102807985390120&logTagf853f23a668f8a2ee405...

编程日记 2024/1/14 10:02:16

初识XSS漏洞

目录 一、XSS的原理和分类 二、Xss漏洞分类 1. 反射性xss 简单的演示&#xff1a; 2.基于DOM的XSS 简单的演示&#xff1a; 3.存储型XSS ​编辑简单的演示 4、self xss 三、XSS漏洞的危害 四、XSS漏洞的验证 五、XSS漏洞的黑盒测试 六、XSS漏洞的白盒测试 七、XS…...

编程日记 2024/1/14 10:01:15

白嫖aws创建Joplin server服务器

网上有很多的Joplin服务器的搭建教程&#xff0c;但是基本都是抄来抄去&#xff0c;对初学者实在是太不友好了。 话不多说&#xff0c;说干就干&#xff0c;自己从头找资料搭了一个&#xff0c;这可能是全网最好的Joplin服务器搭建教程了。 aws服务器 aws的服务器还是很香的&…...

编程日记 2024/1/14 10:00:15

metartc5_jz源码阅读-p2p通过stun服务器进行通信

1. YangIpc.c/yang_create_ipc 需要设置stun服务器的ip地址和端口号 设置iceCandidateType为2&#xff0c;表示走stun&#xff0c;即向stun服务器发起请求获取本机的公网ip地址。 //设置iceServerIP和端口号&#xff0c;设置iceCandidate类型。 strcpy(session->avinfo.rtc…...

编程日记 2024/1/14 9:56:11

总结：Java程序员读书清单顺序

总结&#xff1a;Java程序员读书清单顺序&#xff0c;持续更新中。。。。。。 一经验提示&#xff1a;1.零基础不建议直接看计算机专业书籍&#xff0c;建议先去看视频教程2.本书单目录用作自学顺序记录&#xff0c;也适用于有Java开发基础的同志3.看计算机书籍可以完善自己的技…...

编程日记 2024/1/14 9:55:10

ubuntu通过virtualbox安装win虚拟机

系统&#xff1a;Ubuntu22.04 需要准备&#xff1a;下载你想用的windows的iso镜像&#xff0c;官方传送门。 一、安装virtualbox sudo apt-get install virtualbox安装完成后&#xff0c;打开Applications&#xff0c;找到virtualbox&#xff0c;点击启动 二、安装windows虚…...

编程日记 2024/1/14 9:51:07

云流量回溯的工作原理及关键功能

云计算和网络技术的快速发展为企业提供了更灵活、高效的业务运营环境&#xff0c;同时也引发了一系列网络安全挑战。在这个背景下&#xff0c;云流量回溯成为网络安全领域的一个关键技术&#xff0c;为企业提供了对网络活动的深入洞察和实时响应的能力。 一、 云流量回溯的基本…...

编程日记 2024/1/14 9:50:07

DCP文件传输的重要性与应用

在数字时代&#xff0c;文件传输已成为商业运作中不可或缺的一环。随着企业越来越多地采用云基础设施和服务&#xff0c;有效地在云和团队之间传输大文件和数据集变得至关重要。在这一背景下&#xff0c;数据复制协议&#xff08;DCP&#xff09;文件传输应运而生&#xff0c;引…...

编程日记 2024/1/14 9:49:06

JAVA面试部分——后端-线程后篇

3.12 如果在运行当中&#xff0c;遇到线程不够了&#xff0c;会以什么样的方式创建线程 线程池在运行过程中&#xff0c;如果遇到线程不够的情况&#xff0c;会根据线程池的类型和配置进行不同的处理&#xff1a; 对于固定大小的线程池&#xff1a;如果线程因异常结束&#xff…...

编程日记 2024/1/14 9:47:04

C语言辨析——深入理解字符常量与表达式

1. 问题 今天看到一个题目&#xff0c;截图如下。 从答题情况来看&#xff0c;本题的答案是B&#xff0c;那么就意味着A、C、D是错的。但我认为这4个选项都是对的。当然&#xff0c;如果要从4个选项中挑选一个的话&#xff0c;那还是选择B妥当一些。 2. 分析 字符常量的定义…...

编程日记 2024/1/14 9:45:02

Springboot + websocket 实现 一对一 单人聊天

Springboot websocket 实现 一对一 单人聊天 要使用websocket ,需要添加 jar 打开项目中的pom.xml,添加以下内容 创建java端代码 配置websocke的endpoints 配置websocket的server ServerEndpoint(value "/websocket/{username}") 这句话 一定要注意, 这里 路…...

编程日记 2024/1/14 9:44:01

GEE机器学习——利用最短距离方法进行土地分类和精度评定

最短距离方法 最短距离方法（Minimum Distance）是一种常用的模式识别算法，用于计算样本之间的相似度或距离。该方法通过计算样本之间的欧氏距离或其他距离度量，来确定样本之间的相似程度或差异程度。 最短距离方法的具体步骤如下： 1. 数据准备：收集并准备用于训练的数据…...

编程日记 2024/1/14 9:40:59

数据结构时间复杂度与空间复杂度

文章目录 引入算法 1、时间复杂度1.概念2.大O渐进表示法3.常见时间复杂度计算举例 2、空间复杂度1.概念2.常见空间复杂度计算举例 引入 算法 算法就是一段能将一个物体从初始状态转换到某个目标转态的一个有限长序列方法的统称 算法效率&#xff1a;考虑一个方法是否好&…...

编程日记 2024/1/14 9:39:58

【计算机网络】内容整理

概述 分组交换 分组交换则采用存储转发&#xff08;整个包必须到达路由器&#xff0c;然后才能在下一个链路上传输)技术。 在发送端&#xff0c;先把较长的报文划分成较短的、固定长度的数据段。 电路交换 在端系统间通信会话期间&#xff0c;预留了端系统间沿路径通信所需…...

编程日记 2024/1/14 9:38:58

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2026/2/8 4:37:03

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/24 6:22:43

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/2/8 4:08:40

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/2/5 12:11:18

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/11/30 10:30:15

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2026/1/24 14:43:35

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2026/1/29 5:26:37