Heim > Artikel > Web-Frontend > Ein tiefgreifendes Verständnis der CSS-Margin-Elemente

Ein tiefgreifendes Verständnis der CSS-Margin-Elemente

高洛峰Original: 2017-03-15 10:49:181527Durchsuche

Die vorherigen Wörter

Rand ist ein ganz besonderes Attribut unter mehreren Attributen des Boxmodells. Um nur einige Beispiele zu nennen: Nur der Rand zeigt nicht den Hintergrund des aktuellen Elements an, nur der Rand kann auf einen negativen Wert eingestellt werden, der Rand sowie die Breite und Höhe werden automatisch unterstützt und der Rand weist sehr seltsame Überlappungseigenschaften auf. In früheren Blogbeiträgen wurden die Grundkenntnisse der Marge und die detaillierte Verwendung der negativen Marge ausführlich vorgestellt. In diesem Artikel werden die wichtigsten Teile des äußeren RandsRands ausführlich vorgestellt, einschließlich Überlappung, automatische und ungültige Bedingungen

Überlappung

[Voraussetzung]

Randüberlappung wird auch Randzusammenführung genannt. Dafür gibt es zwei Voraussetzungen

1. Sie tritt nur bei Blockelementen auf (ausgenommen float, absolute und Inline-Block). Elemente)

2. Tritt nur in vertikaler Richtung auf (unabhängig vom Schreibmodus)

【Klassifizierung】

Die Randüberlappung umfasst die folgenden 3 Typen Situation

1. Benachbarte Geschwisterelemente

<style>
p{
    line-height: 2em;
    margin:1em 0;
    background-color: lightblue;
    display:inline-block;
    width: 100%;
}
</style>
<p>兄弟一</p>
<p>兄弟二</p>

2. Überlappen sich die Eltern-Kind-Ränder erneut

<style>
.box{
    background-color: pink;
    height:30px;
}
.inner{
    margin-top: 1em;
    background-color: lightblue;
}
</style>
<p class="box">
    <p class="inner">子级</p>
</p>

Bedingung

Im Vergleich zur Randüberlappung benachbarter Geschwisterelemente muss die Randüberlappung zwischen übergeordnetem und untergeordnetem Element die folgenden Bedingungen erfüllen (Überlappung zwischen Rand und Oberseite ( zum Beispiel):

a. Das übergeordnete Element ist kein BFC-Element

b Das übergeordnete Element hat keinen padding-top-Wert

c. Das übergeordnete Element Es gibt keinen border-top-Wert

d. Es gibt keine Inline-Elementtrennung zwischen dem übergeordneten Element und dem ersten untergeordneten Element

Wenn es sich um eine übergeordnete und untergeordnete Ebene mit margin -bottom handelt, wird Element d so geändert, dass zwischen dem übergeordneten Element und dem letzten untergeordneten Element keine Inline-Element-Trennung vorhanden ist, und das übergeordnete Element muss auch keine Höhe haben, Mindesthöhe, MaximalhöheBeschränkung

3. Leeres Blockelement

<style>
.box{
    background-color: lightgreen;
    overflow: hidden;
}   
.void{
    margin: 1em 0;
}
</style>
</head>
<body>
<p class="box">
    <p class="void"></p>
</p>
一行文字

Aus den Ergebnissen unten ist ersichtlich, dass die Ein leeres Blockelement sollte den übergeordneten Rand um 2em erweitern, aufgrund der Randüberlappung jedoch nur um 1em

Ebenso müssen einige Bedingungen für die Randüberlappung leerer Blockelemente erfüllt sein

a. Das Element hat keinen Randwert

b, das Element hat keinen Füllwert

c. Es gibt kein Inline-Element im Inneren

ist keine Höhe oder Mindesthöhe

【Regel】

Zwei vertikale Elemente Für Ränder verwendet der Browser den größeren Wert; wenn beide vertikalen Ränder auf negative Werte eingestellt sind, wählt der Browser den maximaler absoluter Wert der beiden Margen; wenn eine positive Marge mit einer negativen Marge kombiniert wird, beträgt die positive Marge Distanz minus dem absoluten Wert dieser negativen Marge

Einfach ausgedrückt bedeutet dies, dass der größte positive Wert genommen wird. Addieren der positiven und negativen Werte sowie des negativsten Werts

【Zweck】

Im Webseitenlayout betrachten wir den Rand aufgrund der Randüberlappung oft als „ Problemstil“ und verwenden Sie ihn so wenig wie möglich. Aber tatsächlich spielt es eine große Rolle

HTML-Dokument wurde ursprünglich zur Anzeige von Informationen erstellt. Unter der Voraussetzung, dass das HTML-Dokument nur den Standardstil verwendet und sich der obere und der untere Rand nicht überlappen, treten die folgenden Probleme auf: 1. Wenn bei fortlaufenden Absätzen oder Listen keine Randüberlappung vorliegt, ist der Abstand zwischen dem ersten und dem ersten Die letzten Elemente werden 1 mit anderen Geschwisterelementen angezeigt: 2. Das Layout ist unnatürlich. 2. Das Verschachteln oder direkte Platzieren eines nackten p an einer beliebigen Stelle im Web wirkt sich auf das ursprüngliche Layout aus, was den Web-Designprinzipien widerspricht ; 3. Die leeren, die zurückbleiben. Mehrere p-Tags wirken sich auf das ursprüngliche Leselayout aus.

Wir müssen also die Überlappung gut nutzen und können gleichzeitig „margin-top“ und „margin-bottom“ verwenden die Listenelemente. Auf diese Weise ist die Seitenstruktur robuster und das Entfernen oder Positionieren des letzten Elements zerstört nicht das ursprüngliche Layout

[Neues Attribut]

-webkit-margin- kollabieren

-webkit-margin-collapse: 9b07564349a7937cfa1ac1f506cd32d0(默认重叠) | 76e6b7d265160750af9791dbc962fcd8(取消) | cc56f414bf6b1ccd7e32d0de9c8d6735(分隔)

Dieses Attribut wird verwendet, um festzulegen, ob sich der Rand überlappt, und wirkt auf eines der beiden Elemente, bei denen eine Randüberlappung auftritt. Wenn beide dieses Attribut verwenden, ist eines auf „Verwerfen“ und das andere auf „Trennung“ eingestellt. Der Endeffekt ist eine überlappende Kollatierung

automatisch

nur Breite/Höhe und Rand Auto kann eingestellt werden. Detaillierte Informationen zu Auto wurden ausführlich in die visuelle CSS-Formatierung eingeführt. Im Folgenden wird nur ein Teil des Teils von Margin vorgestellt: Auto

[Warum Margin: Auto die vertikale Mitte nicht erreichen kann]

Die horizontale Richtung kann aufgrund der Breite der Blockebene in der Mitte liegen Das Element ist standardmäßig das übergeordnete Element auf der Ebene. Wenn Sie einen festen Wert für die Breite festlegen und den linken und rechten Rand auf „Auto“ setzen, können Sie den verbleibenden Platz gleichmäßig aufteilen

Die vertikale Richtung kann nicht zentriert werden, da die Höhe des Blockebenenelements standardmäßig auf die Inhaltshöhe eingestellt ist, die nicht direkt mit der Höhe des übergeordneten Elements zusammenhängt, wenn die oberen und unteren Ränder auf „Auto“ eingestellt sind auf 0 zurückgesetzt werden

[Warum Bilder bei Verwendung von margin:auto nicht horizontal zentriert werden können]

Bilder können nicht horizontal zentriert werden, ähnlich wie Elemente auf Blockebene, bei denen dies nicht möglich ist vertikal zentriert. Weil die Breite des Bildes standardmäßig auf seine eigene Breite eingestellt ist und nicht direkt mit der Breite des übergeordneten Elements zusammenhängt. Wenn der linke und der rechte Rand auf „Automatisch“ eingestellt sind, werden sie auf 0 zurückgesetzt

Um das Bild also horizontal zu zentrieren, müssen Sie es auf display:block element

【Vertikal erreichen“ einstellen Zentrierung】

Verwenden Sie margin:auto, um eine vertikale Zentrierung zu erreichen. Es gibt zwei Methoden:

1. Verwenden Sie writing-mode:vertical-lr;

writing-mode stellt die Seite dar Fließrichtung, die Standardeinstellung ist horizontal. Nach dem Wechsel in die vertikale Richtung kann eine vertikale Zentrierung erreicht werden, eine horizontale Zentrierung ist jedoch nicht mehr möglich

2. Ändern Sie das Element in ein absolut positioniertes -Element (IE7-Browser unterstützt dies nicht)

Nachdem Sie das Element in ein absolut positioniertes Element umgewandelt haben, legen Sie top:0;bottom:0; fest, sodass das absolut positionierte Element eine direkte Beziehung zur Höhe des positionierten übergeordneten Elements hat. Stellen Sie dann margin:0 auto; so ein, dass margin-top und margin-bottom den verbleibenden Raum gleichmäßig aufteilen, um den Effekt der vertikalen Zentrierung zu erzielen

Ungültige Situation

1. Inline-Elemente sind vertikal. Der Rand ist ungültig.

Da das vertikale Layout von Inline-Elementen hauptsächlich von der Zeilenhöhe und der vertikalen Ausrichtung vertikal-align beeinflusst wird, hat der vertikale Rand keinen Einfluss auf sie, also wird dies der Fall sein hat keinen Einfluss auf das vertikale Layout. Im Anzeigemodus zeigt der Randbereich nicht den Hintergrund des Elements an, sodass die Anzeige seiner eigenen Elemente nicht beeinträchtigt wird. Daher ist der vertikale Rand von Inline-Elementen ungültig

[Hinweis] Nicht einschließen inline-block oder Schreibmodus auf vertikal -lr case setzen

2. Der Rand einiger Tabellenelemente der Klasse ist ungültig

ae20bdd317918ca68efdc799512a9b39``92cee25da80fac49f6fb6eec5fd2c22a``06669983c3badb677f993a8c29d18845``a34de1251f0d9fe1e645927f19a896e8``581cdb59a307ca5d1e365becba940e05``879b49175114808d868f5fe5e24c4e0b``b6c5a531a458a2e790c1fd6421739d1c``b4d429308760b6c2d20d6300079ed38e Rand kann nicht festgelegt werden. Für das Anzeigeattribut ist die Anzeige ein tabellenbezogener Typ (ausgenommen Tabellenüberschrift, Tabelle, Inline-Tabelle), und die Randanweisung ist ungültig

3. Der Randwert der nicht positionierten Richtung des Das absolut positionierte Element scheint ungültig zu sein

Der Randwert der absoluten Positionierung ist immer gültig, aber da das absolut positionierte Element außerhalb des Dokumentflusses liegt und nichts mit anderen Elementknoten zu tun hat, ist der Effekt nicht sichtbar

4. Durch BFC verursachter Rand scheint ungültig zu sein

Wenn das linke Element float verwendet und das rechte Element overflow-hidden verwendet, um ein zweispaltiges adaptives Layout zu implementieren, wird das rechte Element verwendet margin-left Der Effekt ist nur sichtbar, wenn der Wert groß genug ist. Dies liegt daran, dass sich margin-left auf die linke Seite des übergeordneten Elements bezieht, nicht auf die rechte Seite des Bildes

5. Ungültiger Rand durch Inline-Features

A p enthält ein Bild, Wenn der obere Rand des Bildes einen bestimmten Wert erreicht, wird das Bild nicht mehr nach oben verschoben. Dies liegt daran, dass es sich bei dem Bild um ein Inline-Element handelt, das von der Funktion zur vertikalen Ausrichtung des Inline-Elements beeinflusst wird. Standardmäßige Grundlinienausrichtung. Nehmen Sie als Beispiel den hypothetischen Großbuchstaben X auf der Seite >

Das obige ist der detaillierte Inhalt vonEin tiefgreifendes Verständnis der CSS-Margin-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung des Border-Attributs des CSS-StilsNächster Artikel：Detaillierte Erläuterung des Border-Attributs des CSS-Stils

In Verbindung stehende Artikel

Mehr sehen