Was ist der Unterschied zwischen Anzeige: Block, Anzeige: Inline und Anzeige: Inline-Block?-CSS-Tutorial-php.cn

Was ist der Unterschied zwischen Anzeige: Block, Anzeige: Inline und Anzeige: Inline-Block?

Die display in CSS wird verwendet, um das Layout und die Präsentation von HTML -Elementen zu steuern. Die Werte block , inline und inline-block beeinflussen, wie sich Elemente in Bezug auf ihr Layout und die Interaktion mit den umgebenden Elementen unterschiedlich verhalten.

Anzeige: Block : Elemente mit dieser Eigenschaft werden als Elemente auf Blockebene angezeigt. Sie beginnen mit einer neuen Linie und nehmen die volle Breite zur Verfügung, die sich von links nach rechts von ihrem Behälter erstrecken. Elemente auf Blockebene haben typischerweise Margen, Polsterung und Grenzeigenschaften, die den Raum um sie herum beeinflussen. Beispiele für Blockebene-Elemente sind standardmäßig <div> , <code><p></p> und <h1></h1> durch <h6></h6> .
Anzeige: Inline : Elemente mit dieser Eigenschaft werden als Elemente auf Linienebene angezeigt. Sie beginnen nicht mit einer neuen Linie und nehmen nur so viel Breite, wie dies erforderlich ist. Sie können keine oberen und unteren Ränder haben und ihre Breite und Höheneigenschaften gelten nicht. Beispiele für Inline -Elemente sind standardmäßig <span></span> , <a></a> und <img alt="Was ist der Unterschied zwischen Anzeige: Block, Anzeige: Inline und Anzeige: Inline-Block?" > .
Anzeige: Inline-Block : Dies ist eine Mischung aus block und inline . Elemente, die auf inline-block eingestellt sind, werden inline-wie Inline-Elemente angezeigt, ermöglichen jedoch auch die Verwendung von Eigenschaften der Höhen- und Breite sowie der oberen und unteren Ränder wie Blockelemente. Dies macht inline-block nützlich, um Elemente zu erstellen, die nebeneinander sitzen sollten, aber auch eine definierte Größe haben müssen.

Wie wirkt sich die Verwendung von Displays: Inline-Block auf das Layout von Elementen auf einer Webseite aus?

Verwenden von display: inline-block wirkt sich erheblich auf das Layout von Elementen auf einer Webseite aus, indem sie auf derselben Zeile sitzen können, während Sie dennoch Dimensionen und andere blockähnliche Eigenschaften angeben können. Hier sind einige Schlüsseleffekte:

Horizontale Ausrichtung : Elemente mit display: inline-block kann horizontal nebeneinander in einem Container ausgerichtet werden, anstatt auf einer neuen Linie wie Blockelemente zu beginnen. Dies kann nützlich sein, um Navigationsmenüs, Galerien oder ein anderes Layout zu erstellen, bei dem Elemente nebeneinander sein müssen.
Abmessungen und Abstand : Im Gegensatz zu display: inline können inline-block Elemente Breiten und Höhen sowie obere und untere Ränder definierte. Dies ermöglicht eine genauere Steuerung über das Layout, was nützlich ist, wenn Sie Elemente von einer bestimmten Größe oder einer bestimmten Art und Weise verabreicht haben.
Vertikale Ausrichtung : Inline-Block-Elemente können die vertical-align Eigenschaft verwenden, um eine feinere Kontrolle darüber zu ermöglichen, wie sie vertikal miteinander übereinstimmen. Dies kann besonders nützlich sein, wenn Text oder andere Inline -Elemente innerhalb dieser Blöcke ausgerichtet sind.
White-Raum-Handhabung : Ein bemerkenswerter Aspekt des inline-block ist, dass er durch den weißen Raum im HTML-Markup beeinflusst werden kann. Räume zwischen Inline-Block-Elementen können zu unbeabsichtigten Lücken führen, die möglicherweise eine spezielle Handhabung oder Entfernung von Räumen in der HTML erfordern.

Kann Anzeige: Block verwendet werden, um einen Container mit voller Breite zu erstellen, und wenn ja, wie?

Ja, display: block kann verwendet werden, um einen Container mit voller Breite zu erstellen. Standardmäßig nehmen Elemente auf Blockebene die volle Breite ihres übergeordneten Containers auf, dieses Verhalten kann jedoch explizit gesteuert und mit CSS sichergestellt werden. So können Sie es tun:

Standardverhalten : Wie bereits erwähnt, nehmen Blockelemente automatisch die volle Breite ihres Containers auf. Für Elemente wie <div> oder <code><p></p> wird display: block (der der Standardwert für diese Elemente ist) sichergestellt, dass sie sich über die gesamte Breite ihres übergeordneten übertreffen.
Explizite Breite : Sie können die Breite eines Blockelements explizit auf 100% einstellen, um sicherzustellen, dass die volle Breite einnimmt:
```
 <code class="css">.full-width-container { display: block; width: 100%; }</code>
```
Nach dem Login kopieren
Rand- und Polster -Überlegungen : Es ist wichtig, die Auswirkungen von Margen und Polsterung auf die Gesamtbreite des Elements zu berücksichtigen. Wenn Sie den Inhaltsbereich benötigen, um die volle Breite aufzunehmen, ohne die Margen und Polsterung zu berücksichtigen, müssen Sie möglicherweise die box-sizing: border-box; Eigentum:
```
 <code class="css">.full-width-container { display: block; width: 100%; box-sizing: border-box; }</code>
```
Nach dem Login kopieren

Welche Anzeigeeigenschaft sollte zum Erstellen eines Navigationsmenüs mit horizontal ausgerichteten Elementen verwendet werden?

Zum Erstellen eines Navigationsmenüs mit horizontal ausgerichteten Elementen display: inline-block ist in der Regel die am besten geeignete Wahl. Hier ist der Grund:

Horizontales Layout : inline-block ermöglicht es, Menüelemente in einer Zeile nebeneinander anzuzeigen, die ideal für ein horizontales Navigationsmenü ist.
Steuerung der Abmessungen : Mit inline-block können Sie spezifische Breiten und Höhen für jeden Menüelement festlegen und ein einheitliches oder benutzerdefiniertes Layout ermöglichen.
Styling-Funktionen : inline-block -Elemente können mit Margen, Polsterung und Grenzen gestylt werden, die zum Ausreichen von Menüpunkten und zum Hinzufügen visueller Separatoren nützlich sind.

Hier ist ein Beispiel dafür, wie Sie inline-block verwenden können, um ein horizontales Navigationsmenü zu erstellen:

 <code class="html"><nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav></code>

Nach dem Login kopieren

 <code class="css">nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline-block; } nav ul li a { display: block; padding: 10px 20px; text-decoration: none; color: #333; } nav ul li a:hover { background-color: #f0f0f0; }</code>

Nach dem Login kopieren

Dieses Setup erstellt ein horizontales Navigationsmenü, in dem jedes Listenelement inline angezeigt wird, jedoch die Möglichkeit, bestimmte Stile und Dimensionen festzulegen, wodurch es sowohl funktional als auch visuell ansprechend ist.