div css布局注意點

一 div居中

#container

margin:1px 2px 3px 4px;其中四個值分別代表上右下左(順時針)

margin:1px 2px;其中1px代表分別距瀏覽器上邊和下邊的距離，2px代表分別距左右的距離。

margin:0 auto; 0 代表距上下的距離，auto代表距左右的距離。當左右距離為auto的時候，瀏覽器自動測算時左右距離一致。

二 絕對定位

當某個div被設定為position:absolute，它本質上已經和其它物件分離開了，它的定位模式不影響其它物件，也不被其它物件影響。

#sample

表示距左邊距離為0px

例子:#left

#center

#right

這樣左右兩邊是寬度固定的兩個div，中間的div距瀏覽器左右兩邊分別為200px，正好留出了左右div寬度的位置，並且中間div的寬度自適應。

三 高度自適應

有的人覺得很簡單，直接設定height:100%即可，但是僅僅這樣做是不夠的。

必須明白的一點是：乙個物件的高度能否自適應，取決於它的父物件是否高度自適應。

例子一:

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

html,body

#content

例子二:

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

html,body

#content

#left

也就是說要設定left的高度自適應，必須設該物件的父物件content高度自適應。

要設content高度自適應，也要設定其父物件的高度自適應。

div css布局注意點

一 div居中 container margin 1px 2px 3px 4px 其中四個值分別代表上右下左 順時針 margin 1px 2px 其中1px代表分別距瀏覽器上邊和下邊的距離，2px代表分別距左右的距離。margin 0 auto 0 代表距上下的距離，auto代表距左右的距離。當左...

div css布局注意

1.在div中無任何元素是用 佔位。2 編寫css時 maincontent 寬高應加px，特別是設定背景時，必須加px.3.jsp中定義了input無邊框的css樣式 用 border 0px 一定要寫成 0px 不要寫成none 4.去掉 li中的小點 ul 加padding 0px li 加 ...

浮動布局注意點

網頁布局第一準則 多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。網頁布局第二準側 先設定盒子的大小,之後設定盒子的位置 浮動元素會脫離標準流 脫標 不再保留原先的位置 浮動的元素會一行內顯示並且元素頂部對齊，互相貼靠在一起沒有縫隙，如果父級寬度裝不下會另起一行顯示 浮動的元素會具有行內塊...