CSS width中的max-content,min-content,fit-content的区别

最新推荐文章于 2024-05-14 23:06:34 发布
最新推荐文章于 2024-05-14 23:06:34 发布
阅读量1.9w 收藏 49
点赞数 25
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21522331/article/details/108011206
版权

黑色的框是设置这些属性的盒子，红色的框是父盒子。

1、max-content

内容有多宽，盒子就有多宽，不会顾及父级盒子有多宽，只满足自己的需求。
在这里插入图片描述

2、min-content

装下单个最大内容的最小宽度，下面这个图片能够直观的说明这是什么意思
在这里插入图片描述

3、fit-content

在不超过父级盒子宽度的情况下，尽量撑开盒子满足自己的需求。
在这里插入图片描述
max-content和fit-content在自己内容不足以撑满父盒子时，宽度只为自己内容的最大宽度，不会再强行增大。

fit-content官方给出可以表示为一个公式：
在这里插入图片描述

ArthurHsing
关注
  • 25
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端入门到实战：CSS3中width值为max/min-content及fit-content的理解
软件开发-前端开发-IT
09-23 4523
在css3中新增了width的属性值：max-content;min-content和fit-content、fill-availablea，用来实现以内容为主的尺寸计算方式。 分别介绍一下这三个属性的意义： 1.fill-available的意义——自动填满剩余的空间 就是有个div没有任何样式的时候，浏览器是按照自动填充的样式呈现的，就是100%width的样式填充的。按照盒子模式，不仅元素在...
深入理解css中的align-content属性
09-24
《深入理解CSS中的align-content属性》 在CSS布局中，align-content属性是一个至关重要的概念，它主要用于控制在弹性盒模型（Flexbox）中，当项目因换行而产生多行时，这些行在容器中的垂直对齐方式。本文将深入...
CSS3---理解CSS3 max/min-content及fit-content等width值
COCOLI_BK的博客
11-15 1421
fill-available （默认值）
CSS样式表width常忽略使用的fit-content/max-content/min-content属性值
最新发布
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-14 908
css3 样式中width 属性值的几种属性值
理解CSS3中 max/min-content及fit-content等width值
weixin_38516688的博客
09-02 2443
理解CSS3中 max/min-content及fit-content等width值 一、兼容性问题 基本上，移动端使用时没有让任何问题： .width{ width: -webkit-min-content; width: -moz-min-content; width: min-content; } 二、width:fill-available fill-availab...
【CSS3中 4个自适应关键字: available、max-content、min-content、fit-content】
Hey_Coder
01-18 3586
1. available 属性值 available表示 撑满可用空间 ⇒ 自动填满 剩余的空间。 available关键字 可以让元素的100%自动填充特性 不仅仅在 块级元素上，也可以应用在其他元素。如 内联块级元素 display: inline-block; ❶ display: inline-block;
CSS3 width：fit-content属性
热门推荐
xubingnan123的博客
12-18 6万+
昨天在做一个JavaScript练习的时候，我要将一段文字插入到div里，在这个过程中偶然接触到了一个以前不知道的属性——“fit-content” 在实践中也许会遇到这么一种情况，我们给一个固定宽度的div里面输入一厂串连续的英文字母，如果输入的足够多，文字会溢出来，就像这样： 只有当输入的是英文的时候才会出现这种情况，因为一长串的英文字母会被默认为是一个单词，而汉字则不会有这个问题。
width：max-content 使用
Luckyzhoufangbing的博客
10-22 4894
需求背景： 一开始使用 伪类元素 :after、:before，在伪类元素中放入背景图片～中间文字 “放心服务” 定宽，如 1.3rem, 但是移动端手机在适配的过程中，有时候1.3rem 不能满足有些机型，出现以下样式， 所以不能用这种方法，遇到过很多次啦～ 改用不脱离文档流的形式，代码如下： html: <div class="title"> <d...
兼容IE6、IE7的min-width、max-width写法
09-24
在网页设计中，`min-width` 和 `max-width` 是两个非常重要的CSS属性，它们用于定义元素的最小和最大宽度，以确保元素在不同屏幕尺寸和设备上保持良好的布局和可读性。然而，这两个属性在早期的Internet Explorer...
让IE6支持兼容min-width、max-width CSS样式属性的方法
09-24
在CSS布局设计中，`min-width` 和 `max-width` 是两个非常重要的样式属性，它们允许我们设置元素的最小和最大宽度，以确保在不同屏幕尺寸和设备上保持良好的响应性和可读性。然而，IE6（Internet Explorer 6）浏览器...
CSS3的 fit-content实现水平居中
09-24
今天通过本文给大家介绍一个fit-content属性的相关知识，CSS属性是用来水平居中的，fit-content是CSS3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;一起来看下代码吧
掌握CSS网格函数fit-content()的妙用
爱编程的鱼的博客
02-05 1314
CSS网格函数fit-content()是一项强大的工具，它能够帮助我们在网格布局中自动调整网格项的尺寸，实现灵活的布局效果。通过合理运用fit-content()函数，我们可以创建自适应的网格布局，提升用户体验并简化响应式设计的实现。希望本文能帮助你更好地理解和运用fit-content()函数，为你的CSS网格布局带来更多可能性！
你真的了解width这个属性吗
weixin_41897680的博客
05-01 5617
你真的了解width这个属性吗
min-width、max-width属性中min-content、max-content的含义，css中minmax()用法、1fr单位的含义----使页面具有相应性的属性以及属性值
xk_initial的博客
08-26 3351
min-width、max-width属性中min-content、max-content的含义，css中minmax()用法、1fr单位的含义 min-width 表示容器的最小宽度 max-width 表示容器的最大宽度 .box{ min-width: 300px; # 表示容器的最小宽度为300px } min-content： 是一个属性值，是min-width、max-width的属性值。以.box容器为例，表示的含义是.box的最小宽度，应适应这个容器内部相对较短的不可断行的元素宽度
[css] width属性的min-content和max-content有什么作用
歌谣的博客
01-18 993
[css] width属性的min-content和max-content有什么作用 max-content 在一个父元素上设置该元素后，元素的宽度会以子元素内最长的一个为准，子元素表现得会好像设置了white-space:nowrap一样一行展示 min-content 在一个父元素上设置该元素后，子元素会按照最短断行进行换行 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
【转】理解CSS3 max/min-content及fit-content等width值
liangtaox8的博客
06-28 392
本文地址：https://www.zhangxinxu.com/wordpress/?p=5392 一、为何要蹦出这些新玩意？ 在CSS3的世界里，width属性又多了几个关键字成员，fill-available, max-content, min-content, 以及fit-content。 想必很多小伙伴都没见过。不知大家有没有跟我一样的感觉，去厕所蹲了个大号，再回到办公室就会遇到之前没见过...
CSS3技巧：fit-content水平居中
web前端开发
01-04 474
当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有？那么今天给大家介绍一个fit-content属性，不知道有没有同学用过，如果用过那么你可以略过...
flex布局 高度没有自动撑到max-height
风吹过的博客
04-26 1509
flex竖向布局 高度无法被撑开
css min-width_CSS Min-Content从内而外的设计
cungui5726的博客
08-20 324
css min-widthEvery designer falls into one of two broad categories: 每个设计师都属于以下两大类之一： Designers that create the design first, then try to fit content inside a static frame. 首先创建设计的设计师 ，然后尝试将内容放入静态...
flex: 1; background-color: rebeccapurple; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); grid-template-rows: repeat(auto-fit, minmax(64px, 1fr)); /* 可选，设置网格之间的间距 */ grid-gap: 4px; 这是我的代码 我发现每个格子的大小不对
05-30
如果每个格子的大小不对，可能是因为你的容器宽度不够，导致每个格子的宽度被压缩。你可以尝试调整容器的宽度，或者通过调整 `minmax` 函数的最小值来达到更好的效果。 另外，如果你想保持每个格子的宽高比例，可以使用 `aspect-ratio` 属性，例如： ```css .container > div { aspect-ratio: 9 / 16; /* 宽高比例为 9:16 */ } ``` 这样每个格子的宽高比例就会保持不变，而且不会被压缩变形。完整代码如下： ```html <div class="container"> <div></div> <div></div> <div></div> <!-- 其他格子 --> </div> ``` ```css .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; /* 可根据需要调整容器宽度 */ } .container > div { flex: 1; background-color: rebeccapurple; display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); grid-template-rows: repeat(auto-fit, minmax(64px, 1fr)); grid-gap: 4px; /* 可选，设置网格之间的间距 */ aspect-ratio: 9 / 16; /* 宽高比例为 9:16 */ } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值