CSS 中的 width & height 属性
inline-block 元素的子元素 设置了width + 百分比max-width，视觉上max-width起作用（先计算width属性），空间上不会起作用
// width height 百分比在不是绝对定位的情况下是相对于容器的 content-box
fill-available, max-content, min-content, 以及 fit-content
// display: block; width: -moz-fit-content; 可以直接使用display: table; 替换（换行，自动宽度）
- 方便某些布局的实现；
- 在原有的display水平不变的情况下拥有元素其他display值才有的特性！
- 让整个CSS世界的size体系更加直观和完善；
- 具有了width/height值（例如flex-grow不能抢占它的空间，子元素height使用百分比【？，现在就算chrome也没有效果，而width百分比值总是基于父元素的content-box】）
fill-available 关键字值的价值在于，我们可以让元素的100%自动填充特性不仅仅在 block 水平元素上，其他元素，例如，我们一直认为的包裹收缩的 inline-block 元素上，此时，元素兼具了块状元素的自动填充特性以及内联元素的定位对齐等特性。于是，（例如）我们就可以直接使用 line-height 让一个块状表现的元素垂直居中。
max-content的行为表现可以这么理解，假设我们的容器有足够的宽度，足够的空间，此时，所占据的宽度是就是max-content所表示的尺寸。
min-content宽度表示的并不是内部那个宽度小就是那个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。首先，我们要明白这里的"最小宽度值"是什么意思。替换元素，例如图片的最小宽度值就是图片呈现的宽度，对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以，最小宽度可能就是里面最长的英文单词的宽度。
width:fit-content也是应该比较好理解的，"shrink-to-fit"表现，换句话说，和CSS2.1中的float, absolute, inline-block的尺寸收缩表现是一样的，也就是说css3中block元素也可以有这种表现，于是，就可以直接使用margin:auto实现元素宽度自适应同时相对于父元素居中效果了。
CSS中的元素尺寸分为两类，一类叫做"内部尺寸"，英文写作"Intrinsic Sizing"，尺寸由内部元素决定；还有一类叫做"外部尺寸"，英文写作"Extrinsic Sizing"，宽度由外部元素决定。fill-available（外）, max-content（内）, min-content（内）, fit-content（内）
border-box
content-box
// 这两个难道是值子元素的百分比是相对于这些盒子了？
height 也有这几个，Firefox下没有生效，chrome会把margin单独算，所以跟width表现不一
height 坑：
- 100vh 是指初始 viewport 高度，移动端 chrome 和 Safari url 隐藏不会变化
- 100% 高度的 table 高度改变 chrome 不重新排版。