html中相對(relative)，絕對(absolute)位置以及float的學習和使用案例 （轉）
這幾天著手於CSS的研究，研究的原因主要是工作需要，最近發現如果做前端僅僅會javascript很難盡善盡美，當然懂樣式和html在一定程度上可以讓我們更近一步。
css較為簡單，由於個人擅長編寫代碼，所以很少研究，偶然發現如果會做界面給自己帶來的巨大好處，我開始了CSS的學習。
css三大選擇器：id選擇器，class選擇器元素選擇器，美工一般只用class選擇器。所以我這裏也只采用class選擇器。（備註：id一般用於編程人員書寫腳本，
在編程過程中盡量減少在代碼通過class獲取元素對象，相應的id選擇器也應該盡量少的用於樣式中，id的命名一般都屬於編程人員分類的事）。
簡單頁面：
<body>
<div id="left" class="left widhei">1</div>
<div id="right" class="right widhei">2</div>
<div id="down" class="down widhei">3</div>
</body>
在布局開始時一般需要取出標簽的邊距，不知道為什麽設計者會設計這個邊框：
body {color: #000;background: #fff;margin: 0;padding: 0;}這個可以理解為對頁面的初始化
在html中默認標簽布局為線性布局，從上而下，例如：
<style type="text/css">
body {color: #000;background: #fff;margin: 0;padding: 0;}
.left{ background:#606060;}
.right{ background:#123456; left:70px;top:0px;}
.down{background:#321321;left:100px;top:-40px;}
.widhei{width:40px;height:40px}
</style>
</head>
down widhei，其中樣式可以疊加的功能在很大程度上減少了代碼的冗余。以上的效果如下圖：
那麽我們如何隨心所欲的將各個div按照自己的想法進行布局呢？這裏我們需要采用布局，布局有相對位置：relative，和絕對位置：absolute兩種方式，
相對布局是相對前一個div進行布局，絕對布局是對於整個body中而言，下面我們將結束一下相對布局的效果：
.right{ background:#123456; left:60px;top:10px;position:relative;}
.down{background:#321321;left:120px;position:relative;}
效果如下圖：
可以看出相對布局是相對於前一個元素，如果我們修改樣式中的top元素將會更加明顯.
如果我們通過相對位置將所有div水平布局，那麽我們只需要修改top屬性：
.right{ background:#123456; left:60px;top:-40px;position:relative;}
.down{background:#321321;left:120px;position:relative;top:-80px}
效果如圖所示：
關於絕對位置，需要改動的僅僅是position:absolute還需要將上面的top修改，在絕對位置中top和left,right等都是大於0的。（來自於個人總結）
.right{ background:#123456; left:60px;top:-20px;position:absolute;}
.down{background:#321321;left:120px;position:absolute;top:-30px}
這種修改的結果是只能顯示一個div原因在於top小於0的部分將被隱藏，效果圖如：
如果將top熟悉去掉，那麽會出現什麽樣的效果呢，html中網頁布局默認是相對布局的，也就是說結果就是後兩個div的top屬性是相對於div1而言,由於後
兩個div被定義布局為relative所以他們的top默認為40，都是相對應div1而言的。效果如圖：
如果將top改為0那麽三個div的效果與3.png一樣,這就是類似於被強行放置於該位置。
最後再補充一下關於float的運用：float翻譯為浮動層，不占據頁面空間，很多廣告都是使用的浮動層，也方便後臺進行信息推送。
.left{ background:#606060;}
.right{ background:#123456; float:left;top:0;position:absolute}
.down{background:#321321;float:left;top:0;position:absolute}
.widhei{width:40px;height:40px}
如果將樣式修改為如上所示，將使得最後一個div覆蓋前面的所有div,也可以通過left等屬性將浮動層定位，那麽浮動層將不受body影響。
當然要想做好一個網頁界面還要改有很強的審美觀，這點我是很難做到的。
下面再寫一個關於float的案例：
.left{ background:#606060;float:right;top:0;}
.right{ background:#123456;left:0px;position:absolute}
.down{background:#321321;left:60px;position:absolute}
.widhei{width:40px;height:40px}
這樣會看到div1顯示在頁面右邊，其他兩個div在其對應位置處。
關於css的學習很大程度需要實際操作，這個確實很簡單，但是要做好一個看上去還行的頁面並不是很容易，再此勉勵
轉：http:[email protected]/blog/static/170171558201392201158263/
html中相對(relative)，絕對(absolute)位置以及float的學習和使用案例 （轉）