css网页布局的方式

前言：这篇文章适合刚刚接触前端的小白，大神勿见笑：

1、单列布局

html:

    <div class="top"></div>
    <div class="main"></div>
    <div class="foot"></div>

css:

     *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 100px;
            background: blue;
        }
        .main{
            width: 800px;
            height: 300px;
            background: #ccc;
            margin: 0 auto;
        }
        .foot{
            width: 800px;
            height: 100px;
            background: #900;
            margin: 0 auto;
        }

2、双列布局

html:

   <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>

css:

      *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 800px;
            margin: 0 auto;
            overflow: hidden;
        }
        .left{
            float: left;
            width: 20%;
            height: 500px;
            background: #ccc;
        }
        .right{
            float: right;
            width: 80%;
            height: 500px;
            background: #ddd;
        }

3、三列布局(这是左右两边定宽，中间实现自适应的布局)

html:

<div class="left"></div>
    <div class="middle">我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。我们实现了左右两边定宽，中间自适应。</div>
    <div class="right"></div>

css:

       *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            height: 500px;
            background: #ccc;
            position: absolute;
            top: 0;
            left: 0;
        }
        .middle{
            height: 500px;
            background: #999;
            margin: 0 310px 0 210px;
            color: #fff;
        }
        .right{
            width: 300px;
            height: 500px;
            background: #ddd;
            position: absolute;
            top: 0;
            right: 0;
        }

这就实现了左右定宽，中间自适应的布局，附图：

4、混合布局：

讲了这么单列，双列，三列布局，我们把它们结合在一起，就变成了混合布局。

html:

   <div class="top">
        <div class="head"></div>
    </div>
    <div class="main">
        <div class="left"></div>
        <div class="right">
            <div class="right-left"></div>
            <div class="right-right"></div>
        </div>
    </div>
    <div class="foot"></div>

css:

  * {
        margin: 0;
        padding: 0;
    }

    .top {
        height: 100px;
        background: blue;
    }

    .head {
        width: 800px;
        height: 100px;
        background: #900;
        margin: 0 auto;
    }

    .main {
        width: 800px;
        height: 600px;
        background: #ccc;
        margin: 0 auto;
        overflow: hidden;
    }

    .foot {
        width: 800px;
        height: 100px;
        background: #900;
        margin: 0 auto;
    }

    .left {
        width: 200px;
        height: 600px;
        background: orange;
        float: left;
    }

    .right {
        width: 600px;
        height: 600px;
        background: yellow;
        float: right;
        overflow: hidden;
    }

    .right-left {
        width: 200px;
        height: 600px;
        background: green;
        float: left;
    }

    .right-right {
        width: 400px;
        height: 600px;
        background: pink;
        float: right;
    }

附图：

好了，这就是我总结的css网页常见的布局方式，希望对新手小白有所帮助。