8.簡單頁面製作

1.盒子邊框,內外邊距
div是行級元素,可以通過設置float或position來定位div
這裏寫圖片描述

2.定位技術:

float浮動定位:

會影響後面的div,有需要時要清楚浮動效果clear:both;

這裏寫圖片描述

position定位:

relative : 相對定位,相對於原來的位置。相對定位的div依然佔據了原來的位置(沒有脫離文檔流)。

absolute:絕對定位,相對於瀏覽器邊框定位。絕對定位的div不佔據原來的位置(脫離了文檔流)。
絕對定位相對的是誰,其實先找的是,看那個父div設置了相對定位屬性,如果沒有父div設置相對屬性, 則相對於瀏覽器邊框。

這裏寫圖片描述

這裏寫圖片描述

所以如果想要相對於父div的絕對定位,則要在父div裏設置position:relative 相對定位。

這裏寫圖片描述

例子:照片簽名
這裏寫圖片描述

這裏寫圖片描述

3.其他屬性:

這裏寫圖片描述

body全局屬性:

這裏寫圖片描述

(body裏面的一個總div就代表網頁)
body裏設置網頁居中,總div裏設置網頁寬度,內容位置

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章