-
min-content
—— 意为 收缩至最小,在古老的表格布局中会出现(擎天柱的效果)。 -
max-content
—— 意为 超出容器限制。
[](()fill-avaliable
它是 width:auto
的一种表现,主要体现在块级元素的流动性上,何谓流动性?可以这么理解:流动,就像水流一样,可以想象往一个容器中注入水的效果,水面一定是水平平铺在一个水平面上的,并且充满了这个水平面,这就是水的流动性。
块级元素的流动性,就是尽可能多的占有父级容器的空间,默认情况下,它会充满整个父级元素(100%),也就是为什么将块级元素的特征总结为:独占一行。
[](()shrink-to-fit
shrink-to-fit
也是 width:auto
的一种表现,意为收缩到合适,典型的代表是浮动元素,绝对定位元素,弹性盒子,inl **《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】** ine-block
元素。
一旦开启了浮动,绝对定位,弹性盒子(flex
)之中的任意一项,元素的宽度就会表现为 shrink-to-fit
,从而,这也就解释了为什么开启浮动后块级元素不再独占一行,因为块级元素的流动性被破坏了,块级元素由原来的 fill-avaliable
变成了 shrink-to-fit
。绝对定位和弹性布局也是同样的道理。
此时的元素宽度由子元素撑开,父级元素会包裹着子元素,这种现象也被称为元素的包裹性。
[](()min-content
可以理解为 “首选最小宽度”,意思是元素最适合的最小宽度。为了不让图文在 width:auto
时宽度变成0