css中margin left與left的區別

研究下拉列表和彈出選單時比較所得：

1.直接在css中設定left生效的前提是必須設定父容器position:absolute或relative，如果不設定則會顯示為最近乙個定位的父物件左邊相關的位置：

測試**：

[html]view plain

copy

<

divstyle

="position:relative;top:100px;left:100px;border:1px solid blue;width:100px;height:100px;"

>

<

divid

="outer"

style

="position:relative;margin-top:25px;margin-left:25px;width:50px;height:50px;border:1px solid red;"

>

<

divid

="inner"

style

="position:absolute;left:15px;top:15px;width:25px;height:25px;border:1px solid green;"

>

div>

div>

div>

測試效果：

不設定紅線框的position，設定藍線框的position，綠線框的位置：

設定紅線框的position，設定藍線框的position，綠線框的位置：

2.設定margin-left則只會出現在父物件的左邊的相對位置，不考慮是否設定了position。

測試**：

[html]view plain

copy

<

divstyle

="position:relative;top:100px;left:100px;border:1px solid blue;width:100px;height:100px;"

>

<

divid

="outer"

style

="position:relative;margin-top:25px;margin-left:25px;width:50px;height:50px;border:1px solid red;"

>

<

divid

="inner"

style

="position:absolute;margin-left:15px;margin-top:15px;width:25px;height:25px;border:1px solid green;"

>

div>

div>

div>

不設定紅線框的position，設定藍線框的position，綠線框的位置：

設定紅線框的position，設定藍線框的position，綠線框的位置：

3.設定margin-right無法起到將element定位到右邊相距xx位置，但設定right可以。

測試**:

測試效果：

設定margin-right

設定right

css中margin left與left的區別

研究下拉列表和彈出選單時比較所得 測試 測試效果 不設定紅線框的position，設定藍線框的position，綠線框的位置 設定紅線框的position，設定藍線框的position，綠線框的位置 2.設定margin left則只會出現在父物件的左邊的相對位置，不考慮是否設定了position。...

CSS屬性中Display與Visibility

visibility屬性是隱藏元素但保持元素的浮動位置，而display實際上是設定元素的浮動特徵。visibility屬性用來確定元素是顯示還是隱藏，這用visibility visible hidden 來表示，visible表示顯示，hidden表示 僅 隱藏，不可恢復。當visibility...

css中的漸變與浮動

1 漸變 1 線性漸變 background image linear gradient angle,color point,color point ex background image linear gradient to bottom,f9f9f9,cdcdcd 2 徑向漸變 backgrou...