css中关于fit-content尺寸的属性

css体系中的尺寸，明显的表现就是元素的width和height了，另外就是因为display:inline-block、float:left和position:absolute的设置，导致元素尺寸收缩，比如position:absolute的设置。如下图：

这个是div元素默认的尺寸，我们给div设置position:absolute后，div元素脱离当前的文档流：

如果是设置display:inline-block的时候，虽然div元素没有脱离文档流，但是同样会尺寸收缩：

元素尺寸接近于内容的尺寸。

还有一个属性white-space: nowrap，这是不允许元素内容换行，可能会导致内容溢出。

在css3中，这些比较模糊的概念都有了明确的定义，在尺寸属性中新增几个关键字：包括fit-content、fill-available、min-content和max-content。

一下内容分别解释这四个属性的区别以及用法：

fit-content

翻译过来就是合适的内容，那么width:fit-content，fit-content关键字和display:inline-block和position:absolute的效果一样的。这样我们可以使用display:inline-block或者是display:table实现尺寸收缩效果，并且兼容性更好。为什么还要单独新增fit-content关键字呢？

fit-content有两个有点：

1. 保护了元素原始的diaplay计算值，比如li元素设置display:inline-blcck，那么前面的符号失效，::marker伪元素失效
2. 让元素尺寸有个确定的值。有个典型的场景：绝对定位，水平垂直居中。如果决定定位的元素有明确的width和height，那么可以这样设置：

        .flex {
            border: 1px solid red;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 300px;
            height: 300px;
        }
1
2
3
4
5
6
7
8
9
10
11

但是，很多时候定位元素是没有明确width和height的。虽然我们可以通过transform来完成居中效果：

        .flex {
            border: 1px solid red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

1
2
3
4
5
6
7
8

那要是有需求给这个元素的transform属性设置动效呢？代码如下：

        .flex {
            border: 1px solid red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: oo 3s;
        }

        @keyframes oo {
            from {
                transform: translateY(20px)
            }

            to {
                transform: translateY(0px);
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

虽然动画是生效的，但是效果并不是很完美。动画里面的transform属性会干扰transform的原始值，这就是体现fit-content真正价值的时候了：

        .flex {
            border: 1px solid red;
            width: fit-content;
            height: fit-content;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            animation: oo linear 20s;
        }

        @keyframes oo {
            from {
                transform: translateY(200px);
            }

            to {
                transform: translateY(0px);
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22