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

来源:http://www.chinese-glasses.com 作者:Web前端 人气:116 发布时间:2020-03-31
摘要:时间: 2019-10-20阅读: 630标签: width 前面的话 一般地,有两种自适应:撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外 ,还新增了更细粒

时间: 2019-10-20阅读: 630标签: width

前面的话

  一般地,有两种自适应:撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外 ,还新增了更细粒度的'min-content'和'max-content'。这四个关键字可用于设置宽高属性。本文将详细介绍CSS3中的这四个自适应关键字

  [注意]IE浏览器不支持,webkit内核浏览器需添加-webkit-前缀

 

在css3中新增了width的属性值:max-content;min-content和fit-content、fill-availablea,用来实现以内容为主的尺寸计算方式。

fill-available

  width:fill-available表示撑满可用空间

  举例来说,页面中一个<div>元素,该<div>元素的width表现就是fill-available自动填满剩余的空间

  出现fill-available关键字值的价值在于,可以让元素的100%自动填充特性不仅仅在block水平元素上,也可以应用在其他元素

  下面的例子中,inline-block元素宽度撑满了可用宽度

<style>
div{
  background-color: pink;
  display:inline-block;
  width:-webkit-fill-available;
}
</style>
<div>小火柴的蓝色理想</div>

  类似地,高度也有此特性

  下面的例子中,div元素高度撑满了可用高度

<style>
div.inner{
  background-color: pink;
  height:-webkit-fill-available;
}
</style>
<div style="height: 100px;">
  <div class="inner">小火柴的蓝色理想</div>
</div>

【等高布局】

  于是,利用fill-available可以轻松地实现等高布局

<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">HTML</div>
  <div class="inner">CSS</div>
  <div class="inner">JS<br>jQyery<br>Vue</div>
</div>

 

分别介绍一下这三个属性的意义:

fit-content

  width:fit-content表示将元素宽度收缩为内容宽度

  下面是一个实例

<style>
div{
  background-color: pink;
  width:-webkit-fit-content;
}
</style>
<div>小火柴的蓝色理想</div>

10bet,【水平居中】

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

<style>
div{
  background-color: pink;
  width:-webkit-fit-content;
  margin:auto;
}
</style>
<div>小火柴的蓝色理想</div>

  类似地,高度也有此特性,但不常用

 

1.fill-available的意义——自动填满剩余的空间就是有个div没有任何样式的时候,浏览器是按照自动填充的样式呈现的,就是100%width的样式填充的。按照盒子模式,不仅元素在block中可以呈现自动填满空间的样式,在inline-block上也是可以这样呈现的(包裹收缩的inline-block元素上,这里说的inline-block是具有收缩特性)。

min-content

  width:min-content表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度

  首先,要明白这里的“最小宽度值”是什么意思。替换元素,例如图片的最小宽度值就是图片呈现的宽度,对于文本元素,如果全部是中文,则最小宽度值就是一个中文的宽度值;如果包含英文,因为默认英文单词不换行,所以,最小宽度可能就是里面最长的英文单词的宽度

<style>
.outer{
  width:-webkit-min-content;
}
</style>
<div class="outer">
  <div style="height:10px;width:100px;background:lightgreen"></div>
  <div style="background-color: pink;">小火柴的蓝色理想</div>
</div>

 

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

max-content

  width: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 style="background-color: pink;">小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想小火柴的蓝色理想</div>
</div>

 

2.max-content和min-content是会个跟随有定宽的的最大最小宽度,不会进行收缩。

本文由10bet发布于Web前端,转载请注明出处:CSS3中width值为max/min-content及fit-content的理解

关键词:

最火资讯