涉及到的CSS 知识点详细分析
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网格布局</title>
</head>
<style>
.container {
width: 500px;
height: 500px;
display: grid;
margin: 100px auto 0;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-template:
'A A B'
'C D B'
'C E E';
}
.item {
border: 1px solid #000;
overflow: hidden;
}
.item img {
width: 335px;
height: 335px;
object-fit: cover;
animation: rotation 10s infinite linear reverse;
}
.item:nth-child(1) {
grid-area: A;
}
.item:nth-child(2) {
grid-area: B;
}
.item:nth-child(3) {
grid-area: C;
}
.item:nth-child(4) {
grid-area: D;
}
.item:nth-child(5) {
grid-area: E;
}
.container {
animation: rotation 10s infinite linear;
}
@keyframes rotation {
to {
transform: rotate(360deg);
}
}
</style>
<body>
<div class="container">
<div class="item"><img src="./img2/1.jpg"></div>
<div class="item"><img src="./img2/2.jpg"></div>
<div class="item"><img src="./img2/3.jpg"></div>
<div class="item"><img src="./img2/4.jpg"></div>
<div class="item"><img src="./img2/5.jpg"></div>
</div>
</body>
</html>
一、网格布局（Grid Layout）
display: grid;：将容器声明为网格布局容器。display属性用于指定元素的显示方式。除了grid之外，常见的还有以下几种值：block：块级元素，会独占一行，前后会有换行。常见的块级元素有<div>、<p>、<h1>等。inline：行内元素，不会独占一行，宽度和高度由内容决定。常见的行内元素有<span>、<a>等。inline-block：行内块元素，结合了行内元素和块级元素的特点，可以设置宽度、高度、外边距等，同时不会独占一行。none：隐藏元素，使其在页面上不显示。
grid-template-rows: repeat(3, 1fr);：定义了网格的三行，每行的高度按比例分配，1fr表示一份可用空间。grid-template-columns: repeat(3, 1fr);：定义了网格的三列，每列的宽度按比例分配。grid-template: "A A B" "C D B" "C E E";：通过字符串直观地定义网格区域的名称和布局。
二、选择器（Selectors）
nth-child(n)：选择父元素中的第n个子元素。例如，.item:nth-child(1)选择了第一个.item元素。
三、溢出处理（Overflow Handling）
overflow: hidden;：当元素的内容超出其边界时，隐藏溢出的部分。
四、图片适配（Image Fit）
object-fit: cover;：确保图片在保持其宽高比的同时，完全覆盖给定的空间。如果图片的比例与容器的比例不同，图片可能会被裁剪。object-fit的其他常见值：fill：拉伸内容以填充容器，可能会导致内容变形。contain：保持内容的宽高比例，将内容完整显示在容器内，可能会在容器内留下空白。none：保持内容的原始尺寸。
五、动画（Animation）
animation: rotation 10s infinite linear reverse;：为元素应用名为rotation的动画，持续时间为 10 秒，无限循环，线性的动画速度曲线，并反向播放。animation的完整参数形式：animation: name duration timing-function delay iteration-count direction fill-mode;name：指定要应用的动画名称。duration：动画的持续时间，除了示例中的以秒（s）为单位，还可以以毫秒（ms）为单位，如500ms。timing-function：动画的速度曲线，常见的值有：linear：匀速。ease：默认值，逐渐慢下来。ease-in：加速。ease-out：减速。ease-in-out：先加速后减速。
delay：动画延迟开始的时间，单位同持续时间。iteration-count：动画的循环次数，常见的值有：infinite：无限循环。- 具体的数字，如
2表示循环 2 次。
direction：动画的播放方向，常见的值有：normal：默认值，正向播放。reverse：反向播放。alternate：交替播放，先正向再反向。alternate-reverse：交替播放，先反向再正向。
fill-mode：规定动画在执行前后的状态，常见的值有：none：默认值，动画结束后，元素回到初始状态。forwards：动画结束后，元素保持动画结束时的最后一帧的状态。backwards：在动画延迟期间，元素应用动画的第一帧。both：结合了forwards和backwards的效果。
六、容器动画
container { animation: rotation 10s infinite linear; }：为.container元素应用了与图片相同但不反向的旋转动画。
