Web頁面配置方式小結

標籤：http   track   大小   pos   tracking   塊元素   ati   float   nbsp   

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頁面配置方式小結