css：flex和float margin布局

时间：2020-06-07 10:59:54 阅读：64 评论：0 收藏：0 [点我收藏+]

标签：ade nta header ack 宽高 pre nbsp block idt

一、flex布局

顶部，底部固定，中间自适应(中间左固定，右自适应)。

<body>
    <div class="container">
        <div class="header"></div>
        <div class="content">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .container {
        height: 100%;
        background-color: yellow;
        display: flex;
        flex-direction: column;
    }

    .header {
        height: 80px;
        background-color: red;
    }

    .content {
        flex: 1;
        display: flex;
        background-color: green;
    }

    .left {
        width: 200px;
        background-color: hotpink;
    }

    .right {
        flex: 1;
        background-color: yellow;
    }

    .footer {
        height: 80px;
        background-color: blue;
    }
</style>

三栏平均分布局（两边可以定框）

<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .container {
        height: 100%;
        background-color: yellow;
        display: flex;
    }

    .left {
        flex: 1;
        background-color: red;
    }

    .middle {
        flex: 1;
        background-color: green;
    }

    .right {
        flex: 1;
        background-color: blue;
    }
</style>

二、float + margin

两栏布局

宽高实际需要，不设置高度，通过子元素自动撑起。

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
<style>
    html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    .container {
        height: 100%;
        background-color: yellow;
    }
    .left {
        float: left;
        width: 200px;
        height: 100%;
        background-color: red;
    }
    .right {
        margin-left: 200px;
        height: 100%;
        background-color: green;
    }
    .container::after{
        content: ‘‘;
        display: block;
        clear: both;
    }
</style>

/* 不需要清除浮动也可以 */

两边固定中间自适应

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
    </div>
</body>
<style>
    html, body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    .container {
        height: 100%;
        background-color: yellow;
    }
    .left {
        float: left;
        width: 200px;
        height: 100%;
        background-color: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 100%;
        background-color: green;
    }

    .middle {
        margin-left: 200px;
        margin-right: 200px;
        height: 100%;
        background-color: blue;
    }
    
</style>

因为排在后面的浮动元素会把前面的块级元素的位置空出来，所以这里右边的浮动元素把上面的位置空了下来，所以元素排序为：

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
    </div>
</body>

css：flex和float margin布局

标签：ade nta header ack 宽高 pre nbsp block idt

原文地址：https://www.cnblogs.com/Nyan-Workflow-FC/p/13059028.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

css：flex和float margin布局

一、flex布局

顶部，底部固定，中间自适应(中间左固定，右自适应)。

三栏平均分布局（两边可以定框）

二、float + margin

两栏布局

两边固定中间自适应