理解CSS3中 max/min-content及fit-content等width值

太过爱你忘了你带给我的痛 2024-04-17 22:52 6阅读 0赞

# 理解CSS3中 max/min-content及fit-content等width值 #

## 一、兼容性问题 ##

![兼容性图片][format_png]  
基本上，移动端使用时没有让任何问题：

.width{ 
    	width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content; 
    }

## 二、width:fill-available ##

fill-available 自动填满剩余空间，也就是盒模型中的margin，padding，border的尺寸填充  
根据**张鑫旭**在16年发表的一篇文章中指出：  
出现fill-available关键字值的价值在于，我们可以让元素的100%自动填充特性不仅仅在block水平元素上，其他元素，例如，我们一直认为的包裹收缩的inline-block元素上：

div { display:inline-block; width:fill-available; }

此时，元素兼具了块状元素的自动填充特性以及内联元素的定位对齐等特性。于是，（例如）我们就可以直接使用line-height让一个块状表现的元素垂直居中。  
举例：

<div class="box">
        <p class="fill-available">
          width:fill-available可以让元素的宽度表现为默认的block水平元素的尺寸表现。<br>
          但这里实际上是display:inline-block水平的，<br>
          于是，我们可以保证宽度满尺寸自适应的同时使用line-height实现近似的垂直居中效果。
        </p>
    </div>

.box { 
        width: 70%;
        height: 200px; 
        /* 行高控制垂直居中 */
        line-height: 200px;
        padding: 10px; 
        margin: 10px auto;
        background-color: #f0f3f9;
        resize: horizontal; /*允许用户在水平方向上调整元素的大小。*/
        overflow: hidden;
    }
    .fill-available { 
        line-height: 20px;
        padding: 20px;
        background-color: #cd0000;
        color: #fff;
         /* 元素内联，响应行高和vertical-align控制 */
         display: inline-block;
        vertical-align: middle;
        /* 宽度如块状元素般表现 */
        width: -webkit-fill-available;
        width: -moz-fill-available;
        width: -moz-available;    /* FireFox这个生效 */
        width: fill-available;
    }

## 三、width:fit-content ##

width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了

## 四、width:max-content ##

max-content的行为表现可以这么理解，假设我们的容器有足够的宽度，足够的空间，此时，所占据的宽度是就是max-content所表示的尺寸

## 五、width:min-content ##

min-content宽度表示的并不是内部那个宽度小就是那个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。

首先，我们要明白这里的“最小宽度值”是什么意思。替换元素，例如图片的最小宽度值就是图片呈现的宽度，对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以，最小宽度可能就是里面最长的英文单词的宽度  
同样的是和display:inline-block做比较，display:inline-block虽然也具有收缩特性，但宽度随最大长度长的那一个（同时不超过可用宽度）。而width:min-content的最终宽度是图片和文字最小宽度值里面大的那一个

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS56aGFuZ3hpbnh1LmNvbS9pbWFnZS9ibG9nLzIwMTgwMS8yMDE4LTAxLTEwXzAwNDgxNC5wbmc?x-oss-process=image/format,png