不会 CSS 网格布局，你的网页可能会落伍！

友儿

发布于 2024-08-20 11:06:12

690

发布于 2024-08-20 11:06:12

文章被收录于专栏：友儿

涉及到的CSS 知识点详细分析

<!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 的效果。