首先來看看CSS中的盒子模型，如：
我們可以把它想像成現實中上方開口的盒子，然後從正上往下俯視，邊框相當於盒子的厚度，內容相對於盒子中所裝物體的空間，而填充呢，相當於為防震而在盒子內填充的泡沫，邊界呢相當於在這個盒子周圍於其他物品要留出一定的空間。是不是這樣就很容易理解盒模型了。
所以整個盒模型在頁面中所佔的寬度是由左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成，而css樣式中width所定義的寬度僅僅是內容部分的寬度。如果不指定width，預設是填充滿父容器的content地區，如果不指定height，高度由其包含的content決定。
margin的設定規則參照 http://blog.csdn.net/kkdelta/article/details/8701617
大家可以通過下面的例子來體會和理解margin和padding：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>#layoutdiv { width:300px; height: 200px; background:#AC0; margin:100px; padding:50px; border: 10px solid #CCC;}#contentdive { width:200px; height: 160px; background:#eee;}#layoutdiv1 { width:300px; height: 200px; background:#AC0;}#contentdive1 { width:200px; height: 160px; background:#eee;}</style></head><body><div id="layoutdiv"> <div id="contentdive"> <p>layoutdiv 離body的margin為100px， <p>layoutdiv的padding為50px,(50px內為contentdive) <p>layoutdiv的border為10px（layoutdiv有一個10px的邊框） </div></div><div id="layoutdiv1"> <div id="contentdive1"> <p>沒有設定padding，margin，border </div></div></body></html>
通過設定margin為auto可以控制element在父容器中置中：
#div1 { width:600px; height: 200px; margin:auto;background:#AC0;}#div2 { width:400px; height: 160px; margin:auto;background:#eee;}</style></head><body><div id="div1"> <div id="div2"> 相對於外面的DIV置中 </div> <br>相對於body置中</div>
利用float控制多個塊元素處於同一行的左右位置。float後的元素脫離文檔流，不佔據原來的位置。但是要注意同時float的元素在float之後的層要佔據寬度。
#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }</style></head><body><div id="side">此處顯示 id "side" 的內容</div><div id="main">此處顯示 id "main" 的內容</div></body></html>
1.position:relative; 如果對一個元素進行相對定位，首先它將出現在它所在的位置上。然後通過設定垂直或水平位置，讓這個元素"相對於"它的原始起點進行移動。（再一點，相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框）
2.position:absolute; 表示絕對位置，位置將依據瀏覽器左上方開始計算。 絕對位置使元素脫離文檔流，因此不佔據空間。普通文檔流中元素的布局就像絕對位置的元素不存在時一樣。（因為絕對位置的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素並可以通過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。）
3.父容器使用相對定位，子項目使用絕對位置後，這樣子項目的位置不再相對於瀏覽器左上方，而是相對於父視窗左上方
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>body { padding:20px;}a { color:#00f; text-decoration:none;}a:hover { color:#f60; position:relative; top:1px; left:1px;}#layout { width:600px; margin:0 auto; background:#eee; position:relative;}#new { position:absolute; top:-15px; left:140px;}</style></head><body><div id="layout"> <div id="new"><img src="http://www.zhuna.cn/images/new.gif" /></div> 這裡是內容<a href="#">這裡是連結</a>這裡也是內容</div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
