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;
}
