理解CSS基于容器宽高的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>
<p>容器就是用来装载、组织子元素的元素。在dom里，我们已经知道了元素之间的层级关系，容器针对其子元素而言，它是父元素，但它自己也会有自己的父辈元素，除非它自己就是body——严格来讲，body是DOM的最高层父元素。<br><br>我们这里要讨论的，是普通的容器，例如，一个div元素，它里面有若干个子元素，那么，这个div就是一个普通的容器，它负责将其内的各子元素包裹起来，并带着它们呈现在dom的文档流中。具体而言，我们要讨论的具体内容，是作为容器的宽高尺寸的新定义：fit-content.<br><br>试看一下效果：<br><br></p>
<div class="outer">
<div class="inner1">inner1</div>
<div class="inner2">inner2</div>
</div>
<p><br>上述盒子集合，父盒子，即红色边框盒子，使用了 width 和 height 值都是 fitcontent 的宽高定义。让我们先观察父框的宽度，可以看得出来，它的宽度由最长的子元素的具体尺寸决定；在看看高度，是两个子元素高度的总和。当然，所有这些具体的尺寸，都可能将父子元素的padding（内边距）与margin（外边距）计算在内。</p><p><br></p><p>我再再来看子元素横向布局的情况：<br><br></p>
<div class="outer" style="display: flex">
<div class="inner1">inner1</div>
<div class="inner2">inner2</div>
</div>
<p><br>在这个例子中，父框我们加入了 display: flex; 的弹性布局设计，flex布局之下，子元素默认横向排列，所以出现了以上的效果：父盒子的宽度由两个子元素的宽度累加而得（含父元素的padding、子元素的margin），而其高度，由子元素最高的那一个决定。</p><p><br></p><p>可以从本例所使用的CSS和HTML代码来加深对 fit-content 的理解：</p><p><br></p><p><style></p><p>.outer { margin: auto; padding: 10px; width: fit-content; height: fit-content; border: 1px solid red;}</p><p>.inner1 { margin: 10px;width: 300px; height: 150px; border: 1px dashed olive; }</p><p>.inner2 { margin: 10px; width: 400px; height: 100px; border: 1px dotted tan; }</p><p></style></p><p><br></p><p><div class="outer"></p><p><span style="white-space:pre"> </span><div class="inner1">inner1</div></p><p><span style="white-space:pre"> </span><div class="inner2">inner2</div></p><p></div></p><p><br></p><p><div class="outer" style="display: flex"></p><p><span style="white-space: pre;"> </span><div class="inner1">inner1</div></p><p><span style="white-space: pre;"> </span><div class="inner2">inner2</div></p><p></div></p> 记得为fit-content曾经咨询过黑黑，感谢黑黑。看了这个帖子，终于弄明白了它的自适应过程{:4_187:} “当然，所有这些具体的尺寸，都可能将父子元素的padding（内边距）与margin（外边距）计算在内。”
这个倒没留意，不说还不知道也要考虑这些因素呢{:4_187:} 再回去看那个歌词毛玻璃的外框，比原来要理解得更清楚了{:4_187:} 红影 发表于 2022-6-8 09:16
记得为fit-content曾经咨询过黑黑，感谢黑黑。看了这个帖子，终于弄明白了它的自适应过程
挺好的一个属性 红影 发表于 2022-6-8 09:18
“当然，所有这些具体的尺寸，都可能将父子元素的padding（内边距）与margin（外边距）计算在内。”
这 ...
这里面是默认的：如果有padding、margin，则会影响实际的宽高 红影 发表于 2022-6-8 09:21
再回去看那个歌词毛玻璃的外框，比原来要理解得更清楚了
{:4_190:} 红影 发表于 2022-6-8 09:18
“当然，所有这些具体的尺寸，都可能将父子元素的padding（内边距）与margin（外边距）计算在内。”
这 ...
例子中，如果不设置父框的padding，则子元素的边框会紧挨着父框的边框；如果不设置子元素的margin，则两个子元素会紧挨着左右或上下排列。
马黑黑 发表于 2022-6-8 13:24
挺好的一个属性
很多代码在之前完全不知道，黑黑打开了一个新世界{:4_187:} 马黑黑 发表于 2022-6-8 13:27
这里面是默认的：如果有padding、margin，则会影响实际的宽高
嗯嗯，原来是算在一起的。 马黑黑 发表于 2022-6-8 13:29
例子中，如果不设置父框的padding，则子元素的边框会紧挨着父框的边框；如果不设置子元素的margin，则两 ...
关于边框，记得黑黑专门开贴介绍过。现在已经有点忘了，再重温一下真好{:4_173:} 红影 发表于 2022-6-8 16:21
关于边框，记得黑黑专门开贴介绍过。现在已经有点忘了，再重温一下真好
温故知新，知新温故 红影 发表于 2022-6-8 16:20
嗯嗯，原来是算在一起的。
默认情况下，是的 红影 发表于 2022-6-8 16:19
很多代码在之前完全不知道，黑黑打开了一个新世界
代码在那里，只是去不去探个究竟 马黑黑 发表于 2022-6-8 19:09
温故知新，知新温故
是的，至少看到它们已经是熟面孔了{:4_173:} 马黑黑 发表于 2022-6-8 19:09
默认情况下，是的
嗯嗯，知道了{:4_204:} 马黑黑 发表于 2022-6-8 19:09
代码在那里，只是去不去探个究竟
之前从来没关注过呀{:4_173:} 红影 发表于 2022-6-8 23:04
之前从来没关注过呀
我也觉得奇怪呢，弄这么个大论坛不碰代码 红影 发表于 2022-6-8 23:04
嗯嗯，知道了
CSS水很深的 红影 发表于 2022-6-8 23:04
是的，至少看到它们已经是熟面孔了
混个脸熟的说