css 记忆

1. img允许图片溢出，但必须填充整个盒子，不允许变形

HTML代码：

<div class="image-container">
  <img src="example.jpg" alt="example" />
</div>
CSS代码：


.image-container {
  width: 200px;
  height: 200px;
  overflow: visible;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

2.Flexbox 布局实现多个小盒子在大盒子垂直均匀放置

。实现步骤如下：

1. 创建一个大的容器盒子，并设置其为 Flex 容器：

<div class="container">
  <!-- 小盒子 -->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<style>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 300px; /* 设置大盒子的高度 */
  }
</style>

2. 创建多个小盒子，在大盒子中垂直均匀放置。设置大盒子的高度，并给它的 flex-direction 属性设置为 column，表示垂直方向排列。然后，设置大盒子的 justify-content 属性为 space-between，表示在大盒子中均匀地间隔放置小盒子。

3. 对于小盒子的样式，你可以按照你的需求进行设置。可以设置单个小盒子的高度和宽度，也可以使用 flex 属性进行自适应布局。

.box {
  height: 50px;
  width: 50px;
  background-color: #f0f0f0;
}
/* 或者使用 flex 属性自适应布局 */
.box {
  flex: 1;
  background-color: #f0f0f0;
}