Umfassendes Verständnis der CSS-Marge
1. Der Rand kann negativ sein
Im Box-Modell können die Breite/Höhe, der Abstand und der Rand des Inhaltsbereichs nicht negativ sein, aber der Rand ist eine Ausnahme, er kann negativ sein.
Ich weiß nicht viel über die Fähigkeiten der Verwendung negativer Margin-Werte. Ich werde in Zukunft mehr hinzufügen, wenn ich die Gelegenheit dazu habe. Hier ist eine klassische Anwendung Floating, um ein flüssiges Layout zu erreichen, das die DOM-Struktur nicht verändert.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不改变DOM结构的流体布局</title>
<style>
.container {
width:600px;
margin-left: auto;
margin-right: auto;
background-color: orange;
font-size: 16px;
line-height: 1.5;
}
.box1 {
width:100%;
float:left;
}
.box2 {
margin-right: 220px;
padding-left: 20px;
}
img {
width:200px;
float:left;
margin-left:-200px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="box1">
<div class="box2">
<h3>不改变DOM位置的流体布局</h3>
<p>假如有一段文本和一幅图像，在DOM节点中，文本在前，图像在后，怎么能把图像定位到右边呢？</p>
<p>通常的做法是，调换DOM节点中图像与文本的位置，让图像在前，文本在后，然后将图像浮动到右边即可。</p>
<p>但这样改变DOM节点顺序始终不妥，还有什么更好的方法呢？</p>
<p>下面就介绍一种新的思路来完成布局。</p>
<ul>
<li>将文本用div包起来，定义为box1；现在的结构是一个box1和一个img。</li>
<li>将box1宽度设为100%，左浮动；将img设置一个宽度，也左浮动，然后margin-left设为负的宽度值；此时图像就定位到文本的右边啦。</li>
<li>但是有一个问题，图像盖住了文本内容，这可怎么办？</li>
<li>重点来了，在box1中增加一个box2，box2把文本全部包起来，然后margin-right设为图像的宽度（+额外的间距），这样就解决问题啦！</li>
</ul>
</div><!--关闭box2-->
</div><!--关闭box1-->
<img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg" alt="a picture" style="width:200px;height:300px" />
</div><!--关闭container-->
</body>
</html>2. Der prozentuale Wert des Rands
Wenn der Wert des Randattributs ein Prozentsatz ist, wird er immer basierend auf der Breite des übergeordneten Elements berechnet.
Schauen Sie sich bitte die Demo unten an, die mich lange gequält hat. . . Ich habe es nur zu spät herausgefunden und es würde mich zum Weinen bringen, wenn ich zu viel darüber reden würde. . .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin的百分数值</title>
<style>
.container {
width: 500px;
height: 300px;
margin: 50px auto;
background-color: orange;
border: 1px solid black;
}
.box {
width: 250px;
height: 150px;
margin-left: auto;
margin-right: auto;
background-color: cyan;
}
.box1 {
margin-top: 75px;
margin-bottom: 75px;
padding: 5px;
}
.box2 {
margin-top: 25%;
margin-bottom: 25%;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">
<p>父元素的高度为300px，子元素的高度为150px，只要margin-top和margin-bottom都为75px，这个盒子就能垂直居中。</p>
<p>OK，居中啦！！！</p>
</div>
</div>
<div class="container">
<div class="box box2">
<p>既然子元素的高度是父元素高度的50%，那么只要margin-top和margin-bottom都为25%，应该也能垂直居中。</p>
<p>额，这什么鬼？说好的居中呢？</p>
</div>
</div>
</body>
</html>3. Das Zusammenführen von Rändern in vertikaler Richtung
Dieses Problem verursacht oft Verwirrung, aber Sie müssen sich nur einen Satz merken, der zusammengeführt wird Solange sie in engem Kontakt stehen, verschmelzen sie, und nur enger Kontakt wird verschmelzen.
Das Zusammenführen von Rändern in vertikaler Richtung ist eigentlich leicht zu verstehen, wenn es bei benachbarten Elementen auftritt, aber wenn es zwischen einem übergeordneten Element und einem untergeordneten Element auftritt, ist es etwas seltsam.
Sehen wir uns ein Beispiel an:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直方向上的margin合并</title>
<style>
.container {
width: 500px;
height: 300px;
margin: 50px auto;
background-color: orange;
}
.box {
width: 300px;
height: 200px;
margin-left: auto;
margin-right: auto;
background-color: cyan;
margin-top: 25px;
padding: 5px;
}
.border {
border: 1px solid black;
/*padding: 1px;*/
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<p>父元素的margin-top为50px，子元素的margin-top为25px；</p>
<p>咦，子元素的margin-top呢？为什么都顶到父元素上边界了？</p>
<p>额，因为父元素与子元素的margin-top亲密接触了呀，所以它们合并在一起了啊。</p>
</div>
</div>
<div class="container border">
<div class="box">
<p>可是我就是想让子元素距离父元素的上边界25px啊，我不想让它们合并呀。</p>
<p>很简单，给父元素加个边框，它们就无法亲密接触了，就不会合并了啊。</p>
<p>或者给父元素设置padding也是可以的喔。</p>
</div>
</div>
</body>
</html>Methoden zur Vermeidung von Randverschmelzungen in vertikaler Richtung: Fügen Sie Rahmen oder Polsterungen zum übergeordneten Element hinzu, um den engen Kontakt zwischen den Rändern des übergeordneten Elements zu unterbrechen Element und das untergeordnete Element Can.
Regeln für die Randzusammenführung:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin合并规则</title>
<style>
.container {
width: 300px;
height: 500px;
margin: 50px;
background-color: orange;
float: left;
border: 1px solid black;
}
.box1,.box2,.box3,
.box4,.box5,.box6 {
width: 200px;
height: 150px;
margin: 30px auto;
background-color: cyan;
text-align: center;
line-height: 150px;
}
.box1 {
margin-bottom: 30px;
}
.box2 {
margin-top: 20px;
}
.box3 {
margin-bottom: 30px;
}
.box4 {
margin-top: -30px;
}
.box5 {
margin-bottom: -30px;
}
.box6 {
margin-top: -50px;
background-color: green;
}
p {
width: 220px;
margin:10px auto;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
<p>box1的margin-bottom为30px，box2的margin-top为20px，两个margin都是正数，取绝对值大的。</p>
</div>
<div class="container">
<div class="box3">box3</div>
<div class="box4">box4</div>
<p>box3的margin-bottom为30px，box4的margin-top为-30px，两个margin一正一负，相加。</p>
</div>
<div class="container">
<div class="box5">box5</div>
<div class="box6">box6</div>
<p>box5的margin-bottom为-30px，box6的margin-top为-50px，两个margin都是负数，取绝对值大的。</p>
</div>
</body>
</html>1. Beide Ränder sind positive Zahlen, nehmen Sie den größeren Absolutwert;
2 Eine Marge ist eine negative Zahl, addieren Sie sie.
3. Beide Margen sind negative Zahlen, nehmen Sie den größeren Absolutwert.
Das obige umfassende Verständnis der CSS-Marge ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.
Weitere umfassende Informationen zu CSS-Margen und verwandte Artikel finden Sie auf der chinesischen PHP-Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices
Mar 08, 2025 am 09:45 AM
Dies ist der 3. Beitrag in einer kleinen Serie, die wir in Form von Barrierefreiheit gemacht haben. Wenn Sie den zweiten Beitrag verpasst haben, lesen Sie "Verwalten des Benutzerfokus mit: Fokus-Sichtbar". In
Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework
Mar 07, 2025 am 11:33 AM
Dieses Tutorial zeigt, dass professionelle JavaScript-Formulare mithilfe des Frameworks Smart Forms erstellt werden (Hinweis: Nicht mehr verfügbar). Während der Rahmen selbst nicht verfügbar ist, bleiben die Prinzipien und Techniken für andere Formbauer relevant.
Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen
Mar 09, 2025 pm 12:53 PM
Die CSS-Box-Shadow- und Umrisseigenschaften haben Thema gewonnen. JSON-Unterstützung in WordPress 6.1. Sei ein paar Beispiele für die Funktionsweise in realen Themen und welche Optionen wir diese Stile auf WordPress -Blöcke und Elemente anwenden müssen.
Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut
Mar 02, 2025 am 09:03 AM
Der Aufbau eines Inline -Texteditors ist nicht trivial. Der Prozess beginnt damit, dass das Zielelement bearbeitbar wird und potenzielle SyntaxE -Ausnahmen behandelt. Erstellen Sie Ihren Editor Um diesen Editor zu erstellen, müssen Sie den Inhalt dynamisch ändern
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)
Mar 04, 2025 am 10:22 AM
In diesem Artikel werden die auf dem Envato -Markt verfügbaren Top -Skripte für PHP -Formulierungen untersucht und deren Funktionen, Flexibilität und Design verglichen. Lassen Sie uns vor dem Tauchen in bestimmte Optionen verstehen, was ein PHP -Formular Builder ist und warum Sie einen verwenden würden. Eine PHP -Form
Datei hochladen mit Multer in node.js und ausdrücken
Mar 02, 2025 am 09:15 AM
Dieses Tutorial führt Sie durch das Erstellen eines Datei -Upload -Systems mit Node.js, Express und Multer. Wir werden die Hoch- und mehrere Datei -Uploads behandeln und sogar das Speichern von Bildern in einer MongoDB -Datenbank zum späteren Abrufen demonstrieren. Richten Sie zunächst Ihr Projec ein
