css 布局和排版

本文深入探讨CSS Grid布局的特性与应用,对比Flex布局,详细解析Grid的二维布局优势及其实现方式,通过实例演示如何利用Grid创建复杂网页布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天看了有关css的文章,虽然现在用css经常用,但有些东西还是值的自己记录下的,这里简单列举下;这里讲rid是二维布局。意思就是Flex只能同时在一个方向进行作用,而Grid却可以在纵横两个方向同时工作。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>布局与排版</title>
    <style>
        html,
        body,
        div {
            margin: 0;
            padding: 0;
        }

        /* 案例1 */

        .grid {
            display: grid;
            width: 420px;
            background: #e4d6ba;
            margin: 1em auto;
        }

        .g-namespace {
            height: 400px;
            grid-template-columns: [col1] 100px [col2] auto [col3] 100px;
            grid-template-rows: [rows1] 25% [rows2] 100px [rows3] auto [rows4] 60px
        }

        .grid>div {
            outline: 1px dotted;
        }

        /* 案例2 */

        .grid2 {
            display: grid;
            width: 400px;
            height: 400px;
            margin: 1em auto;
        }

        .g2-namespace {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: "头部 头部 头部" "左边 中间 右边" "底部 底部 底部";
        }

        .top {
            grid-area: 头部 / 头部 / 头部 / 头部;
            background: #32CD32;
        }

        .buttom {
            grid-area: 底部 / 底部 / 底部 / 底部;
            background: #FFD700;
        }

        .left {
            grid-area: 左边 / 左边 / 左边 / 左边;
            background: #EE82EE;
        }

        .right {
            grid-area: 右边 / 右边 / 右边 / 右边;
            background: #FF7F50;
        }
    </style>
</head>

<body>
    <!-- 1.flex布局 这个就不多说了,我们经常用 2.grid布局 在这里顺便提一下,Flex是一维布局,Grid是二维布局。意思就是Flex只能同时在一个方向进行作用,而Grid却可以在纵横两个方向同时工作。 语法如下 display: grid/inline-grid; -->
    <!-- gird: < 'grid-template'> |< 'grid-template-rows'> / [ auto-flow && dense? ] < 'grid-auto-columns'>? | [ auto-flow && dense? ] < 'grid-auto-rows'>? /< 'grid-template-columns'> -->
    <!-- 给两个案例就能清楚的知道grid的使用方法了 -->
    <!-- 案例 1   网格线命名-->
    <div class="grid g-namespace">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <!-- 案例2   真命名空间布局-->
    <div class="grid2 g2-namespace">
        <div class="top"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="buttom"></div>
    </div>

    <!-- 一些常用的灵活尺寸属性定义
fr:可伸缩长度单位,均分容器的宽度,网格容器中可用空间的一等份。
repeat():可以使用repeat()函数来标记轨道重复使用的部分,例如上面的样式就可以写成
auto:自由分配,由具体情况决定。
minmax():定义了一个长宽范围的闭区间。如果想让每行的高度随着内容自动填充,那么可以使用minmax()来确定最小值与最大值,
fit-content():同等于min(maximum size, max(minimum size, argument))。 -->
</body>

</html>

一个布局案例,

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>布局案例</title>
    <style>
        html,
        body,
        div,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .wrap {
            margin: 0 auto 30px auto;
            text-align: center;
            padding: 10px;
        }

        .content {
            display: grid;
        }

        .content>div {
            border: 1px solid currentColor;
            color: #FFF;
        }

        .fr-box {
            background: #32CD32;
        }

        .auto-box {
            background: #87CEEB;
        }

        .mc-box {
            background: #C0C0C0;
        }

        .width-box {
            background: #EE82EE;
        }

        .fc-box {
            background: #FF7F50;
        }

        .mm-box {
            background: #FFD700;
        }

        .list {
            display: flex;
            margin: 0 auto;
            padding: 10px;
        }

        .list>li {
            flex: 1;
            text-align: center;
            color: #FFF;
        }
    </style>
</head>

<body>
    <div>
        <ul class="list">
            <li class="fr-box">绿色:fr</li>
            <li class="auto-box">蓝色:auto</li>
            <li class="mc-box">灰色:max-content</li>
            <li class="width-box">粉红色:400px</li>
            <li class="fc-box">橙色:fit-content(200px)</li>
            <li class="mm-box">黄色:minmax(200px, 400px)</li>
        </ul>
    </div>
    <section class="wrap fr-auto">
        <div class="content" style="grid-template-columns: 1fr 2fr 1fr;">
            <div class="fr-box">这是个盒子</div>
            <div class="fr-box">这是个盒子</div>
            <div class="fr-box">这是个盒子</div>
        </div>
        <div class="content" style="grid-template-columns: auto auto auto;">
            <div class="auto-box">这是个盒子</div>
            <div class="auto-box">这是个盒子</div>
            <div class="auto-box">这是个盒子</div>
        </div>
        <div class="content" style="grid-template-columns: auto 1fr auto;">
            <div class="auto-box">这是个盒子</div>
            <div class="fr-box">这是个盒子</div>
            <div class="auto-box">这是个盒子</div>
        </div>
        <div class="content" style="grid-template-columns: 1fr auto 1fr;">
            <div class="fr-box">这是个盒子</div>
            <div class="auto-box">这是个盒子</div>
            <div class="fr-box">这是个盒子</div>
        </div>
    </section>

    <section class="wrap mc-width">
        <div class="content" style="grid-template-columns: 1fr max-content 400px;">
            <div class="fr-box">这是个盒子</div>
            <div class="mc-box">这是个盒子</div>
            <div class="width-box">这是个盒子</div>
        </div>
        <div class="content" style="grid-template-columns: fit-content(200px) minmax(200px, 400px) 400px;">
            <div class="fc-box">这是个盒子</div>
            <div class="mm-box">这是个盒子</div>
            <div class="width-box">这是个盒子</div>
        </div>
        <div class="content" style="grid-template-columns: fit-content(200px) max-content auto;">
            <div class="fc-box">这是个盒子</div>
            <div class="mc-box">这是个盒子</div>
            <div class="auto-box">这是个盒子</div>
        </div>
    </section>

    <section class="wrap fc-mm">
        <div class="content" style="grid-template-columns: 1fr auto fit-content(200px);">
            <div class="fr-box">这是个盒子</div>
            <div class="auto-box">这是个盒子</div>
            <div class="fc-box">这是个盒子</div>
        </div>
        <div class="content" style="grid-template-columns: fit-content(200px) minmax(200px, 400px) 400px;">
            <div class="fc-box">这是个盒子</div>
            <div class="mm-box">这是个盒子</div>
            <div class="width-box">这是个盒子</div>
        </div>
        <div class="content" style="grid-template-columns: 1fr auto minmax(200px, 400px);">
            <div class="fr-box">这是个盒子</div>
            <div class="auto-box">这是个盒子</div>
            <div class="mm-box">这是个盒子</div>
        </div>
    </section>
</body>

</html>

从中可以看出grid布局的一些属性特征,

如果要详情去学的话,可以自己去搜下学习,这里推荐一篇学习文章https://www.html.cn/archives/8510;里面写的很详细

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值