HTML-Rand links-HTML-Tutorial-php.cn

HTML-Rand links

王林

Freigeben： 2024-09-04 16:48:19

Original

470 Leute haben es durchsucht

HTML margin-left legt den Randbereich auf der linken Seite eines Elements fest. HTML verfügt über viele vordefinierte Tags, die zum effektiveren Erstellen von Webseiten verwendet werden. Darüber hinaus sind die CSS-Stile auf den Websites fortschrittlicher und dekorierter. Durch die Verwendung dieser Terminologie wird der Benutzer die Websites häufiger ansprechen, was aus geschäftlicher Sicht hilfreich ist. HTML-Randeigenschaften sind eine der Funktionen, die beim Erstellen des Außenraums der HTML-Webbildschirme hilfreich sind. Darüber hinaus gibt es verschiedene Typen wie „Rand links“, „Rand rechts“, „Rand oben“ und „Rand unten“; Hierbei handelt es sich um einige Arten, mit denen Sie das Layout des Umrissraums auf den Webseiten festlegen können. Jeder Typ hat seine möglichen Längenwerte.

Syntax:

HTML-Ränder haben unterschiedliche Stile, je nachdem, wo wir sie in den Dokumenten verwendet haben. Wenn wir den HTML-Rand verwenden, werden Dokumente im CSS-Stil als Ränder verwendet.

<html>
<head>
<style>
div
{
Margin:values;
}
</style>
</head>
</html>

Nach dem Login kopieren

Die oben genannten Codes stellen die grundlegende Syntax dar, die wir für die HTML-Randstile der Webseiten besprechen werden. In HTML wird das Dom-Muster hauptsächlich für die HTML-Objekte verwendet, die am hinteren Ende der Codes funktionieren. HTML-Ränder hängen vom Element ab, wobei unterschiedliche Ränder auf das Webseitendokument angewendet werden. Wir können Javascript-Funktionen verwenden, um die Ränder auf den Webseiten automatisch festzulegen.

Wie funktioniert HTML-Rand links?

Die Ränder geben eine feste Länge unter Verwendung von HTML- und CSS-Standardstileinheiten an; auf den Webseiten sind sogar negative Werte erlaubt. Zuvor legen wir die Eigenschaft „margin-left“ so fest, dass sie einige Werte hat, die wir entweder zuweisen oder die im Dokument zugewiesene Standardwerte haben. Der Standardwert ist „auto“, andernfalls deklarieren wir die Werte als „inherit“, „length“ und „percentage“. Jeder der angegebenen Werte mit einem anderen Satz von darauf basierenden Unterwerten verwendet die margin-left-Eigenschaft Werte.

Die Länge berechnet die Länge oder feste Länge der CSS-Einheiten. Wir berechnen einen Prozentsatz der Breite und Höhe basierend auf den HTML-Blöcken. Dieses Feld erlaubt auch negative Werte. Wenn der angenommene Rand ein Top-Wert-Attribut hat, verwendet der Benutzerbrowser den Wert als Prozentsatz der Breite. Die Höhe der Blöcke wird nicht angegeben.

Der Benutzerbrowser berechnet den Wert für den linken Rand automatisch. Dies hängt vom verfügbaren Platz im äußeren Bereich des Dokuments oder der Webseiten ab. Der Wert „Erben“ wird hauptsächlich für die Eltern-Kind-Beziehung des HTML-Inhalts verwendet. Es gibt die Breite der margin-left-Eigenschaft mit Werten an. Bei der Berechnung der Höhe und Breite der HTML-Elemente in den Webseiten berücksichtigen wir in der Regel nicht die Ränder für diese Berechnung; Wir schließen andere HTML-Elemente wie Auffüllungen, andere Inhaltsbereiche, Rahmen usw. ein. Berechnen Sie nur den verfügbaren Platz der HTML-Element-Margin-Size-Eigenschaft des Dokuments.

Angenommen, wir deklarieren zwei Sätze von Rändern im HTML, die kollidieren. Beispielsweise weisen wir einen Block mit einem rechten Rand und einem Gleitkomma nur auf der rechten Seite und einen anderen Block mit einem linken Rand zu, der mit seinem Gleitkomma identisch ist. Der größere Randpunkt bleibt unverändert und verschiebt sich nicht zu kleineren Werten. In diesem Fall kollabiert der kleinere Randbereich des Blocks und wird auf Webseiten möglicherweise nicht richtig angezeigt, sodass er möglicherweise von den Webbildschirmen verschwindet. Im Allgemeinen sind die Ränder transparent.

Wir verwenden „margin“ als Abkürzungseigenschaft, um die Breite anzugeben, anstatt andere Randspezifikationen in Clustercodes zu verwenden. Dieser Ansatz vereinfacht das Lesen von Codes in den Entwicklerbereichen. Manchmal können wir wie bei anderen Randtypen Werte für den unteren Rand festlegen. Beispielsweise unterscheiden wir in CSS-Stilen eine Klasse von einer anderen. Wir können die möglichen Längenwerte jeder Eigenschaft überall dort angeben, wo wir in den HTML-Tag-Elementen den Längenwert verwenden, der gleich ist und sich auf die Höhe der Textschriftarten und Elementschriftarten bezieht.

Wenn Sie in IE 4 oder späteren Versionen ein Objekt zu einer Webseite hinzufügen, wird der Randwert in HTML-Dokumenten absolut, anstatt im Kompatibilitätsmodus bei Verwendung eines Browsers einen Standardwert von IE Version 3 für Objektränder anzunehmen. Der Wert der Margin-Eigenschaft wird in den HTML-Tabellenelementen nicht unterstützt. und Objekte in IE 4, aber es wird in IE 3 funktionieren. Wenn wir die Randwerte mit

oder

Tags in IE 4-Versionen.

Beispiele für HTML margin-left

Unten finden Sie Beispiele für HTML margin-left:

Beispiel #1

Code:

<html>
<head>
<style>
{
margin: 2;
}
div {
width: 210px;
height: 130px;
background:green;
border-radius: 13px;
}
.sample {
background-color: green;
margin-left: 3%;
}
.sample1 {
background-color: yelllow;
}
.sample2 {
background-color: solid green;
margin-left: -13%;
}
</style>
</head>
<body>
<div id="sample2">
<marquee> Welcome To My Domain</marquee>
</div>
</body>
</html>

Nach dem Login kopieren

Ausgabe:

HTML-Rand links

Beispiel #2

Code:

<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<p>
<marquee>Welcome To My Domain</marquee>
</p>
</div>
</html>

Nach dem Login kopieren

Ausgabe:

HTML-Rand links

Beispiel #3

Code:

<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<button type="button" onclick="samples()">Set margin</button>
</div>
<script>
function samples() {
document.getElementById("sample").style.margin-left = "11px 23px 34px 47px";
}
</script>
</html>

Nach dem Login kopieren

Ausgabe:

HTML-Rand links

Die obigen drei Beispiele zeigen drei verschiedene Verwendungsmöglichkeiten der Randeigenschaften; Das erste Beispiel verwendet die wesentliche Margin-Eigenschaft für CSS-Stil und HTML. Das zweite Beispiel erstellt HTML-Tabellen und legt die margin-left-Eigenschaftswerte der Webseite fest. Das letzte Beispiel folgt dem gleichen Prozess, aber JavaScript legt die Randwerte automatisch fest.

Fazit

In HTML haben wir den Margin-Eigenschaftstyp als margin-left gesehen; Auf dieser Grundlage haben wir die HTML-Tabellen, Bilder und Videos geändert; Außerdem werden wir das Layout in den HTML-Dokumenten auf „Rand links“ ausrichten und festlegen. Einige Elemente unterstützen HTML5 aufgrund der Browserkompatibilität nicht.

Das obige ist der detaillierte Inhalt vonHTML-Rand links. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!