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:
display :block;
position :value;
position :block;
, Es gibt verschiedene Anzeigewerte für HTML wie folgt: 1. kein Wert 2. Inline-Wert 3. Blockwert 4. Inline-Block-Wert 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. Unten sind die verschiedenen Beispiele aufgeführt. Dies ist ein normales Beispiel, das zeigt, wie die HTML-Anzeigeblockeigenschaft im HTML-Code wie folgt verwendet wird: Code: Ausgabe: In diesem Beispiel erstellen wir drei gleiche Blöcke und zeigen Daten dazwischen mithilfe des Anzeigeblocks wie folgt an: Code: Ausgabe: Dieses Beispiel enthält Elemente wie Kopfzeile, Fußzeile, Abschnitt, Seitenleiste usw. wie folgt: Code: Ausgabe: 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 display: [<display-outside> , <display-inside>] [<display - listitem>, <display -internal>, <display-box>]
{
display:none;
}{
display:inline;
}{
display:block;
}{
display : inline- block;
}Wie funktioniert die Blockanzeige in HTML?
Beispiele für HTML-Anzeigeblock
Beispiel #1
<!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>
Beispiel #2
<!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>
Beispiel #3
<!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>
Fazit
