CSS3四个自适应关键字——fill-available、max-content、min-content、fit-conten
2021-02-04 20:18
标签：lin 默认 也有 css3 两种 居中 其他 内核 应用 一般地，有两种自适应：撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为‘fill-availabel‘和‘fit-content‘。除此之外 ，还新增了更细粒度的‘min-content‘和‘max-content‘。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字 [注意]IE浏览器不支持，webkit内核浏览器需添加-webkit-前缀 width:fill-available表示撑满可用空间 举例来说，页面中一个 出现 下面的例子中，inline-block元素宽度撑满了可用宽度 类似地，高度也有此特性 下面的例子中，div元素高度撑满了可用高度 【等高布局】 于是，利用fill-available可以轻松地实现等高布局 width:fit-content表示将元素宽度收缩为内容宽度 下面是一个实例 【水平居中】 类似地，高度也有此特性，但不常用 width:min-content表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度 首先，要明白这里的“最小宽度值”是什么意思。替换元素，例如图片的最小宽度值就是图片呈现的宽度，对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以，最小宽度可能就是里面最长的英文单词的宽度 width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行 CSS3四个自适应关键字——fill-available、max-content、min-content、fit-conten 标签：lin 默认 也有 css3 两种 居中 其他 内核 应用 原文地址：https://www.cnblogs.com/passkey/p/13132091.html前面的话
fill-available
width表现就是fill-available自动填满剩余的空间
fill-available关键字值的价值在于，可以让元素的100%自动填充特性不仅仅在block水平元素上，也可以应用在其他元素style>
div{
background-color: pink;
display:inline-block;
width:-webkit-fill-available;
}
style>
div>斯斯成风div>
style>
div.inner{
background-color: pink;
height:-webkit-fill-available;
}
style>
div style="height: 100px;">
div class="inner">斯斯成风div>
div>
style>
.inner{
width:100px;
height:-webkit-fill-available;
margin:0 10px;
display: inline-block;
vertical-align: middle;
background-color: pink;
}
style>
div style="height: 100px;">
div class="inner">HTMLdiv>
div class="inner">CSSdiv>
div class="inner">JSbr>jQyerybr>Vuediv>
div>
fit-content
style>
div{
background-color: pink;
width:-webkit-fit-content;
}
style>
div>斯斯成风div>
width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了style>
div{
background-color: pink;
width:-webkit-fit-content;
margin:auto;
}
style>
div>斯斯成风div>
min-content
style>
.outer{
width:-webkit-min-content;
}
style>
div class="outer">
div style="height:10px;width:100px;background:lightgreen">div>
div>斯斯成风div>
div>
max-content
style>
.outer{
width:-webkit-max-content;
border:1px solid black;
}
style>
div class="outer">
div style="height:10px;width:100px;background:lightgreen">div>
div>斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风斯斯成风div>
div>
上一篇：jsonp 代码优化
文章标题：CSS3四个自适应关键字——fill-available、max-content、min-content、fit-conten
文章链接：http://soscw.com/essay/51057.html