margin的知識點

2021-08-03 14:50:58 字數 1080 閱讀 2644

margin的塌陷現象

標準文件流中,豎直方向的margin不能疊加,以較大的為準。不是標準流的盒子沒有塌陷現象。

盒子居中margin:0 auto;

margin的值可以為auto,表示自動,當left, right的值都為auto的時候,表示居中。

margin: 0 auto;表示上下0,左右auto。

注意:使用margin:0 auto的盒子必須有width。

只有標準流的盒子才能使用該方式居中。

只能居中盒子,而不是居中文字,居中文字要用text-align: center;來實現。

善於使用父親的padding,而不是兒子的margin

如果父親沒有border,那麼兒子實際上踹的是流,踹的是行,所以父親整體會掉下來。

type="text/css">

* div

pstyle>

文字p>

div>

body>

父親下來了:

兒子下來了:

關於margin的ie6相容問題

ie6雙倍margin bug。

當出現連續浮動的元素,攜帶和浮動方向相同的margin時,隊首的元素,會出現雙倍margin。

解決方案:

1. 使浮動的方向和margin的方向相反,float:left 和 margin: right配合使用。

2. 使用hack,_margin_left,你懂得 :)

ie6的3px bug

右浮動,但是使用了margin-left,ie6會多出3px。

解決方法:

不用管,因為根本就不允許用兒子踹父親(使用padding)。所以,如果你出現了3px bug,說明你的**不標準。

HTML中margin外邊距的基本知識點

margin 外邊距可以改變盒子和盒子之間的距離,在進行布局時,遵循以下原則,從上往下 從左往右 設定margin top會將盒子自身往下推 margin bottom會將與其相鄰同級元素向下推,一般我們在布局同級元素之間優先使用margin top來按照從上往下的原則進行樣式設定 設定margin...

TestLink知識點Mantis知識點

testlink知識點 1 testlink系統提供了六種角色 a guest 只有讀的許可權,適合於檢視測試用例和測試需求,以及專案分析的使用者。b testdesigner 可以開展測試用例和測試需求的所有工作。c tester 只能執行測試用例。d senior tester 可以檢視和維護測...

python大一知識點 python知識點複習

放假歸來,這幾天複習了一下好久不用的python,總結了一下知識點。語法基礎tuple與list的異同都由多個元素組成 tuple由 組成,list由組成 tuple不可變,list可變 tuple表示的是一種結構,而list表示的是多個事物的集合 tuple操作比list快 字串用法要點 轉義符和...