ホームページ >ウェブフロントエンド >htmlチュートリアル >質問があります？ _html/css_WEB-ITnose
質問があります？ _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:10:171014ブラウズ
margin-top和top到底什么区别！！！！！
<style>.div1{border:1px red solid;width:200px;height:100px;position:absolute;color:#FFFFFF;background:#33CCFF;}.div2{border:1px red solid;width:200px;height:100px;position:relative;background:#000000;color:#FFFFFF;margin-top:100px; //这里top：100px 的话div2就往下，如果 margin-top:100px;的话 ，为什么div1也会跟着往下}</style><body><div class="div1">div1</div><div class="div2">div2</div></body>
回复讨论(解决方案)
margin-top指页边空白
top 一般用于绝对定位
举例给你看：
b585974ae3b7dba3039af53a9593f9c4
383eb734b02b508089ba2d78eb4c6f68
93f0f5c25f18dab9d176bd4f6de5d30e
ebeda52af7641f7e715679a8472f8c69
9c3bca370b5104690d9ef395f2c5f8d1
c9ccee2e6ea535a969eb3f532ad9fe89
*{margin:0; padding:0;}
.div1{
border:1px red solid;
width:200px;
height:100px;
position:absolute;
color:#FFFFFF;
background:#33CCFF;
}
.div2{
border:1px red solid;
width:200px;
height:100px;
position:relative;
background:#000000;
color:#FFFFFF;
top:100px;
/*margin-top:100px; */
}
.div3{ width:300px; height:300px; background:#999; border:#666; position:relative;}
531ac245ce3e4fe3d50054a55f265927
6c04bd5ca3fcae76e30b72ad730ca86d
5439418a7c7f3c27b021f45cde278e1c
8a4a534d75f1e59067b19e1a5be6fbfbdiv116b28748ea4df4d9c2150843fecfba68
f7dd17b641c71717fc22492d2ad6417cdiv216b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
ここでコードを実行すると、位置決めがある場合のマージン値とトップ値の違いが明確にわかります
また、マージンは要素の外側のマージンを指します。相対要素の場合、特に位置決めがある場合~
つまり、使用範囲が異なります~
margin
margin-top はページの余白を指します
top は通常、絶対位置決めに使用されます
正解
誰かが解決してくれました！
例を挙げてみましょう:
deb2d450a12465d4e3c9099bd6f283a5
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
c01b69e0b0066eeb1370359f81a05d45 xmlns="http://www.w3.org/1999/xhtml">
93f0f5c25f18dab9d176bd4f6de5d30e
ここで、Firefox の内部 div は margin-top を使用します。外部 div の margin-top
解決策: CSS 属性を親レイヤーに追加します: display:inline-block; または overflow:hidden;
top: は距離ですコンテンツとコンテンツの間
margin-top は外縁を設定します 距離
トップが配置されます
HTML div+css を学ぶには、ここにアクセスできます http://blog.sina.com.cn/u/2760399482