初入前端。在學習上總會有很多問題。這次就網頁佈局來講講。 網頁佈局在現代已經不再是什麼難事，幾乎所有頁面都能做好一個能拿得出手的佈局，在現在招聘網站上也有好多要求什麼div+css佈局的，簡直不知所言。 前端不懂佈局就沒法繼續前了。那麼怎麼佈局呢。 細心一點就會發現，css裡面竟然沒有專門為佈局而設 ...
初入前端。在學習上總會有很多問題。這次就網頁佈局來講講。
網頁佈局在現代已經不再是什麼難事，幾乎所有頁面都能做好一個能拿得出手的佈局，在現在招聘網站上也有好多要求什麼div+css佈局的，簡直不知所言。
前端不懂佈局就沒法繼續前了。那麼怎麼佈局呢。
細心一點就會發現，css裡面竟然沒有專門為佈局而設定的屬性。而能達到佈局效果的，主要就是用position和float這兩個屬性了。
在分析兩個屬性之前，先聊一下<div>。
html標簽裡面，div是常用於佈局的盒子，是一個塊級元素，塊級元素的自帶屬性就是display：block。可設寬度和高度，在文檔流中獨占一行，就是說如果想要有兩個div併排的話，就要採取手段了。
下麵兩個屬性的用法。
float
中文翻譯是叫做浮動，如果你用word比較多的話，應該不難理解浮動的意思。<div>設置樣式屬性float：left之後，會允許下麵的塊級元素在器右邊併排，如果這兩個元素的寬度超出父元素的寬度，那麼本該在旁邊的塊級元素就會浮動到下一行，並且只到遇到下一個同級的塊級元素設置的clear：left才會停止。另外間距需要使用margin屬性來控制。
優點：該元素的內容不會脫離文檔流，父級元素可以讓子元素撐起來。所謂撐起來就是比如父元素的寬 、高能自適應。
缺點：說實話個人經常忘記加clear，所以不喜歡用float去佈局。另外由於是浮動的。文檔流不會出現重疊的情況。有時候佈局會亂掉。
position
中文翻譯叫定位。position有四個值，static(沒有定位)，fixed(固定定位），relative(相對定位），absolute(絕對定位)；
static很少用（幾乎沒用過），暫且不聊；position：relative可用與微調，在原位置上通過top、left、right、bottom來偏移距離。設置了position：absolute的塊級元素會脫離文檔流，就是說如果設置了float，float是沒有效果的，並且能出現兩個塊級元素重疊的效果，position：absolute的父級元素一般會設置position：relative，用於限制position：absolute的活動範圍。
優點：簡直就是坐標系，指哪打哪。給我一堆鬆散同級的元素都能布出一個漂亮的局。
缺點：子元素脫離了文檔流，父級元素的自適應沒有了，高度不再自適應。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
那麼佈局用什麼好呢？你喜歡用什麼就用唄。開心就好，樣式而已，都沒有改變html的結構，但是最好不要一起用於同級的佈局中，寫著很亂，局也容易亂。
個人喜歡用position。
所以這裡在給出一個解決父級高度寬度自適應的方法。就是用js啦。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 #person{position: relative; margin: 0 auto 0; width: 100px; background: yellow;} 8 #son{ position: absolute; top: 10px; left: 0; width: 50px; height: 1000px; background: red; } 9 </style> 10 </head> 11 <body> 12 <div id="person"> 13 <div id="son"></div> 14 </div> 15 <script> 16 document.getElementById('person').style.height = document.getElementById('son').offsetHeight + 20 + 'px'; 17 </script> 18 </body> 19 </html>
溫馨提示：要靈活使用js的方法，才能有好效果！
