質問があります？ _html/css_WEB-ITnose-htmlチュートリアル-php.cn

回复讨论(解决方案)

ホームページ

ウェブフロントエンド

htmlチュートリアル

質問があります？ _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:10 PM

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 一般用于绝对定位

举例给你看：

div1

div2

ここでコードを実行すると、位置決めがある場合のマージン値とトップ値の違いが明確にわかります
また、マージンは要素の外側のマージンを指します。相対要素の場合、特に位置決めがある場合~
つまり、使用範囲が異なります~

margin

margin-top はページの余白を指します
top は通常、絶対位置決めに使用されます
正解

誰かが解決してくれました！

例を挙げてみましょう:

まだ困惑しています!なぜ margin-top: 100 私が考えていたのは、div2 が div3 を拡張する、つまり div3 に対して 100 だけ下に移動するということでした。予想外に、彼は div3 も 100 だけ下に移動しました

margin が top に対してどのように相対的であるかを誰か教えてください。相対的とは何ですか?

たとえば、div2 はposition:relative; では、その margin-top: 100 は相対的ですか? では、その top: 100 は絶対的です

マージンとtop? Relative は相対的な意味です。

たとえば、div2 は、position:relative; です。その場合、top:relative は、絶対的な位置です。また、CSSを書くときは、pxという単位を持ってくるのが最善です。 -top: div3 に対して下に移動するのではなく、100px に移動します
.div3{ width:300px; height:300px; border:1pxsolid;}
div3 はそうではありません境界線を設定してください

境界線を設定すると次のようになります。めまいがする

ああ、わかりました、この相対位置と絶対位置を説明した資料はありますか？私はスタイルに混乱しています

まだ質問があります: では、margin-left:100 div3 は div2 と一緒に移動しませんか?その理由

http://www.hicss.net/use-margin-or-padding/

投稿者は CSS の基本を学ぶ必要があります

margin-top はマージンを指します

top は一般的に絶対位置決めに使用されます

これ

まだ質問がありますが、 margin-left:100 div3 は div2 では移動しませんか?なぜ

div3 が div2 の親レイヤーであるのか

div2 の左マージンは親レイヤーの左マージンに基づいています

したがって div3 は移動しません

3 階の回答からの引用:
例を示します:

xmlns="http://www.w3.org/1999/xhtml">

ここで、Firefox の内部 div は margin-top を使用します。外部 div の margin-top
解決策: CSS 属性を親レイヤーに追加します: display:inline-block; または overflow:hidden;

margin-top: はコンテンツと境界線の間の距離です

top: は距離ですコンテンツとコンテンツの間

margin-top は外縁を設定します距離
トップが配置されます
HTML div+css を学ぶには、ここにアクセスできます http://blog.sina.com.cn/u/2760399482

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。