我寫網頁是包在一個叫 #container 的DIV中的,所以這裡主要講一下BODY與#container之間的關系。
先看一下body的CSS樣式:
body{ margin:0;padding:0;text-align:center;}
這裡的body把margin與padding設置為0,這樣就把body內容與浏覽器邊緣親密接觸。然後text-align:center 把body的內容全部居中,這樣就包括了#container也一起居中了。
再來看一下#container的樣式:
container{width:760px;margin:0 auto;text-align:left;position:relative;}
學問就在這個#container裡了: 給這個容器設定了寬度,這裡是760px,margin:0 auto; 這裡的margin中的第一個0是上下、第二個auto是左右。上下為0左右讓其自控。再加上定位為相對,只有定位為相對的元素才可以有位置移動!