css3 width新增属性max/min-content和fit-content、fill-availablea


在css3中width的新的属性max/min-content和fit-content、fill-availablea属性 使用时需带前缀。如：

1
2
3
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;

属性效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="content">
        <img src="//i2.wp.com/ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1585722344&di=a7452f0681db97299ad58f32f6492017&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg" alt="">
        <p>这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试这是测试</p>
</div>
 <style type="text/css">
        .content{
            background: red;
        }
        img{
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
    </style>

不加属性时
在这里插入图片描述

min-content：div宽度以内部内容最小宽度为准

1
2
3
4
5
.content{
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
}

在这里插入图片描述

max-content：div宽度以内部内容最大宽度为准

1
2
3
4
5
.content{
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

图片有滚动条！！！

在这里插入图片描述

fill-available让元素充满可用宽高，即使设置了display: inline-block;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <div class="content">
        <img src="//i2.wp.com/ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1585722344&di=a7452f0681db97299ad58f32f6492017&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg" alt="">
</div>
    <style type="text/css">
        .content{
            background: red;
            display: inline-block;
            width: -webkit-fill-available;
            width: -moz-fill-available;
            width: fill-available;
        }
        img{
            width: 200px;
            height: 200px;
            object-fit: cover;
        }
    </style>

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

在这里插入图片描述

fill-available可以轻松实现等高布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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：表示将元素宽度收缩为内容宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type="text/css">
   .content{
        background: red;
        width: -webkit- fit-content;
        width: -moz- fit-content;
        width:  fit-content;
    }
    img{
        width: 200px;
        height: 200px;
        object-fit: cover;
    }
</style>
 <div class="content">
   <img src="//i2.wp.com/ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1585722344&di=a7452f0681db97299ad58f32f6492017&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg" alt="">
   <p>这是测试这是测试这是测试这是测试这是测试这是测试</p>
</div>

在这里插入图片描述

fit-content配合margin: auto;可实现水平居中效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
  .content{
      width: 800px;
      height: 600px;
      background: blue;
  }
  .con{
      background: red;
      width: -webkit- fit-content;
      width: -moz- fit-content;
      width:  fit-content;
      margin: auto;
  }
  img{
      width: 200px;
      height: 200px;
      object-fit: cover;
  }
</style>
<div class="content">
  <div class="con">
      <img src="//i2.wp.com/ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1585722344&di=a7452f0681db97299ad58f32f6492017&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg" alt="">
      <p>这是测试这是测试这是测试这是测试这是测试这是测试</p>
  </div>
</div>

在这里插入图片描述