div+css佈局注意點

科技探索者發表於2017-11-22
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 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高度自適應，也要設定其父物件的高度自適應。

本文轉自IT徐胖子的專欄部落格51CTO部落格，原文連結http://blog.51cto.com/woshixy/1036018如需轉載請自行聯絡原作者


woshixuye111


相關文章