css基本功

为什么 ::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填充了行的空白

相关推荐
qq_3325394513 分钟前
React 前端框架推荐
前端·react.js·前端框架
拉不动的猪31 分钟前
刷刷题34(uniapp中级实际项目问题-1)
前端·vue.js·面试
奔跑的露西ly1 小时前
【HarmonyOS NEXT】实现文字环绕动态文本效果
前端·javascript·html·harmonyos
irving同学462383 小时前
Next.js 组件开发最佳实践文档(TypeScript 版)
前端
刺客-Andy3 小时前
React Vue 项开发中组件封装原则及注意事项
前端·vue.js·react.js
marzdata_lily3 小时前
从零到上线!7天搭建高并发体育比分网站全记录(附Java+Vue开源代码)
前端·后端
小君3 小时前
让 Cursor 更加聪明
前端·人工智能·后端
顾林海3 小时前
Flutter Dart 异常处理全面解析
android·前端·flutter
残轩3 小时前
JavaScript/TypeScript异步任务并发实用指南
前端·javascript·typescript
用户88442839014253 小时前
xterm + socket.io 实现 Web Terminal
前端