Notes

day05

<style>
	* {
	    margin: 0;
	    padding: 0;
	    box-sizing: border-box;
	}
	li {
		list-style: none;
	}
</style>

代码片段 1	代码片段 2
`<img><div>`	`<img style="display:block;"><div>`

网页 1 中，img 与 div 之间多出一小段垂直距离
由于 <img> 元素默认是内联元素（inline），而 <div> 元素是块级元素（block），内联元素遵循文本流，会受到文字间距等影响，因此在默认情况下，即使 <img> 和 <div> 都各占一行，它们之间可能会存在一些默认间距或对齐方式上的差异，导致看起来有一小段垂直距离

讨论 Flex 布局中，主轴为水平方向的情况。以 <p> 为例进行说明，并假设元素宽度未设置。

一般的块级元素会继承父级宽度，高度由子级撑开。因此，对于非弹性布局，即使 <p> 中的内容很短，它仍然占满父级宽度。

当块级元素作为弹性盒子时，并假设没有其他特定的 flex 属性 ( 如 flex-grow, flex-shrink, flex-basis ) 设置时，块级元素的宽度会由其内容决定，但它不会超出其父容器的宽度。

考虑如下 Flex 布局：

<style>
	div.flex-div {
		display: flex;
		width: 200px;
	}
</style>
<body>
	<div class="flex-div">
		<p>这是一些文本</p>
	</div>
</body>

则 <p> 的宽度随内容量增加而逐渐变大，最终达到弹性容器宽度。此后，由 <p> 的换行行为，文本将从第二行开始显示。

在 Flex 布局中，宽度设置是传递的，即无论经过多少层元素，其宽度始终由内层元素决定，并确保最外层弹性盒子宽度始终不超过弹性容器宽度。

注意，虽然 <p> 会自动换行，但文本仍可能溢出^[1]。

弹性容器的布局规则覆盖了标准的块级布局行为，因此相邻的 flex-container 或 flex-item，以及它们之间，并不会发生垂直外边距合并。flex-container 与相邻的常规块级元素也不会发生合并。

必要时，应通过 justify-content、align-items 等属性控制 flex-item 之间的空间。

需注意的是，如果 flex-item 内部仍包含嵌套的块级元素，这些元素的外边距合并行为将遵循标准的 BFC 规则。