width/height新视界

众所周知,width height是用来指定元素的宽度和高度的，可能我们平时用到具体的<length> 和<percentage> 比较多，那他们还有其他的值吗？如果我们根据内容的宽度来决定元素的宽度（随着内容自适应）该如何做呢？我们以最小或者最大的元素内的内容的宽度或者高度来决定元素的宽高该如何实现呢？

CSS3给我们提供了好方法，具体是什么方法呢？

值

width： <length> | <percentage> |
        border-box | content-box |     
        max-content | min-content | available | fill-available | fit-content |   
        | auto | inherit 

• <length>(px/em/rem) 具体数值
• <percentage> 百分比
• border-box 如果出现或者,应用到元素的边框盒子，暂无浏览器支持
• content-box 如果出现或者,应用到元素的内容盒子，暂无浏览器支持
• max-content 固有的首选宽度，元素内容中宽度最大者
• min-content 固有的最小宽度，元素内容宽度最小宽度最大值，注意：这里的最小是指在不能换行的元素中最小的，如果是纯文字，且没有规定不可以换行，那么这里的宽度将为一个汉字的宽度，具体见示例。
• available 包含块的宽度减去水平margin border padding
• fill-available 自动填满剩余空间，display：block元素的宽度就表现为fill-available，即元素的宽度为100%，应用在display：inline-block的元素上可以充分看到其效果
• fit-content 以下两种情况的较大值
  
  • min-content
  • max-content和available的较小值
    和float、absolute、inline-block类似。
• auto 默认值，浏览器将会为指定的元素计算并选择一个宽度
• inherit

浏览器支持 ##

属性	chrome	Firefox	opera	Safari	IE
border-box content-box	不支持	不支持	不支持	不支持	不支持
max-content	-webkit-	-moz-	-webkit-	2.0支持intrinsic 6.1支持-webkit-	不支持
min-content	-webkit-	-moz-	-webkit-	2.0支持min-intrinsic 6.1支持-webkit-	不支持
fill-content	-webkit-	-moz-	-webkit-	-webkit-	不支持
available	不支持	-moz-	不支持	不支持	不支持
fill-available	-webkit-	不支持	-webkit-	-webkit-	-webkit-

虽然IE浏览器均不支持，但是以上的值我们可以在移动端使用，很方便。

示例

fill-avaiable示例

div{
    border: 2px solid mediumvioletred;
}
span{
    display: inline-block;
    width: -webkit-fill-available;
    width: -moz-fill-available;
    width: -moz-available;/*firefox暂时只支持这个*/
    width: fill-available;
    background: yellow;
}

<div>
    <span>我是来测试fill-available的</span>
</div>

这样元素不仅有块级元素自动填充的特性，而且也具有内联元素所具有的的定位对齐等特性

max-content示例

元素设置为display:inline-block;未给其设置宽度：

<div>
    <img src="../images/img01.jpg"/>
    <p>元素设置为display：inline-block;width: -webkit-max-content,表现的结果就像给元素设置了white-space：nowrap；</p>
</div>

div{
    display: inline-block;
    border: 2px solid mediumvioletred;
    padding: 10px;
}
span{
    background: yellow;
}

给div设置width: -webkit-max-content; ：

表现的结果就像给元素设置了white-space：nowrap；，如果元素有足够大的空间，那么p元素中的文字会一行显示，那么div中最大的宽度自然就是p元素的宽度，看到了如上图的表现。

min-content示例

当div的宽度设置为width：-webkit-min-content：

与max-content相反，width：-webkit-min-content 是元素内容宽度最小宽度最大值。我的理解是，如果我们把div中的内容的宽度以我们肉眼可见的宽度从小到大排序，然后从最小开始找，直到找到不能换行的元素，比如white-space：nowrap；或者像img这种宽度不能自动缩小的元素的宽度将作为div的宽度。

---

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/width