max-content:适用于希望元素尽可能在一行上显示内容,但又不希望元素超出其容器宽度的场景,例如,在一个响应式布局中,希望元素的宽度能够根据内容自动调整。 示例代码: ThisIsAVeryLongWordWithoutSpacesThis is a sentence with several words. 在第一个例子中,即使外部 div 的宽度是 200px,由于min-content的作用,包...
总结:max-content和fit-content在自己内容不足以撑满父盒子时,宽度只为自己内容的最大宽度,不会再强行增大。
这种行为称之为“preferred minimum width”或者“minimum content width”,也就是本文的重点角色之一min-content,换了一个更加规范好听的名字了。 2.4 超出容器限制 上面1~3情况,除非有明确的width相关设置,否则尺寸都不会主动超过容器宽度的,但是,存在一些特殊情况,例如,连续的英文数字,好长好长;或者内联元素被设置...
1、max-content 内容有多宽,盒子就有多宽,不会顾及父级盒子有多宽,只满足自己的需求。 2、min-content 装下单个最大内容的最小宽度,下面这个图片能够直观的说明这是什么意思: 如果没有最大宽度,一般就算指一个字符的宽度了 3、fit-content 在不超过父级盒子宽度的情况下,尽量撑开盒子满足自己的需求。 max-co...
width: min-content; } 好了,要开始往深的地方讲了。 虽然,作为名词fill-available,max-content,min-content, 以及fit-content都是新鲜面孔,但是,实际上,在CSS2.1的时候,就有类似的尺寸概念…… 二、CSS2.1的尺寸体系 在CSS2.1的世界中,常见的尺寸分为...
width: -moz-min-content; width: min-content; } 好了,要开始往深的地方讲了。 虽然,作为名词fill-available,max-content,min-content, 以及fit-content都是新鲜面孔,但是,实际上,在CSS2.1的时候,就有类似的尺寸概念…… 二、CSS2.1的尺寸体系 在CSS2.1的世界中,常见的尺寸分为这几类: ...
min-content宽度表示的并不是内部那个宽度小就是那个宽度,而是,采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。 4.width:fit-content width:fit-content也是应该比较好理解的,“shrink-to-fit”表现,换句话说,和CSS2.1中的float, absolute, inline-block的尺寸收缩表现是一样的。
max-content的行为表现可以这么理解，假设我们的容器有足够的宽度，足够的空间，此时，所占据的最大宽度是就是max-content所表示的尺寸。会发现，width:max-content表现得好像设置了white-space:nowrap一样，文字一马平川下去，元素的宽度也变成了这些文字一行显示的宽度！为什么会这么表现呢？定义就是这样的...
2.max-content和min-content是会个跟随有定宽的的最大最小宽度,不会进行收缩。 3.fit-content的属性 width:fit-content可以实现元素收缩效果的同时,保持原本的block水平状态,于是,就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。就是div的自适应宽度不是100%而是内容的大小。很好的实现了,block元素...
max-content 在一个父元素上设置该元素后,元素的宽度会以子元素内最长的一个为准,子元素表现得会好像设置了white-space:nowrap一样一行展示 min-content 在一个父元素上设置该元素后,子元素会按照最短断行进行换行 [css] width属性的min-content和max-content有什么作用...