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

css宽度适应内容

news 2026/2/6 5:18:17

废话不多说,看如下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

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/2/5 15:43:28

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/1/21 14:21:52

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/1/21 19:46:26

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2026/1/31 9:49:23

热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

编程新知 2026/1/28 16:00:47

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...

编程新知 2025/10/19 1:38:36

虚幻基础：角色旋转

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 移动组件使用控制器所需旋转&#xff1a;组件 使用 控制器旋转将旋转朝向运动&#xff1a;组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转&#xff1a;必须移动才能旋转&#xff0c;不移动不旋转控制器…...

编程新知 2025/11/30 0:06:07

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...

编程新知 2026/1/23 0:35:20

Qt的学习（二）

1. 创建Hello Word 两种方式&#xff0c;实现helloworld&#xff1a; 1.通过图形化的方式&#xff0c;在界面上创建出一个控件&#xff0c;显示helloworld 2.通过纯代码的方式&#xff0c;通过编写代码&#xff0c;在界面上创建控件&#xff0c; 显示hello world&#xff1b; …...

编程新知 2026/2/6 2:41:56