一些常见的css参数

background-size

详解





注：background-size: contain;属性只会调整背景图片的大小，不会影响其他元素的布局和位置。它会根据容器的大小自动调整背景图片的比例，使其完整地包含在容器内，但不会改变其他元素的位置或大小。其他元素仍将按照其正常的布局规则进行排列。

flex布局

display: flex;属性将容器设置为弹性布局，以下是它的作用和常用的子属性：

作用：

将容器内的子元素变为弹性项目，可以更灵活地调整它们的位置和大小。
改变子元素的默认排列方式，可以设置为水平排列或垂直排列，或者同时兼具两者。
常用的子属性：

flex-direction: 设置子元素的排列方向，可以为row（水平方向，默认值）、column（垂直方向）、row-reverse（反向水平方向）或column-reverse（反向垂直方向）。
justify-content: 设置子元素在主轴（水平轴）上的对齐方式，可以为flex-start（靠左对齐，默认值）、flex-end（靠右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）或space-around（每个项目两侧的间隔相等）。

justify-content: space-between;和justify-content: space-around;都是用于设置子元素在主轴上的对齐方式，它们的区别在于项目之间的间隔。
space-between：两端对齐，项目之间的间隔相等。这意味着第一个项目与容器的起始位置对齐，最后一个项目与容器的结束位置对齐，而剩余的项目之间的间隔是均等分布的。
space-around：每个项目两侧的间隔相等。这意味着每个项目周围的间隔是均等分布的，包括第一个项目和最后一个项目与容器边缘之间的间隔

align-items: 设置子元素在交叉轴（垂直轴）上的对齐方式，可以为flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、baseline（基线对齐）或stretch（拉伸填充，默认值）。
flex-wrap: 设置子元素是否换行，可以为nowrap（不换行，默认值）、wrap（换行）或wrap-reverse（反向换行）。
使用了flex布局后，仍然可以使用绝对定位来对子元素进行定位。flex布局只会改变子元素在弹性容器内的排列方式，并不会影响子元素使用绝对定位的能力。你可以在使用flex布局的同时，通过设置子元素的position: absolute;来对其进行绝对定位。

flex-wrap属性用于设置子元素是否换行，它有以下几个选项：

nowrap：默认值，子元素不换行，将尽量在一行内排列。

wrap：子元素换行，当容器宽度不足以放下所有子元素时，会自动将溢出的子元素放到下一行。

wrap-reverse：子元素反向换行，与wrap类似，但是子元素从下一行开始排列。

使用flex-wrap属性可以控制弹性容器内的子元素如何在主轴上进行换行布局。它的使用情景主要包括以下几种：

1. 当弹性容器的宽度不足以容纳所有子元素时，可以使用flex-wrap: wrap;来让子元素进行自动换行，以避免溢出或压缩子元素。

2. 在响应式设计中，当容器的宽度发生变化时，可以根据需要使用flex-wrap属性来调整子元素的布局，以适应不同的屏幕尺寸。

3. 在使用弹性容器进行网格布局时，可以使用flex-wrap属性来实现自适应的网格布局，根据容器宽度的变化，自动调整子元素的排列和数量。

overflow: hidden

overflow: hidden;属性通常用于以下情境：

1. **容器内有溢出内容：**当一个容器内的内容超出容器的大小时，可以使用overflow: hidden;来隐藏超出容器部分的内容，以保持容器的整洁和美观。

2. **清除浮动：**当使用浮动元素进行布局时，可能会导致容器的高度无法自动撑开，此时可以在容器上应用overflow: hidden;，使其能够包含浮动元素并正常显示。

3. **防止文本溢出：**当容器内有文本内容超出容器的宽度时，可以使用overflow: hidden;来隐藏文本的溢出部分，以保持容器的显示效果。

object-fit: fill;在什么时候生效

object-fit: fill;属性指定了当容器尺寸与其内部的图像或视频的尺寸不匹配时，应如何调整该元素的尺寸。它的生效情况主要取决于两个方面：

元素的内容类型：object-fit属性通常用于调整、等元素的尺寸和表现方式。对于其他类型的元素，如文本或普通的HTML元素，object-fit属性不会生效。

元素的尺寸和容器的尺寸：object-fit属性只在容器的尺寸和元素的尺寸之间存在差异时才会生效。如果容器和元素的尺寸相匹配，object-fit属性将不会产生任何效果。

举一个例子，假设有一个图片元素和一个包含该元素的容器：

<div class="container">
  <img src="image.jpg" alt="Image">
</div>

在CSS中，应用object-fit: fill;属性：

.container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

在这个示例中，容器的尺寸为200px × 200px，而图像的原始尺寸与容器的尺寸不匹配。通过应用object-fit: fill;属性，图像将会被拉伸或压缩以填充整个容器。如果容器和图像的尺寸相匹配，object-fit: fill;属性将没有任何效果。

需要注意的是，object-fit属性的兼容性并不完全一致，特别是在旧版本的浏览器中。在使用此属性时，建议测试并确保所需的效果在目标浏览器中得到正确支持。