1. CSS2.1的尺寸体系
2.1 充分利用可用空间。例如,一些div元素默认宽度100%父元素,这种充分利用可用空间的行为就称为“fill-available”。
2.3 收缩到最小。这个基本上就出现在table-layout为auto的表格中,想必有经验的小伙伴一定见过下面这样一柱擎天的盛况的吧!
max-content的表现与之有些类似,具有收缩特性,同时最大内容宽度
出现fill-available关键字值的价值在于,我们可以让元素的100%自动填充特性不仅仅在block水平元素上,其他元素,例如,我们一直认为的包裹收缩的inline-block元素上:
max-content的行为表现可以这么理解,假设我们的容器有足够的宽度,足够的空间,此时,所占据的最大宽度是就是max-content所表示的尺寸。
min-content宽度表示的并不是内部哪个宽度小就是哪个宽度,而是,采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。
width:fit-content也是应该比较好理解的,“shrink-to-fit”表现,换句话说,和CSS2.1中的float, absolute, inline-block的尺寸收缩表现是一样的
OK,然后,有小伙伴会疑问,既然跟很多CSS声明有一样的表现,那为什么还要再弄个新东西呢?