html+css布局的三種方式(自然布局/流動布局/定位布局)
發(fā)布時間：2013-01-06 15:15:45 作者：佚名 
我要評論
我要評論html+css布局的三種方式(自然布局/流動布局/定位布局)一些新手朋友會很陌生，接下來為您詳細介紹，感興趣的朋友可以了解下
1.自然布局
沒有任何修飾的布局是自動靠左的。
2.流動布局
上面講的float:left的情況。
3.定位布局
相對定位和絕對定位都是相對于父div標簽的。
相對------以這個元素的本來應該在的位置為參照點
絕對——以父div標簽的原點（左上角）為參照點。
由于外層是position:relative，所以里層是absolute的話，則會以外層的左上角為位移參考對齊。當然外層只寫position:relative，寫上left,top這兩個值，則表示以：以這個元素的本來應該在的位置為布局參照原點進行l(wèi)eft,top對齊。
還有一種情況是，只是一個position:absolute;外層沒有position:relative，這時會找尋那個點為參考呢？這時候的原則是：如果某父級元素中有relative者，則以某父級元素為參考原點，如果沒有position:relative，則以body為參考原點。如果position:absolute外層沒有relative時，這兩個布局上是沒有區(qū)別的。
當然最后一種情況是：外層是：position:absolute;里邊是position:relative，那會是什么情況？按著原來的原則，absolute會參考body為布局原點，relative會參考他本來應該在的位置為布局原點，這時候其實就是參考外層左上角為布局原點。
其它的要看實際情況而定。
沒有任何修飾的布局是自動靠左的。
2.流動布局
上面講的float:left的情況。
3.定位布局
相對定位和絕對定位都是相對于父div標簽的。
相對------以這個元素的本來應該在的位置為參照點
絕對——以父div標簽的原點（左上角）為參照點。
由于外層是position:relative，所以里層是absolute的話，則會以外層的左上角為位移參考對齊。當然外層只寫position:relative，寫上left,top這兩個值，則表示以：以這個元素的本來應該在的位置為布局參照原點進行l(wèi)eft,top對齊。
還有一種情況是，只是一個position:absolute;外層沒有position:relative，這時會找尋那個點為參考呢？這時候的原則是：如果某父級元素中有relative者，則以某父級元素為參考原點，如果沒有position:relative，則以body為參考原點。如果position:absolute外層沒有relative時，這兩個布局上是沒有區(qū)別的。
當然最后一種情況是：外層是：position:absolute;里邊是position:relative，那會是什么情況？按著原來的原則，absolute會參考body為布局原點，relative會參考他本來應該在的位置為布局原點，這時候其實就是參考外層左上角為布局原點。
其它的要看實際情況而定。
相關文章
- 這幾天一直在研究HTML+CSS布局。并沒有把所有的布局都弄明白，只學了一點常用的css控制屬性，此圖只為說明功能，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-28
基于display:table的CSS布局讓HTML元素和像table一樣
display:table的CSS聲明能夠讓一個HTML元素和它的子節(jié)點像table元素一樣。使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產生因為使用了2012-12-07
HTML+CSS網頁設計與布局從入門到精通 pdf 附隨書源碼
HTML+CSS網頁設計與布局從入門到精通 緊密圍繞網頁設計師在制作網頁過程中的實際需要和應該掌握的技術，全面介紹了使用HTML和CSS進行網頁設計和制作的各方面內容和技巧2012-09-26- 網頁制作Webjx文章簡介：CSS網頁布局學習之Font-size的妙用. 我在做網站項目的時候通常需要定義一個高度為10px以下的div。代碼如下： <!DOCTYPE htm2009-04-02
不要使用的HTML標簽(WEB標準網頁布局)-CSS教程-網頁制作-網頁教學網
CSS網頁布局中不推薦使用的HTML標簽，請盡量不要使用這些HTML標簽。 Do not use these html elements in html pages. Presentational elements should not2008-10-17CSS網頁布局:網頁頁面結構化-CSS教程-網頁制作-網頁教學網
你正在學習CSS布局嗎？是不是還不能完全掌握純CSS布局？通常有兩種情況阻礙你的學習： 第一種可能是你還沒有理解CSS處理頁面的原理。在你考慮你的頁面整體表現效2008-10-17CSS頁面布局中HTML結構化-CSS教程-網頁制作-網頁教學網
您正在學習WEB標準CSS網頁布局嗎？是不是還不能完全掌握純CSS布局？通常有兩種需要您特別注意： 第一種可能是你還沒有理解CSS處理頁面的原理。 在你考2008-10-17關于DIV CSS和XHTML CSS的理解-CSS教程-網頁制作-網頁教學網
WEB標準是一系列標準的集合，并不是僅“DIV CSS”布局就可以實現。以CSS網頁布局只是標準的基礎之一。“DIV CSS”布局只是一種通俗的稱呼罷了。而2008-10-17
這篇文章主要介紹了HTML+CSS實現單列布局水平居中布局的相關資料,需要的朋友可以參考下2017-09-06
