Heim > Artikel > Web-Frontend > So verwenden Sie Elemente auf Blockebene und Inline-Elemente richtig, um Webseiten-Layouteffekte zu erzielen

So verwenden Sie Elemente auf Blockebene und Inline-Elemente richtig, um Webseiten-Layouteffekte zu erzielen

WBOYOriginal: 2024-01-07 08:10:56579Durchsuche

Beim Layout von Webseiten verwenden wir häufig Elemente auf Blockebene und Inline-Elemente. Elemente auf Blockebene und Inline-Elemente sind zwei grundlegende Elementtypen in HTML und spielen im Webseitenlayout unterschiedliche Rollen. In diesem Artikel wird ausführlich erläutert, wie Elemente auf Blockebene und Inline-Elemente korrekt verwendet werden, um Webseiten-Layouteffekte zu erzielen, und es werden spezifische Codebeispiele bereitgestellt.

1. Eigenschaften und Anwendungsszenarien von Elementen auf Blockebene

Elemente auf Blockebene weisen die folgenden Eigenschaften auf:

Jedes Element auf Blockebene belegt seine eigene Zeile, das heißt, es wird automatisch umbrochen.
Die Breite von Elementen auf Blockebene beträgt standardmäßig 100 % des übergeordneten Elements und die Breite kann durch Festlegen des Breitenattributs angepasst werden.
Elemente auf Blockebene können verschiedene Attribute des Boxmodells festlegen, z. B. Rand, Abstand usw.
Elemente auf Blockebene können andere Elemente auf Blockebene und Inline-Elemente verschachteln.

Zu den üblichen Anwendungsszenarien von Elementen auf Blockebene gehören:

Grundstruktur des Seitenlayouts: Kopfzeile, Navigation, Abschnitt, Artikel, Seite, Fußzeile usw.
Textblöcke: p, h1~h6, div usw.
Liste: ul, ol usw.
Tabellen: Tabelle, Tr, TD usw.

Das Folgende ist ein Beispielcode, der Elemente auf Blockebene verwendet, um das Webseitenlayout zu implementieren:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 600px;
      margin: 0 auto;
    }
    .header {
      background-color: #f1f1f1;
      height: 100px;
    }
    .sidebar {
      background-color: #d3d3d3;
      float: left;
      width: 200px;
      height: 400px;
    }
    .content {
      background-color: #ffffff;
      float: right;
      width: 400px;
      height: 400px;
    }
    .footer {
      background-color: #f1f1f1;
      clear: both;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">头部</div>
    <div class="sidebar">侧边栏</div>
    <div class="content">内容区域</div>
    <div class="footer">底部</div>
  </div>
</body>
</html>

Im obigen Code ist Container ein Element auf Blockebene, das zur Aufnahme des gesamten Seiteninhalts verwendet wird. Kopfzeile, Seitenleiste, Inhalt und Fußzeile definieren jeweils die Kopfzeile, die Seitenleiste, den Inhaltsbereich und den unteren Rand der Webseite. Sie sind auch Elemente auf Blockebene. Durch das Festlegen von Attributen wie Breite und Float wird das Grundlayout der Seite erreicht.

2. Eigenschaften und Anwendungsszenarien von Inline-Elementen

Inline-Elemente haben die folgenden Eigenschaften:

Inline-Elemente belegen keine einzelne Zeile, das heißt, sie können in derselben Zeile wie andere Elemente angezeigt werden.
Die Breite eines Inline-Elements wird durch seinen Inhalt bestimmt und Breite und Höhe können nicht festgelegt werden.
Die Boxmodellattribute von Inline-Elementen wie Rand, Abstand usw. sind in vertikaler Richtung ungültig.
Inline-Elemente können keine Elemente auf Blockebene verschachteln, aber sie können andere Inline-Elemente verschachteln.

Übliche Anwendungsszenarien für Inline-Elemente sind:

Text: span, a, em, strong usw.
Bild: img.
Formularelemente: Eingabe, Schaltfläche usw.

Das Folgende ist ein Beispielcode, der Inline-Elemente verwendet, um das Webseitenlayout zu implementieren:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      text-align: center;
    }
    .container {
      display: inline-block;
      border: 1px solid #000000;
      padding: 20px;
    }
    .button {
      background-color: #f1f1f1;
      padding: 10px 20px;
      border-radius: 5px;
      text-decoration: none;
      color: #000000;
    }
  </style>
</head>
<body>
  <p>这是一个居中的段落。</p>
  <div class="container">
    <h3>标题</h3>
    <p>内容</p>
    <a href="#" class="button">按钮</a>
  </div>
</body>
</html>

Im obigen Code ist p ein Inline-Element, und sein Text wird zentriert, indem das text-align-Attribut auf „center“ gesetzt wird. Container ist ein Inline-Block-Level-Element. Es verwendet das Attribut display:inline-block, das in derselben Zeile angezeigt werden kann und Attribute wie Breite, Höhe und Rand festlegen kann. Button ist ein Inline-Element, indem Eigenschaften wie Abstand, Hintergrundfarbe und abgerundete Ecken festgelegt werden.

Zusammenfassung:

Sowohl Elemente auf Blockebene als auch Inline-Elemente spielen eine wichtige Rolle im Webseitenlayout. Die korrekte Verwendung von Elementen auf Blockebene und Inline-Elementen kann uns dabei helfen, verschiedene Effekte für das Webseitenlayout zu erzielen. Durch spezifische Codebeispiele können wir besser verstehen und beherrschen, wie Elemente auf Blockebene und Inline-Elemente für das Webseitenlayout verwendet werden. Ich hoffe, dieser Artikel kann den Lesern hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Elemente auf Blockebene und Inline-Elemente richtig, um Webseiten-Layouteffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html display margin padding input ul table td tr

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：Erfahren Sie mehr über Canvas: Entdecken Sie seine einzigartigen FunktionenNächster Artikel：Erfahren Sie mehr über Canvas: Entdecken Sie seine einzigartigen Funktionen

In Verbindung stehende Artikel

Mehr sehen