Web页面布局方式小结
Web頁面是由塊元素組成的，正常情況下塊元素一個個按垂直方向排布，構成了頁面。可是這樣的主要的布局方式絕大多時候不能滿足我們的需求，所以各種布局方式應運而生，本文就對這些布局方式做個小結。
1、元素漂移
把一個元素從頁面流中移走，漂移到某個方向，其他塊元素會置于這個元素以下，當有內聯元素注入其他塊元素時，內聯元素會圍繞著這個元素
#amazing{
???width: 200px;
???float: right;
}
如圖：
假設其它元素要避開這個元素
#footer{
???clear: both;
}
如圖：
?
2、凍結布局
元素還保留在頁面流中，鎖定這個元素，凍結在頁面上，不論放大還是縮小窗體，這個元素的大小不變
#allcontent{
???width: 800px;
}
如圖：
?
3、凝膠物布局
鎖定頁面中內容區的寬度，把它放置在瀏覽器中央
#allcontent{
???width: 800px;
???margin-left: auto;
???margin-right: auto;
}
如圖：
?
4、絕對布局
把一個元素從頁面流中移走，并漂浮固定在頁面的某個位置。
#sidebar{
???position: absolute;
???top: 128px;
???right: 480px;
}
如圖：
?
5、固定布局
把一個元素從頁面流中移走，并漂浮固定在窗體的某個位置。
#coupon{
???position: fixed;
???top: 300px;
???left: 100px;
}
如圖：
?
6、相對布局
元素還保留在頁面流中，但在頁面顯示之前把元素偏移到指定的位置，原來的位置由于還在流中，所以不會被其它元素占位。
.beanheading img{
???position: relative;
??? right:120px;
}
如圖：
（完）
?
總結
以上是生活随笔為你收集整理的Web页面布局方式小结的全部內容，希望文章能夠幫你解決所遇到的問題。
