一 div置中
#container { margin:0 auto; }
margin:1px 2px 3px 4px;其中四個值分別代表上右下左(順時針)
margin:1px 2px;其中1px代表分別距瀏覽器上邊和下邊的距離，2px代表分別距左右的距離。
margin:0 auto; 0 代表距上下的距離，auto代表距左右的距離。當左右距離為auto的時候，瀏覽器自動測算時左右距離一致。
二 絕對位置
當某個div被設定為position:absolute，它本質上已經和其它對象分離開了，它的定位元模式不影響其它對象，也不被其它對象影響。
#sample{
postion:absolute;
left:0;
}
表示距左邊距離為0px
例子:
#left{
position:absolute;
left:0;
width:200px;
}
#center{
margin-left:200px;
margin-right:200px;
height:100px
}
#right{
position:absolute;
right:0;
width:200px;
}
這樣左右兩邊是寬度固定的兩個div，中間的div距瀏覽器左右兩邊分別為200px，正好留出了左右div寬度的位置，並且中間div的寬度自適應。
三 高度自適應
有的人覺得很簡單，直接設定height:100%即可，但是僅僅這樣做是不夠的。
必須明白的一點是：一個對象的高度能否自適應，取決於它的父物件是否高度自適應。
例子一:
<html>
<body>
<div id="content"></div>
</body>
</html>
要想讓content的div高度自適應，必須這樣設定
html,body{ height:100%; }
#content{ height:100%; }
例子二:
<html>
<body>
<div id="content">
<div id="left"></div>
</div>
</body>
</html>
要想讓left的div高度自適應，必須這樣設定
html,body{ height:100%; }
#content{ height:100%; }
#left{ height:100%; }
也就是說要設定left的高度自適應，必須設該對象的父物件content高度自適應。
要設content高度自適應，也要設定其父物件的高度自適應。
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
