div布局

display：inline-block布局
缺点：有空格缝隙，排版犬齿不齐
空格解决：letter-spaceing:-4px;
排版不齐：vertical-align: top;

 .all{
            letter-spacing: -6px;
            width:900px;
            height:300px;
        }
        .item{
            vertical-align: top;
            letter-spacing: 6px;
            display: inline-block;
            width:300px;
            height:100%;
        }

image.png

float:left;
缺点：父容器撑不起来
解决：子元素高度100%
box-border:border-box;可以让边框宽度包括在容器中

 .all{
            width:900px;
            height:300px;
        }
        .item{
            width:300px;
            height:100%;
            border:3px solid #999;
            box-sizing: border-box;
            float: left;
        }

image.png

display:flex;

 .all{
            display: flex;
            display: -moz-flex;
            display: -webkit-flex;
            width:900px;
            height:300px;
            overflow: hidden;
        }
        .item{
            flex:1;
            -webkit-flex: 1;
            -moz-box-flex: 1;
            height:100%;
        }

image.png

图文混排：

image.png

比较多在header头部用
.all{
height:80px;
border:1px solid #999;
}
.all>img{
vertical-align: middle;
margin: 10px;
height: 60px;
width: 60px;
}

单页排版：

image.png

  .all{
            width:900px;
            height:300px;
            border:1px solid #999;
        }
        .all>.side{
            float: left;
            width: 100px;
            height: 100%;
        }
        .all>.main{
            height:100%;
            margin-left: 100px;
        }

手机版面布局：

image.png

  .con{
            position: absolute;
            top:0;
            bottom:0;
            left:0;
            right:0;
            width:100%;
            overflow: hidden;
        }
       .header{
           width:100%;
           height:50px;
           position: fixed;
           top:0;
           background: pink;
       }
       .main{
           margin-top: 50px;
           height:100%;
           overflow-y: auto;
           margin-bottom: 50px;
           background: #999;

       }
       .mainCon{
           height:1500px;

       }
        .footer{
            width:100%;
            height:50px;
            position:fixed;
            bottom:0;
            background: #5f8039;
        }