display：inline-block布局
缺點(diǎn)：有空格縫隙颜阐，排版犬齒不齊
空格解決：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;
缺點(diǎn)：父容器撐不起來
解決：子元素高度100%
box-border:border-box;可以讓邊框?qū)挾劝ㄔ谌萜髦?/p>
.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;
}
手機(jī)版面布局：
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;
}
