上一篇對布局做了簡單介紹，在這節(jié)中加以補(bǔ)充
單列布局
一、水平居中
水平居中是頁面布局中常用的布局方式，多出現(xiàn)于標(biāo)題與主要內(nèi)容。
1.inline-block和text-align
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
.parent{text-align:center;
}
.child{display:inline-block;
}
2.margin:0 auto;
.child{
width:200px;
height:100px;
margin:0 auto
}
使用這種方式需要設(shè)置其寬度
3.絕對定位與相對定位組合使用
.parent{
postion:relative;
}
.child{
position:absolute;
left:50%;
}
4.table實現(xiàn)
.child{
display:table;
margin:0 auto;
}
5.flex布局實現(xiàn)
.parent{
display:flex;
}
.child{
margin:0 auto;
}
二、垂直居中
1.vertical-align
.parent{
display:inline-block;
vertical-align:middle;
line-height:20px;
}
注：使用這種方式需給其元素設(shè)置inline-block;
2.絕對定位
這種方式基本跟水平居中類似
.parent{
position:relative;
}
.child{
position:absolute;
top:50%
transform:traslate(0,-50%)
}
多列布局
一、左列定寬，右列自適應(yīng)
1.float+margin實現(xiàn)
.left{
float:left;
width:100px;
}
.right{
margin-left:
100px;
}
2.float+overflow實現(xiàn)
.left{
width:100px;
float:left;
}
.right{
overflow:hidden;
}
3.使用table實現(xiàn)
.parent{
display:table;
table-layout:fixed;
width:100%;
}
.left{
width:100px;
}
.right,.left{
display:table-cell;
}
二、右列定寬，左列自適應(yīng)
1.使用float+margin實現(xiàn)
.parent{
height:100px;
margin:0 auto;
}
.left{
margin-right:-100px;
width:100%;
float:left;
}
.right{
float:right;
width:100px;
background:blue;
}
2.table實現(xiàn)
.parent{
display:table;
table-layout:fixed;
width:100%;
}
.left{
display:table-cell;
}
.right{
width:100px;
display:table-cell;
}
三、兩列定寬，右列自適應(yīng)
(最左邊為left，中間為center，右邊為right)
1.float+margin實現(xiàn)
.left,.center{
float:left;
width:200px;
}
.right{
margin-left:400px;
}
2.table實現(xiàn)
.parent{
display:table;
table-layout:fixed;
width:100%;
}
.left,.center,.right{
display:table-cell;
}
.left,.center{
width:200px;
}
3.float+overflow實現(xiàn)
.left,.center{
float:left;width:200px;
}
.right{
overflow:hidden;
}
四、兩側(cè)定寬，中間自適應(yīng)
1.float+margin實現(xiàn)
.left{
width：100px;
float:left;
}
.center{
float:left;
width:100%;
margin-right:-200px;
}
.right{
width:100px;
float:right;
}
2.table實現(xiàn)
.parent{
width:100%;
display:table;
table-layout:fixed;
}
.left,.center,.right{
display:table-cell;
}
.left{
width:100px;
}
.right{
width:100px;
}
五、一列不定寬，一列自適應(yīng)
1.float+overflow實現(xiàn)
.left{
float:left;
}
.right{
overflow:hidden;
}
2.table實現(xiàn)
.parent{
display:table;
table-layout:fixed;
width:100%;
}
.left{
width:0.1%;
}
.left,.right{
display:table-cell;
}
