CSS布局

最新推荐文章于 2024-09-24 15:55:35 发布

我是小飞侠

最新推荐文章于 2024-09-24 15:55:35 发布

阅读量86

点赞数

分类专栏： css布局文章标签： css

本文链接：https://blog.csdn.net/qq_41358175/article/details/105795372

版权

css布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS布局(浮动布局、绝对定位、flexBox、table-cell、grid网格布局)

有这么个题目：
在这里插入图片描述

实现的效果：
在这里插入图片描述
拉伸后还是能自适应

代码

代码片.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>layout</title>
        <style media="screen">
            html *{
                padding: 0;
                margin: 0;
            }
            .layout article div{
                height: 100px;
            }
            .layout{
                margin-top: 20px;
            }
        </style>
    </head>
    <body>

        <setion class="layout float">
            <style>
                .layout.float .left{
                    float:left;
                    width: 300px;
                    background: red;
                }
                .layout.float .center{
                    background: yellow;
                }
                .layout.float .right{
                    float: right;
                    width: 300px;
                    background: blue;
                }
            </style>
            <article class="left-center-right">
                <div class="left"></div>
                <div class="right"></div>
                <div class="center">
                    <h1>浮动中间部分</h1>
                </div>
            </article>
        </setion>

        <section class="layout absolute">
            <style>
                .layout.absolute div{
                    position: absolute;
                }
                .layout.absolute .left{
                    left:0;
                    background: red;
                    width: 300px;
                }
                .layout.absolute .center{
                    left:300px;
                    right:300px;
                    background: yellow;
                }
                .layout.absolute .right{
                    right: 0;
                    background: blue;
                    width: 300px;
                }
            </style>
            <article class="left-center-right">
                <div class="left"></div>
                <div class="center">
                    <h1>绝对定位中间部分</h1>
                </div>
                <div class="right"></div>
            </article>
        </section>

        <section class="layout flex">
            <style>
                .layout.flex .left-center-right{
                    margin-top: 140px;
                    display: flex;
                }
                .layout.flex .left{
                    background: red;
                    width: 300px;
                }
                .layout.flex .center{
                    flex:1;
                    background: yellow;
                }
                .layout.flex .right{
                    background: blue;
                    width: 300px;
                }
            </style>
            <article class="left-center-right">
                <div class="left"></div>
                <div class="center">
                    <h1>flexBox中间部分</h1>
                </div>
                <div class="right"></div>
            </article>
        </section>


        <section class="layout table-cell">
            <style>
                .layout.table-cell .left-center-right{
                    width: 100%;
                    display: table;
                    height: 100px;
                }
                .layout.table-cell .left-center-right>div{
                    display: table-cell;
                }
                .layout.table-cell .left{
                    background: red;
                    width: 300px;
                }
                .layout.table-cell .center{
                    background: yellow;
                }
                .layout.table-cell .right{
                    background: blue;
                    width: 300px;
                }
            </style>
            <article class="left-center-right">
                <div class="left"></div>
                <div class="center">
                    <h1>table-cell中间部分</h1>
                </div>
                <div class="right"></div>
            </article>
        </section>


        <section class="layout grid">
            <style>
                .layout.grid .left-center-right{
                    width: 100%;
                    display: grid;
                    grid-template-rows: 100px;
                    grid-template-columns: 300px auto 300px;
                }

                .layout.grid .left{
                    background: red;
                }
                .layout.grid .center{
                    background: yellow;
                }
                .layout.grid .right{
                    background: blue;
                }
            </style>
            <article class="left-center-right">
                <div class="left"></div>
                <div class="center">
                    <h1>grid中间部分</h1>
                </div>
                <div class="right"></div>
            </article>
        </section>


    </body>
</html>