自适应:
撑满空闲空间与收缩到内容尺寸。
CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。
除此之外 ,还新增了更细粒度的'min-content'和'max-content'。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字
[注意]IE浏览器不支持,webkit内核浏览器需添加-webkit-前缀
fill-available
fill-available表示撑满可用空间
举例来说,页面中一个<div>
元素,该<div>
元素的width
表现就是fill-available
自动填满剩余的空间
出现fill-available
关键字值的价值在于,可以让元素的100%自动填充特性不仅仅在block
水平元素上,也可以应用在其他元素
fit-content
fit-content表示将元素宽度收缩为内容宽度
min-content
min-content表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度
max-content
max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本,则相当于文本不换行