Web頁面布局方式小結(jié)
發(fā)布時(shí)間：2014-06-03 11:51:37 作者：佚名 
我要評(píng)論
我要評(píng)論Web頁面是由塊元素組成的，正常情況下塊元素一個(gè)個(gè)按垂直方向排布，構(gòu)成了頁面。但是這種基本的布局方式絕大多時(shí)候不能滿足我們的需求，所以各種布局方式應(yīng)運(yùn)而生，本文就對(duì)這些布局方式做個(gè)小結(jié)。
1、元素漂移
把一個(gè)元素從頁面流中移走，漂移到某個(gè)方向，其它塊元素會(huì)置于這個(gè)元素下面，當(dāng)有內(nèi)聯(lián)元素注入其他塊元素時(shí)，內(nèi)聯(lián)元素會(huì)環(huán)繞著這個(gè)元素
#amazing{
width: 200px;
float: right;
}
如圖：
如果其他元素要避開這個(gè)元素
復(fù)制代碼
代碼如下:#footer{
clear: both;
}
如圖：
2、凍結(jié)布局
元素還保留在頁面流中，鎖定這個(gè)元素，凍結(jié)在頁面上，不論放大還是縮小窗口，這個(gè)元素的大小不變
復(fù)制代碼
代碼如下:#allcontent{
width: 800px;
}
如圖：
3、凝膠物布局
鎖定頁面中內(nèi)容區(qū)的寬度，把它放置在瀏覽器中央
復(fù)制代碼
代碼如下:#allcontent{
width: 800px;
margin-left: auto;
margin-right: auto;
}
如圖：
4、絕對(duì)布局
把一個(gè)元素從頁面流中移走，并漂浮固定在頁面的某個(gè)位置。
復(fù)制代碼
代碼如下:#sidebar{
position: absolute;
top: 128px;
right: 480px;
}
如圖：
5、固定布局
把一個(gè)元素從頁面流中移走，并漂浮固定在窗口的某個(gè)位置。
復(fù)制代碼
代碼如下:#coupon{
position: fixed;
top: 300px;
left: 100px;
}
如圖：
6、相對(duì)布局
元素還保留在頁面流中，但在頁面顯示之前把元素偏移到指定的位置，原來的位置因?yàn)檫€在流中，所以不會(huì)被其他元素占位。
.beanheading img{
position: relative;
right:120px;
}
如圖：
相關(guān)文章
網(wǎng)頁DIV+CSS布局和動(dòng)畫美化全程實(shí)例 (陳益材) 隨書光盤
網(wǎng)站的建站技術(shù)近幾年得到迅速的發(fā)展，網(wǎng)頁的布局與特效動(dòng)畫技術(shù)層出不窮，網(wǎng)站建設(shè)已經(jīng)從簡單的技術(shù)支持時(shí)代衍變到現(xiàn)在的視覺美化時(shí)代2014-05-28- 這篇文章主要收羅了CSS布局中有關(guān)水平和垂直居中的N種方法，個(gè)人感覺是相當(dāng)不錯(cuò)，需要的朋友可以參考下2014-05-08
- 這篇文章主要介紹了div+css布局中選擇使用html標(biāo)簽的方法,需要的朋友可以參考下2014-05-06
- CSS里一直有一個(gè)讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局2014-05-03
css網(wǎng)站布局實(shí)錄學(xué)習(xí)筆記第三部分網(wǎng)頁布局與定位
這篇文章主要介紹了css網(wǎng)站布局實(shí)錄學(xué)習(xí)筆記第三部分網(wǎng)頁布局與定位,需要的朋友可以參考下2014-04-28css網(wǎng)站布局實(shí)錄學(xué)習(xí)筆記第一部分
這篇文章主要介紹了css網(wǎng)站布局實(shí)錄學(xué)習(xí)筆記第一部分,需要的朋友可以參考下2014-04-28- 這篇文章主要介紹了如何使用css來實(shí)現(xiàn)十字的布局,需要的朋友可以參考下2014-04-08
- CSS div布局有很多的注意事項(xiàng)，比如大的div里面長寬給定，內(nèi)部又存在一個(gè)新的div，這個(gè)div不能完全放在父div中。那么就會(huì)overflow、float出來的div不占文檔流等等2014-03-21
使用div+css布局過程中在什么時(shí)候使用table呢
想必很多朋友都在詢問這個(gè)問題，就是在應(yīng)用DIV+CSS布局以后該在什么時(shí)候使用table呢？下面針對(duì)這個(gè)問題，為大家詳細(xì)介紹下2014-03-17- position屬性主要有四種屬性值，任何元素的默認(rèn)position的屬性值均是static,靜態(tài)。這節(jié)課主要講講relative以及absolute，感興趣的朋友可以了解下2013-12-09
