當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

div+css布局注意点

發布時間：2025/3/15 编程问答 13 豆豆

生活随笔收集整理的這篇文章主要介紹了 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%即可，但是僅僅這樣做是不夠的。

必須明白的一點是：一個對象的高度能否自適應，取決于它的父對象是否高度自適應。

例子一:

要想讓content的div高度自適應，必須這樣設置

html,body{ height:100%; }

#content{ height:100%; }

例子二:

要想讓left的div高度自適應，必須這樣設置

html,body{ height:100%; }

#content{ height:100%; }

#left{ height:100%; }

也就是說要設置left的高度自適應，必須設該對象的父對象content高度自適應。

要設content高度自適應，也要設置其父對象的高度自適應。

本文轉自IT徐胖子的專欄博客51CTO博客，原文鏈接http://blog.51cto.com/woshixy/1036018如需轉載請自行聯系原作者

woshixuye111

以上是生活随笔為你收集整理的div+css布局注意点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。