理解CSS基于容器宽高的fit-content值

马黑黑

容器就是用来装载、组织子元素的元素。在dom里，我们已经知道了元素之间的层级关系，容器针对其子元素而言，它是父元素，但它自己也会有自己的父辈元素，除非它自己就是body——严格来讲，body是DOM的最高层父元素。

我们这里要讨论的，是普通的容器，例如，一个div元素，它里面有若干个子元素，那么，这个div就是一个普通的容器，它负责将其内的各子元素包裹起来，并带着它们呈现在dom的文档流中。具体而言，我们要讨论的具体内容，是作为容器的宽高尺寸的新定义：fit-content.

试看一下效果：

inner1

inner2

上述盒子集合，父盒子，即红色边框盒子，使用了 width 和 height 值都是 fitcontent 的宽高定义。让我们先观察父框的宽度，可以看得出来，它的宽度由最长的子元素的具体尺寸决定；在看看高度，是两个子元素高度的总和。当然，所有这些具体的尺寸，都可能将父子元素的padding（内边距）与margin（外边距）计算在内。

我再再来看子元素横向布局的情况：

inner1

inner2

在这个例子中，父框我们加入了 display: flex; 的弹性布局设计，flex布局之下，子元素默认横向排列，所以出现了以上的效果：父盒子的宽度由两个子元素的宽度累加而得（含父元素的padding、子元素的margin），而其高度，由子元素最高的那一个决定。

可以从本例所使用的CSS和HTML代码来加深对 fit-content 的理解：

<style>

.outer { margin: auto; padding: 10px; width: fit-content; height: fit-content; border: 1px solid red;}

.inner1 { margin: 10px;width: 300px; height: 150px; border: 1px dashed olive; }

.inner2 { margin: 10px; width: 400px; height: 100px; border: 1px dotted tan; }

</style>

<div class="outer">

<div class="inner1">inner1</div>

<div class="inner2">inner2</div>

</div>

<div class="outer" style="display: flex">

<div class="inner1">inner1</div>

<div class="inner2">inner2</div>

</div>

红影

记得为fit-content曾经咨询过黑黑，感谢黑黑。看了这个帖子，终于弄明白了它的自适应过程

红影

“当然，所有这些具体的尺寸，都可能将父子元素的padding（内边距）与margin（外边距）计算在内。”

这个倒没留意，不说还不知道也要考虑这些因素呢

红影

再回去看那个歌词毛玻璃的外框，比原来要理解得更清楚了

马黑黑

红影 发表于 2022-6-8 09:16
记得为fit-content曾经咨询过黑黑，感谢黑黑。看了这个帖子，终于弄明白了它的自适应过程

挺好的一个属性

马黑黑

红影 发表于 2022-6-8 09:18
“当然，所有这些具体的尺寸，都可能将父子元素的padding（内边距）与margin（外边距）计算在内。”

这 ...

这里面是默认的：如果有padding、margin，则会影响实际的宽高

马黑黑

红影 发表于 2022-6-8 09:21
再回去看那个歌词毛玻璃的外框，比原来要理解得更清楚了

马黑黑

红影 发表于 2022-6-8 09:18
“当然，所有这些具体的尺寸，都可能将父子元素的padding（内边距）与margin（外边距）计算在内。”

这 ...

例子中，如果不设置父框的padding，则子元素的边框会紧挨着父框的边框；如果不设置子元素的margin，则两个子元素会紧挨着左右或上下排列。

红影

马黑黑 发表于 2022-6-8 13:24
挺好的一个属性

很多代码在之前完全不知道，黑黑打开了一个新世界

红影

马黑黑 发表于 2022-6-8 13:27
这里面是默认的：如果有padding、margin，则会影响实际的宽高

嗯嗯，原来是算在一起的。

红影

马黑黑 发表于 2022-6-8 13:29
例子中，如果不设置父框的padding，则子元素的边框会紧挨着父框的边框；如果不设置子元素的margin，则两 ...

关于边框，记得黑黑专门开贴介绍过。现在已经有点忘了，再重温一下真好

马黑黑

红影 发表于 2022-6-8 16:21
关于边框，记得黑黑专门开贴介绍过。现在已经有点忘了，再重温一下真好

温故知新，知新温故

马黑黑

红影 发表于 2022-6-8 16:20
嗯嗯，原来是算在一起的。

默认情况下，是的

马黑黑

红影 发表于 2022-6-8 16:19
很多代码在之前完全不知道，黑黑打开了一个新世界

代码在那里，只是去不去探个究竟

红影

马黑黑 发表于 2022-6-8 19:09
温故知新，知新温故

是的，至少看到它们已经是熟面孔了

红影

马黑黑 发表于 2022-6-8 19:09
默认情况下，是的

嗯嗯，知道了

红影

马黑黑 发表于 2022-6-8 19:09
代码在那里，只是去不去探个究竟

之前从来没关注过呀

马黑黑

红影 发表于 2022-6-8 23:04
之前从来没关注过呀

我也觉得奇怪呢，弄这么个大论坛不碰代码

马黑黑

红影 发表于 2022-6-8 23:04
嗯嗯，知道了

CSS水很深的

马黑黑

红影 发表于 2022-6-8 23:04
是的，至少看到它们已经是熟面孔了

混个脸熟的说