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

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填充了行的空白


http://www.kler.cn/a/584227.html

相关文章:

  • 手写svm primal form形式
  • kafka连问
  • 华为重拳出击!华为重拳出击!华为重拳出击!
  • Postman下载安装及简单入门
  • unity基础——地面(Physic Material)
  • 53. HarmonyOS NEXT 登录模块开发教程(七):性能优化与最佳实践
  • QT信号与槽:实现方法、技术细节、高级用法和底层机制
  • 蓝桥杯备赛-入门训练题 day1
  • 限流及熔断的场景?
  • MinIO问题总结(持续更新)
  • 游戏引擎学习第155天
  • 【医院绩效管理专题】8.医院绩效数据的收集与整理方法:洞察现状,引领未来
  • arcgis 切片分析录入mongodb
  • Linux安装Redis、远程连接Redis
  • cyberstrikelab lab2
  • 【大模型基础_毛玉仁】2.3 基于 Encoder-only 架构的大语言模型
  • Springboot 实用技巧 查缺补漏
  • 如何打造TikTok矩阵:多账号管理与内容引流的高效策略
  • HTTP 协议中常见的错误状态码(详细介绍)
  • 【C++】每日一练(有效的括号)