253
div+css布局注意點
一 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 ></div>
</body>
</html>
要想讓content的div高度自適應，必須這樣設置
html,body{ height:100%; }
#content{ height:100%; }
例子二:
<html>
<body>
<div >
<div ></div>
</div>
</body>
</html>
要想讓left的div高度自適應，必須這樣設置
html,body{ height:100%; }
#content{ height:100%; }
#left{ height:100%; }
也就是說要設置left的高度自適應，必須設該對象的父對象content高度自適應。
要設content高度自適應，也要設置其父對象的高度自適應。
最後更新：2017-04-02 15:15:17