css布局的五种方法

css布局的五种方法

1.float布局

<section class="float">
		//页面样式
        <style>
            .left-right-center > div{
                height: 100px;
            }
            .left{
                float:left;
                width: 300px;
                background: pink;
            }
            .right{
                float:right;
                width: 300px;
                background: skyblue;
            }
            .center{
                background: brown;
            }
        </style>
        //页面结构
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center"></div>
        </article>
    </section>

2.position布局

<section class="position">
		//页面样式
        <style>
            .left-center-right > div{
                position: absolute;
                height: 100px;
            }
            .left{
                left: 0;
                width: 300px;
                background: pink;
            }
            .center{
                left:300px;
                right: 300px;
                background: brown;
            }
            .right{
                right: 0;
                width: 300px;
                background: skyblue;
            }
        </style>
        //页面结构
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </article>
    </section>

3.flex布局

<section class="flex">
		//页面样式
        <style>
            .left-center-right{
                display: flex;
                height: 100px;
            }
            .left{
                flex-basis: 300px;
                background: pink;
            }
            .center{
                flex:1;
                background: brown;
            }
            .right{
                flex-basis: 300px;
                background: skyblue;
            }
        </style>
        //页面结构
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </article>
    </section>

4.table布局

<section class="table">
		//页面样式
        <style>
            .left-center-right{
                height: 100px;
                width: 100%;
                display: table;
            }
            .left-center-right > div{
                display: table-cell;
            }
            .left{
                width: 300px;
                background: pink;
            }
            .center{
                background: brown;
            }
            .right{
                width: 300px;
                background: skyblue;
            }
        </style>
        //页面结构
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </article>
    </section>

5.grid布局

<section class="grid">
		//页面样式
        <style>
            .left-center-right{
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }
            .left{
                background:pink;
            }
            .center{
                background: brown;
            }
            .right{
                background:skyblue;
            }
        </style>
        //页面结构
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </article>
    </section>