Heim > Artikel > Web-Frontend > HTML-Anzeigeblock

HTML-Anzeigeblock

WBOYOriginal: 2024-09-04 16:39:161029Durchsuche

Der HTML-Anzeigeblock ist eine der wichtigsten Positionseigenschaften von HTML und für die Platzierung von Elementen auf Blockebene im Anzeigeblock verantwortlich. Beim Entwerfen einer Webseite ist es immer wichtig, die Elemente richtig an einer bestimmten Position anzuordnen. Das Festlegen der richtigen Position für das Layout ist eine der wichtigsten Aufgaben. Standardmäßig wurde die Anzeigeeigenschaft als Inline übernommen. Dies beginnt immer mit einer neuen Linie und streckt die Elemente von links nach rechts, um den gesamten Raum einzunehmen. Man kann Höhen- und Breiteneigenschaften für die Elemente auf Blockebene festlegen und es ist möglich, andere Inline- oder Blockelemente darin einzuschließen.

Syntax:

Jedes einzelne Element wird an einer bestimmten Stelle auf der Webseite platziert. Der Eigenschaftswert hilft uns zu definieren, wie er auf der Webseite angezeigt werden soll; es wird wie folgt sein:

display :block;

Die Syntax zur Anzeige mit Positionswert lautet wie folgt:

position :value;

In der obigen Syntax ist die Position der Platzierungsbereich, in dem tatsächliche Elemente platziert werden. Im Wert können wir einen Block zum Anzeigen von Elementen auf Blockebene verwenden. Es wird also wie folgt verwendet:

position :block;

Dieser HTML-Block enthält Elemente wie
,
,
, außerdem können Inline-Elemente innerhalb des Anzeigeblocks verwendet werden.
Mit Hilfe von CSS kann man eine Anzeigeeigenschaft mit einigen angegebenen Werten definieren, wie zum Beispiel:

display: [<display-outside> , <display-inside>] [<display - listitem>, <display -internal>, <display-box>]

Es gibt verschiedene Anzeigewerte für HTML wie folgt:

1. kein Wert

{
display:none;
}

2. Inline-Wert

{
display:inline;
}

3. Blockwert

{
display:block;
}

4. Inline-Block-Wert

{
display : inline- block;
}

Alle oben genannten Werte helfen uns, das Layout festzulegen und zu steuern; Meistens sind die Werte für das Layout entweder Inline- oder Blockwerte. Der Anzeigeblock beginnt mit einer neuen Zeile, die die gesamte Breite des Containers abdeckt, um Elemente auf der Webseite in den HTML-Anzeigeblock einzufügen. Mit Elementen auf Blockebene können Sie keine anderen Blockelemente darin verwenden.

Wie funktioniert die Blockanzeige in HTML?

Dieses Format verwendet Kästchen, die in vertikaler Richtung hintereinander angeordnet sind. Es beginnt am oberen Rand des enthaltenden Blocks.
Diese Blöcke werden mit vertikalem Abstand zwischen ihnen unter Verwendung des entsprechenden Platzes verwaltet, der im CSS als Margin-Eigenschaft bezeichnet wird.
Bei diesem Formatierungsprozess für den Anzeigeblock wird die linke Außenseite jedes Kästchens an die linke Seite seines enthaltenden Blocks angehängt. Das Gleiche passiert mit den rechten Kanten der enthaltenden Blöcke.
Eine andere Möglichkeit, einen Anzeigeblock in HTML zu definieren, besteht darin, Blockelemente in horizontaler Richtung nach unten zu platzieren, wie im Englischen. Das Layout wird unten nacheinander vertikal angeordnet.
Da wir Ränder verwenden, hilft es, zwischen zwei Kästchen oder Elementen Platz zu schaffen, der die Elemente voneinander trennt.
Elemente auf Blockebene nehmen den gesamten Platz in Inline-Richtung ein und trennen unsere Elemente in ihren enthaltenden Block.
Wie wir wissen, können wir darin Höhen- und Breiteneigenschaften für das Layout festlegen, sodass es hilfreich ist, Blöcke einzeln untereinander zu platzieren.

Beispiele für HTML-Anzeigeblock

Unten sind die verschiedenen Beispiele aufgeführt.

Beispiel #1

Dies ist ein normales Beispiel, das zeigt, wie die HTML-Anzeigeblockeigenschaft im HTML-Code wie folgt verwendet wird:

Code:

<!DOCTYPE html>
<html>
<style>
.block_demo{
border: 2px solid red;
width:50%;
display:block;
}
</style>
<body>
<h4>List of Color Names:</h4>
<div class="block_demo">
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Orange</li>
<li>Purple</li>
<li>Pink</li>
</ul>
</div>
<h4>List of Mobile Brands:</h4>
<div class="block_demo">
<ol>
<li>Apple</li>
<li>SAMSUNG</li>
<li>NOKIA</li>
<li>MOTOROLA</li>
<li>LENOVO</li>
<li>OPPO</li>
</ol>
</div>
</body>
</html>

Ausgabe:

HTML-Anzeigeblock

Beispiel #2

In diesem Beispiel erstellen wir drei gleiche Blöcke und zeigen Daten dazwischen mithilfe des Anzeigeblocks wie folgt an:

Code:

<!DOCTYPE html>
<html>
<head>
<title>HTML Display box</title>
<style>
#block1{
height: 100px;
width: 400px;
background: orange;
display: block;
}
#block2{
height: 100px;
width: 400px;
background: white;
display: block;
}
#block3{
height: 100px;
width: 400px;
background: lightgreen;
display: block;
}
.flag {
margin-left:20px;
font-size:40px;
font-weight:bold;
color:blue;
}
.demo {
font-size:20px;
margin-left:20px;
}
.main {
margin:50px;
text-align:center;
border: 1px solid black;
}
</style>
</head>
<body>
<div class = "flag">National Flag of India</div>
<div class = "demo">Meaning of National Flag</div>
<div class = "main">
<div id="block1">The saffron color of the flag indicates a symbol of courage and sacrifice. This is also known as Bhagwa color. It’s for renunciation . It represents fire. </div>
<div id="block2">The white color of our flag represents honesty, peace, purity. It focus on importance of maintaining peace in the country.
<img src="AC.png" style="height:60px; width:70px;">
</div>
<div id="block3">The green color represents faith and chivalry. It’s for nature. It is a symbol of prosperity and life. It also used for representing auspiciousness of the Indian Motherland..</div>
</div>
</body>
</html>

Ausgabe:

HTML-Anzeigeblock

Beispiel #3

Dieses Beispiel enthält Elemente wie Kopfzeile, Fußzeile, Abschnitt, Seitenleiste usw. wie folgt:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Display Block</title>
<style>
body {
margin: 0;
}
.header {
padding: 10px;
text-align: center;
background-color:cadetblue;
color: white;
}
.navbar {
overflow: hidden;
background-color:darkkhaki;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 10px 10px;
}
.navbar a.right {
float: right;
}
.navbar a:hover{
background-color: #eee;
color: black;
}
.row {
display: flex;
flex-wrap: wrap;
}
.section {
flex: 10%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
flex: 80%;
background-color: white;
padding: 20px;
}
.footer{
padding:3px;
background-color:darkcyan;
width:100%;
}
</style>
</head>
<body>
<div class="header">
<h1> HEADER of Webpage</h1>
</div>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About US</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<a href="#" class="right">SignUp</a>
</div>
<div class="row">
<div class="section">
<h2>Sidebar comes here</h2>
</div>
<div class="main">
<h2></h2>
<p></p>
<br>
<div class="row">
<div class="section" style="margin-top:-50px;">
<h2>(Example of section)</h2>
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>

Ausgabe:

HTML-Anzeigeblock

Fazit

Aus all den oben genannten Informationen haben wir gelernt, dass die HTML-Anzeigeblockeigenschaft in HTML uns dabei hilft, unser Layout in die richtige Struktur zu bringen. Diese Blöcke im Layout können entweder in vertikaler oder horizontaler Richtung nacheinander platziert werden. Es enthält Elemente wie

css html define for while format include using Property default this location display position margin

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：HTML-AusrichtungszentrumNächster Artikel：HTML-Ausrichtungszentrum

In Verbindung stehende Artikel

Mehr sehen

HTML-Anzeigeblock

Wie funktioniert die Blockanzeige in HTML?

Beispiele für HTML-Anzeigeblock

Beispiel #1

Beispiel #2

Beispiel #3

Fazit

-

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

In Verbindung stehende Artikel

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