Css 最小内容和最大内容是如何工作的？_Css

Css 最小内容和最大内容是如何工作的？

css

Css 最小内容和最大内容是如何工作的？,css,Css,如何在CSS中计算min content和max content值内在维度是什么意思？注意：本文中的“宽度”指的是“逻辑宽度”，而不是CSS的宽度；也就是说，如果语言方向是垂直的（如东亚语言），或者在flexbox或grid中，这些值对于CSS的高度也有效最小内容和最大内容是宽度，高度，最小宽度，最小高度，最大宽度，最大高度以及更多属性（如弹性基础）的有效值盒子的内在尺寸是多少？ CSS分级级别3引入了内在维度的概念-与外在维度相反。在长方体的父长方体上计算长方体的外部尺寸。例如，width

如何在CSS中计算

min content

和

max content

值

内在维度是什么意思？

注意：本文中的“宽度”指的是“逻辑宽度”，而不是CSS的

宽度

；也就是说，如果语言方向是垂直的（如东亚语言），或者在flexbox或grid中，这些值对于CSS的

高度也有效<代码>最小内容

和

最大内容

是

宽度

，

高度

，

最小宽度

，

最小高度

，

最大宽度

，

最大高度

以及更多属性（如

弹性基础

）的有效值

盒子的内在尺寸是多少？ CSS分级级别3引入了内在维度的概念-与外在维度相反。在长方体的父长方体上计算长方体的外部尺寸。例如，

width:80%

是一个外在维度，因为主体的

宽度取决于其包含框的宽度
与此相反，width:min content
被称为内在的，因为盒子的宽度是根据盒子本身包含的内容的尺寸计算的
内部尺寸是框本身的属性，外部尺寸仅当框放置在文档中并且位于允许计算这些值的上下文中时才可用。例如，在CSS流（经典的CSS布局模式）中，您可能知道，height:20%
只有在父元素中定义了height
时才有效（即，它是可继承的）；这是一种无法计算的外部维度的情况（当外部值不可用时，CSS会回退到其内部等效值）。相反，height:min content
始终是可计算的，因为它是框本身固有的，并且无论框在文档中的位置如何（或框是否存在），它始终是相同的

多年来，min content
和max content
的定义已经改变了很多次，但结果始终保持不变，而且很容易理解。社区最初将它们作为width
的关键字进行请求，当框处于float
状态时，其计算值将与框的宽度匹配。事实上，这两个属性的定义最初是基于float
的行为；现在，它们的一般定义如下：
min内容

盒子可以容纳的最小尺寸，不会导致溢出，可以通过选择较大的尺寸来避免
换句话说，盒子的最小宽度，盒子的内容不会溢出盒子本身
实际上，一个很好的可视化方法是使用float

/* the computed width of #red in this example 
   equals to specifying #red { width: min-content } */
#blue        { width: 0px; }
#blue > #red { float: left; }


（GIF来源：）
在上面的GIF中，红框的最小内容宽度等于蓝框宽度为0px时红框的宽度（GIF中为234px，JSFIDLE中可能不同）
如您所见，如果红色框变小，单词supercalifragilisticexpialidious
将溢出红色框，因此在本例中min content
等于该特定单词的宽度，因为它是水平方向占用空间最多的单词
max content

当给定无限可用空间时，框在给定轴上的“理想”大小。通常，这是盒子在该轴上可以容纳的最小尺寸，同时仍然适合其内容物，即在避免溢出的同时最小化未填充空间

（GIF来源：）
在上面的GIF中，当蓝框的宽度为无穷大时，红框的最大内容宽度等于红框的宽度（GIF中为386px，JSFIDLE中可能不同）
在这里，红色框充分利用了蓝色框中x轴上的可用空间，但不会浪费空间。允许内容在相关轴上无限制地展开，红色框将其包裹在最大展开点处

那么fit content
、stretch
和其他方面呢？这些地产目前正在重新评估，因此不稳定（日期：2018年7月）。当它们变得更成熟时（希望很快），它们将被添加到这里。
min content:
内容（一组单词）可以具有的最小可能宽度。它表示内容中最大单词的宽度
例如：
hi

this 

is

biggest-word-in-the-content

<------- min-content ------>

hi this is a content without considering any line breaks.

<---------------------- max-content ------------------->

hi
这
是
内容中最大的单词


最大内容：
内容（一组单词）可以具有的最大可能宽度。它是指当所有单词排列在一行时内容的宽度
例如：
hi

this 

is

biggest-word-in-the-content

<------- min-content ------>

hi this is a content without considering any line breaks.

<---------------------- max-content ------------------->

hi这是一个不考虑任何换行的内容。
解释得非常清楚。还有一件事：它们与auto
相比如何？它们之间在设计理论上有什么根本的区别吗？根据所使用的布局，自动生成的结果是不同的。例如，如果您使用的是block、flexbox或grid等@Wes，根据轴的不同，行为也会有所不同。但文档中说，auto
也是固有的，仅由其内容决定？宽度：auto并不总是固有的。例如，如果display:block，它将计算到外框的宽度（因此是外部的）。似乎有一种情况是，width:min content
确实根据其规范起作用：当它包含具有flex-shrink:0
的flex项时。我记录了我的发现。