简单CSS布局留用

1、导航栏固定显示代码，文字居中，z-index

 header{
     position: fixed;
     top: 0px;
     left: 10%;
     width: 80%;
     height: 80px;
     border:1px solid blue;
     text-align: center;
     background-color: #ccc;
     z-index: 2;
 }

2、中间内容居中，上下左右留间距代码

 .container{
     position: relative;
     top: 80px;
     left: 10%;
     width: 80%;
     border:1px solid blue;
     background-color: #fff;
     margin-bottom: 50px;
 }

3、display:inline-block控制的左右结构布局

 nav{  //左边侧导航
      width: 20%;
      border:1px solid red;
      display: inline-block;
 }
 .section_container{    //右边包含多个section的内容部分
     width: 75%;
     border:5px solid blue;
     display: inline-block;
     vertical-align: top;
 }

4、与3相同效果的position：absolutely左右结构布局

 nav{
     position: absolute;
     width:20%;
     border:1px solid red;
 }
 section{   //同时控制多个section
     margin-left:20%;
     width: 80%;
     border:1px solid red;
 }

5、flex的布局应用

 .flex{
     padding:10px;
     display: flex;
     flex-flow:row;
 }
 .left{
     padding:10px;
     flex:1;
     background-color: green;
     border:1px solid green;
 }
 .right{
     padding:10px;
     flex:2;
     background-color: yellow;
     border:1px solid green;
 }
 .center{
     padding:10px;
     width: 70%;
     margin:0 1em;
     background-color: red;
     border:1px solid green;
 }

效果：

6、column分列布局

 .four_column{
     padding:1em;
     background-color: green;
     -webkit-column-count:4;
     -webkit-column-gap:1em;
     -moz-column-count:4;
     -moz-column-gap:1em;
     column-count:4;
     column-gap:1em;
 }

效果：