CSS3 max/min-content及fit-content、fill-available值的详解

c3中对width的值多了几个值:fill-availablemax-contentmin-content, 以及fit-content

1.width:fill-available

我们在页面中扔一个没有其他样式的<div>元素,则,此时,该<div>元素的width表现就是fill-available自动填满剩余的空间。

2.width:max-content

假设我们的容器有足够的宽度,足够的空间,此时,所占据的宽度是就是max-content所表示的尺寸。

3.width:min-content

min-content宽度表示的并不是内部那个宽度小就是那个宽度,而是,采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。

4.width:fit-content

width:fit-content也是应该比较好理解的,“shrink-to-fit”表现,换句话说,和CSS2.1中的floatabsoluteinline-block的尺寸收缩表现是一样的。

OK,然后,有小伙伴会疑问,既然跟很多CSS声明有一样的表现,那为什么还要再弄个新东西呢?

就拿水平居中效果举例,首先浮动肯定不行,因为只有左浮动和右浮动;绝对定位压根不占据空间,普通流中根本无法应用,而inline-block需要父级使用text-align:center,而本身可能还需要text-align:left略烦。

width:fit-content可以没有这些烦恼,因为,width:fit-content可以实现元素收缩效果的同时,保持原本的block水平状态,于是,就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。

<div class="w-box">
	<img src="/static/logo.png">
</div>
.w-box {
		background-color: #f0f3f9;
		padding: 10px;
		/* 这里左右方向是auto */
		margin: 0 auto;
		overflow: hidden;
		width: fit-content;
	}

 

总结:

上面水平居中的案例就是很好的说明,可以让元素保留原有display值的特性的同时,拥有别的display值的特性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/552971.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SAP打印输出设置

SAP打印输入有很多方式&#xff0c;适合不同的应用场景。 一.打印输出总体概览图 二.前台打印 这个是比较常见的&#xff0c;前端打印的出现减轻了管理员的工作量&#xff0c;用户可以选择自己电脑上的打印机输出&#xff0c;不需要所有打印机都在SAP平台中进行配置&#xff0…

web 学习第六次课程

文章目录 定位 定位 <body><div style"height:100px;width:100px;border:#F00 1px solid;"></div><div style"height:100px;width:100px;border: #00F 1px solid;"></div> </body><body><div style"pos…

Go 语言中的 GIF 图像处理完全指南:`image/gif`的技术与实践

Go 语言中的 GIF 图像处理完全指南&#xff1a;image/gif的技术与实践 概述安装与基础设置导入 image/gif 包初步配置示例&#xff1a;设置一个简单的 GIF 编码环境 读取与解码 GIF 图像读取 GIF 文件解析 GIF 数据 创建与编码 GIF 图像创建 GIF 图像编码 GIF 图像 处理 GIF 动…

【深度学习】wandb模型训练可视化工具使用方法

【深度学习】wandb模型训练可视化工具使用方法 wandb简介功能介绍登陆注册以及API keysproject和runsproject和runs的关系 wandb的配置实验跟踪版本管理Case可视化分析可视化自动调参&#xff08;wandb.sweep&#xff09;配置wandb.sweep1.配置 sweep_config2.初始化 sweep con…

学习STM32第十五天

SPI外设 一、简介 STM32F4XX内部集成硬件SPI收发电路&#xff0c;可以由硬件自动执行时钟生成、数据收发等功能&#xff0c;减轻CPU负担&#xff0c;可配置8位/16位数据帧&#xff0c;高位&#xff08;最常用&#xff09;/低位先行&#xff0c;三组SPI接口&#xff0c;支持DMA…

网站怎么实现HTTPS访问?

网站实现HTTPS的过程主要分为以下几个步骤&#xff1a; 1. 申请SSL证书&#xff1a; - 根据网站需求选择合适的SSL证书类型&#xff0c;DV证书只需验证域名所有权&#xff0c;适用于个人网站或小型项目&#xff1b;OV和EV证书需验证企业身份信息&#xff0c;适用于对信任度要求…

使用GAN做图像超分——SRGAN,ESRGAN

在GAN出现之前&#xff0c;使用的更多是MSE&#xff0c;PSNR,SSIM来衡量图像相似度&#xff0c;同时也使用他们作为损失函数。 但是这些引以为傲的指标&#xff0c;有时候也不是那么靠谱&#xff1a; MSE对于大的误差更敏感&#xff0c;所以结果就是会倾向于收敛到期望附近&am…

spring05:代理模式 和 AOP

spring05&#xff1a;代理模式 和 AOP 文章目录 spring05&#xff1a;代理模式 和 AOP前言一、静态代理模式&#xff08;代理类直接写好&#xff09;1. &#xff08;房东租房子 的案例&#xff09; 二、动态代理模式&#xff08;代理类是动态生成的&#xff09;1. &#xff08;…

动态代理,XML,Dom4j

文章目录 动态代理概述特点代码实现实现的关键步骤优点 XML概述作用编写第一个XML文件组成声明元素(标签、标记)属性注释转义字符[实体字符字符区(了解) 约束DTD约束Schema约束名称空间 Dom4jXML解析解析方式和解析器解析方式解析器Snipaste_2024-04-17_21-22-44.png<br /&g…

竞赛 基于LSTM的天气预测 - 时间序列预测

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 机器学习大数据分析项目 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/po…

【机器学习300问】74、如何理解深度学习中L2正则化技术?

深度学习过程中&#xff0c;若模型出现了过拟合问题体现为高方差。有两种解决方法&#xff1a; 增加训练样本的数量采用正则化技术 增加训练样本的数量是一种非常可靠的方法&#xff0c;但有时候你没办法获得足够多的训练数据或者获取数据的成本很高&#xff0c;这时候正则化技…

pajamas 1 daydream.sequence-template

0. 老实交代&#xff0c;最近对于python&#xff0c;非常之感冒 热天气常驻之后&#xff0c;各种毛病就来了&#xff1a;蚊子很彪悍&#xff0c;牙齿不舒服&#xff0c;肠胃那更是一坨 … 虽然不久前&#xff0c;荷包大残&#xff0c;但是关注到 mac mini 之后&#xff0c;就…

项目7-音乐播放器5+注册账号

1.前端代码 MAPPER Insert("insert into user(username,password) values (#{username},#{password}) ")Integer insertUserInfo(String username,String password); Service public Result insertUserInfo(String username, String oldpassword,String newpasswo…

MAC电脑M1安装OpenCV

最近在学习研究OpenCV&#xff0c;奈何只有mac电脑。安装OpenCV感觉还是挺麻烦的&#xff0c;所以记录一下&#xff0c;难免以后会忘记。 安装OpenCV我参考的帖子 https://www.bilibili.com/read/cv23613225/ 一、首先安装Anaconda 目前已安装不做赘述 二、启动命令窗口 方…

SpringBoot搭建环境

创建项目向导 用idea向导建SpringBoot项目&#xff1a;菜单 > File > New > Project… 选择向导&#xff1a; 默认向导 https://start.spring.io 建议用 https://start.aliyun.com 配置项目信息 Group : 组织名 Artifact : 项目名 Version : 版本号 name : 与Artifa…

【在线OJ系统】自定义注解实现分布式ID无感自增

实现思路 首先自定义参数注解&#xff0c;然后根据AOP思想&#xff0c;找到该注解作用的切点&#xff0c;也就是mapper层对于mapper层的接口在执行前都会执行该aop操作&#xff1a;获取到对于的方法对象&#xff0c;根据方法对象获取参数列表&#xff0c;根据参数列表判断某个…

Hbase的简单学习一

一 Hbase的搭建与安装 1.1 安装 1.准备好文件&#xff0c;上传到Linux上 2.解压文件 tar zxvf hbase-2.2.7-bin.tar.gz -C ../ ../是解压到的路径 1.2 配置文件 1.配置环境变量 去etc/profile目录下 export HBASE_HOME/usr/local/soft/hbase-2.2.7 export PATH$PATH:$H…

Midjourney 实现角色一致性的新方法

AI 绘画的奇妙之处&#xff0c;实乃令人叹为观止&#xff01;就像大千世界中&#xff0c;寻不见两片完全相同的树叶一般&#xff0c;AI 绘画亦复如是。同一提示之词&#xff0c;竟能催生出千变万化的图像&#xff0c;使得AI所绘之作&#xff0c;宛如自然之物般独特&#xff0c;…

在报表控件 FastReport .NET 中使用 PageCreate 事件

FastReport Business Graphics .NET&#xff0c;是一款基于fastreport报表开发控件的商业图形库&#xff0c;借助 FastReport 商业图形库&#xff0c;您可以可视化不同的分层数据&#xff0c;构建业务图表以进行进一步分析和决策。利用数据呈现领域专家针对 .NET 7、.NET Core、…

使用Android studio,安卓手机编译安装yolov8部署ncnn,频繁出现编译错误

从编译开始就开始出现错误&#xff0c;解决步骤&#xff1a; 1.降低graddle版本&#xff0c;7.2-bin --->>> 降低为 6.1.1-all #distributionUrlhttps\://services.gradle.org/distributions/gradle-7.2-bin.zip distributionUrlhttps\://services.gradle.org/di…