一 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高度自適應,也要設定其父物件的高度自適應。
woshixuye111
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 加 ...
浮動布局注意點
網頁布局第一準則 多個塊級元素縱向排列找標準流,多個塊級元素橫向排列找浮動。網頁布局第二準側 先設定盒子的大小,之後設定盒子的位置 浮動元素會脫離標準流 脫標 不再保留原先的位置 浮動的元素會一行內顯示並且元素頂部對齊,互相貼靠在一起沒有縫隙,如果父級寬度裝不下會另起一行顯示 浮動的元素會具有行內塊...