当前位置：首页 > article >正文

css基本功

article 2025/3/14 14:14:51

为什么 ::first-letter 是伪元素？

::first-letter 的作用是选择并样式化元素的第一个字母，它创建了一个虚拟的元素来包裹这个字母，因此属于伪元素。

grid布局

案例一

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>CSS Grid布局完全指南</title>
    <style>
        .code-example {
            background: #f4f4f4;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
        }

        .grid-visual {
            border: 2px solid #333;
            margin: 20px 0;
            padding: 10px;
        }

        .grid-item {
            background: #4CAF50;
            padding: 20px;
            border: 2px solid #fff;
            text-align: center;
            color: white;
        }
    </style>
</head>

<body>
    <section>
        <h2>实战示例</h2>
        <h3>基本网格布局</h3>
        <div class="grid-visual" style="
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
            ">
            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>
            <div class="grid-item">4</div>
            <div class="grid-item">5</div>
            <div class="grid-item">6</div>
        </div>
        <h3>复杂布局</h3>
        <div class="grid-visual" style="
                display: grid;
                grid-template-columns: 200px 1fr;
                grid-template-rows: 100px 1fr 50px;
                grid-template-areas:
                    'header header'// 同样是header 的格子会自动合并
                    'sidebar main'
                    'footer footer';
                height: 400px;
                gap: 15px;
            ">
            <div class="grid-item" style="grid-area: header">Header</div>
            <div class="grid-item" style="grid-area: sidebar">Sidebar</div>
            <div class="grid-item" style="grid-area: main">Main Content</div>
            <div class="grid-item" style="grid-area: footer">Footer</div>
        </div>
    </section>
</body>

</html>

在这里插入图片描述

案例二

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            /* 3列，每列100px */
            grid-template-rows: repeat(3, 100px);
            /* 3行，每行100px */
            gap: 10px;
            background: #eee;
            padding: 20px;
        }

        .item {
            background: #4CAF50;
            border: 2px solid #333;
            padding: 20px;
            font-family: Arial;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>

</html>

在这里插入图片描述

案例三

在案例二的基础上加上grid-area的效果，注意细品

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            /* 3列，每列100px */
            grid-template-rows: repeat(3, 100px);
            /* 3行，每行100px */
            gap: 10px;
            background: #eee;
            padding: 20px;
        }

        .item {
            background: #4CAF50;
            border: 2px solid #333;
            padding: 20px;
            font-family: Arial;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .item1 {
            grid-column: 1 / 3;/* 列从第1线到第3线（占据第1、2列） */
            /* 列范围 */
            grid-row: 1 / 2;/* 行从第1线到第2线（占据第1行） */
            /* 行范围 */
            background: #2196F3;
        }

        .item2 {
            grid-area: 2 / 2 / 4 / 4; /* 行开始/列开始/行结束/列结束 */
            /* 简写语法 */
            background: #FF5722;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>

</html>

在这里插入图片描述

案例四

注意grid-auto-flow: row dense;这行的作用

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(2, 100px);
            /* 显式列：2列 */
            grid-template-rows: repeat(1, 50px);
            /* 显式行：1行 */
            grid-auto-columns: 100px;
            /* 隐式列宽度 */
            grid-auto-rows: 50px;
            /* 隐式行高度 */
            grid-auto-flow: row dense;
            /* 自动排列方式 */
            gap: 10px;
            background: #eee;
            padding: 20px;
        }

        .item {
            background: #4CAF50;
            padding: 20px;
            border: 2px solid #333;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 特殊项目样式 */
        .item.wide {
            grid-column: span 2;
        }

        /* 横跨2列 */
        .item.tall {
            grid-row: span 2;
        }

        /* 竖跨2行 */
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item wide">2（跨2列）</div>
        <div class="item">3</div>
        <div class="item tall">4（跨2行）</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>

</html>

在这里插入图片描述
如果没有grid-auto-flow: row dense;，是以下效果

row dense填充了行的空白