初學(xué)css的時(shí)候需要多個(gè)div并排排列的時(shí)候，通常會(huì)使用百分比定位，再用float去排列，例如a,b,c三個(gè)div，這樣百分比定位的好處是自適應(yīng)，只要定義好div的屬性，保證每個(gè)div的內(nèi)容不溢出，則可以一直保持效果
<pre>
#a{ width: 33%; float: left;}
#b{ width: 33%; float: left;}
#c{ width: 33%; float: left;}
</pre>

Paste_Image.png

縱向排列也是類(lèi)似的，設(shè)定好寬度，高度再去百分比就可以了
<pre>
#a{ height: 33%; width:100; float: left;}
#b{ height: 33%; width:100; float: left;}
#c{ height: 33%; width:100; float: left;}
</pre>
然而現(xiàn)實(shí)開(kāi)發(fā)中真正需要這種簡(jiǎn)單的百分比定位的卻不多，很多情況下都需要，某些列某列固定寬度，其他列自動(dòng)適應(yīng)，例如左側(cè)a元素需要固定100px，右側(cè)的c元素固定50px，中間b元素自適應(yīng)，這里就需要使用到絕對(duì)定位了，position:absolute
<pre>
#a{
position:absolute;
left:0;
top:0;
width: 100px;
}
#b{
position:absolute;
left: 100px;
right: 50px;
top:0;
width: auto;
}
#c{
position:absolute;
right:0;
top: 0;
width: 50px;
}
</pre>

Paste_Image.png

原理是：
absolute定位是指針對(duì)父元素絕對(duì)定位，abc都為絕對(duì)定位，a元素距離左側(cè)0px，寬度100px，等于完全靠左，c元素距離右側(cè)0px，寬度50px，指定起點(diǎn)和寬度等于就已經(jīng)固定了一個(gè)元素的絕對(duì)位置了，不管瀏覽器怎么拉伸怎么縮小，除非寬度小于100+50px，否則都不會(huì)變形。而b元素沒(méi)有定義固定寬度，只定義了距離左側(cè)的像素和距離右側(cè)的像素，這樣就實(shí)現(xiàn)了自動(dòng)拉伸元素寬度。

同理豎列定位也如此，例如我們想實(shí)現(xiàn)同時(shí)顯示頭尾，并且中間部分內(nèi)容滾動(dòng)效果：
<pre>

a{

position:absolute;
left:0;
top:0;
width: 100%;
height: 100px;
background-color: lightblue;
}

b{

position:absolute;
top:100px;
left: 0;
bottom: 150px;
width: 100%;
overflow-y: scroll;
}

c{

position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background-color: lightblue;
}
</pre>

Paste_Image.png