css常用布局

1.一列布局

html:

<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>

css:

      .header{
        height: 100px;
        background: pink;
    }
    .body{
        height:500px;
        background: blue;
    }
    .footer{
        height:100px;
        background: #ddd;
    }

 

 2.两列布局(指定宽度)

html:

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

 

css:

       .left{
        width:20%;
        height: 500px;
        float: left;
        background:#333;
    }
    .right{
        width:80%;
        height:500px;
        float: left;
        background: pink
    }

 

 

 

3.双飞翼布局（中间自适应，左右列固定宽度）

html:

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

css:

       .main {
	    float: left;
	    width: 100%;
	    height: 500px;
	}
	.cont {
	    height: 500px;
	    background-color: aqua;
	    margin-left: 300px;
	    margin-right: 300px;
	}
	.left {
	    float: left;
	    width: 300px;
	    height: 500px;
	    margin-left: -100%;
	    background-color: pink;
	}
	.right {
	    float: left;
	    width: 300px;
	    height: 500px;
	    margin-left: -300px;
	    background-color: yellow;
	}

　4.多栏布局

栅格系统,是bootstrap常用的布局模式,下列就举个简单四栏例子

html:

    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>

css:

    .col{
        width:25%;
        height:500px;
        float: left;
        background: #ccc;
    }
    .col:nth-child(1){
        background: red;
    }
    .col:nth-child(2){
        background: green;
    }
    .col:nth-child(3){
        background: black;
    }
    .col:nth-child(4){
        background: yellow;
    }

常见还有column-count、column-gap、column-rule、columns

5.弹性布局(flex)
html:

   <ul>
        <li><a href="#">菜单1</a></li>
        <li><a href="#">菜单2</a></li>
        <li><a href="#">菜单3</a></li>
        <li><a href="#">菜单4</a></li>
    </ul>

　　css:

    ul{
        display: flex;
        height:100px;
        width:100%;
    }
    ul li{
        flex: auto;
        list-style:none;
        text-align:center;
        border:1px solid red;
    }

　　6.瀑布式布局