Detaillierte Erläuterung des Unterschieds zwischen Inline-Elementen und Elementen auf Blockebene-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Detaillierte Erläuterung des Unterschieds zwischen Inline-Elementen und Elementen auf Blockebene

迷茫

Mar 25, 2017 am 10:46 AM

Unterschied

1. Der Unterschied zwischen Inline-Elementen und Block-Level-Elementen

1. Inline-Elemente nehmen nicht die gesamte Zeile ein und sind angeordnet eine gerade Linie. Sie liegen alle auf derselben Linie und sind horizontal angeordnet.

Die Elemente auf Blockebene belegen eine Linie und sind vertikal angeordnet.

　2. Elemente auf Blockebene können Inline-Elemente und Elemente auf Blockebene keine Elemente auf Blockebene enthalten.

3. Der Unterschied zwischen den Attributen von Inline-Elementen und Elementen auf Blockebene ist hauptsächlich auf die Attribute des Boxmodells zurückzuführen. Die Breiteneinstellung von Inline-Elementen ist ungültig ( Zeilenhöhe kann eingestellt werden) und der Rand nach oben und unten ist ungültig, das Auffüllen nach oben und unten ist ungültig.

2. Konvertierung von Inline-Elementen und Block-Level-Elementen

Konvertierung von Inline Elemente Für Blockelemente: display:block;

Blockelemente werden umgewandelt in Inline-Elemente: display:inline;

Problembeschreibung: Warum kann die Breite und Höhe von Inline-Elementen wie img und input festgelegt werden?

Ausführliche Antwort:

Elemente sind die Grundlage der Dokumentstruktur. In CSS generiert jedes Element eine Box (Box, auch übersetzt als „Box“), die den Inhalt des Elements enthält. Aber verschiedene Elemente werden unterschiedlich angezeigt:

und In der Dokumenttypdefinition (DTD) werden unterschiedliche Typen für verschiedene Elemente angegeben. Dies ist einer der Gründe, warum DTD für Dokumente wichtig ist.

1. Austauschbare und nicht austauschbare Elemente

Aufgrund der Eigenschaften des Elements selbst kann es in austauschbare und nicht austauschbare Elemente unterteilt werden.

a) Ersatzelement

Ersatzelement bedeutet, dass der Browser den spezifischen Anzeigeinhalt des Elements anhand seiner Tags und Attribute bestimmt.

Der Browser liest beispielsweise die Bildinformationen und zeigt sie basierend auf dem Wert des src-Attributs des -Tags an, aber wenn Sie den (X)-HTML-Code anzeigen, können Sie ihn nicht sehen tatsächlicher Inhalt des Bildes; ein weiteres Beispiel:

entscheidet anhand des Typattributs des , ob ein Eingabefeld, ein Optionsfeld usw. angezeigt wird.

　 Die Elemente , , , <select>, <object> in (X)HTML sind allesamt Ersatzelemente. Diese Elemente haben oft keinen eigentlichen Inhalt, das heißt, sie sind leere Elemente, zum Beispiel: </p> <p>　<img src="cat.jpg" /><br>　<input type="submit" name ="Submit " value="Submit" /></p> <p>　 Der Browser zeigt diese Elemente basierend auf ihrem Tag-Typ und ihren Attributen an. Austauschbare Elemente erzeugen in ihrer Anzeige ebenfalls Kästchen. </p> <p> b) Nicht ersetzbare Elemente </p> <p> Die meisten Elemente von (X)HTML sind nicht ersetzbare Elemente, das heißt, ihr Inhalt wird dem Benutzer (z. B. einem Browser) direkt angezeigt. Beispiel: </p> <p>　<p>Absatzinhalt</p></p> <p>　 Absatz<p> ist ein nicht ersetzbares Element und der Text „Absatzinhalt“ wird vollständig angezeigt. </p> <p>　2. Anzeigeelemente </p> <p> Zusätzlich zu den Klassifizierungsmethoden für ersetzbare Elemente und nicht ersetzbare Elemente gibt es in CSS 2.1 weitere Klassifizierungsmethoden für Elemente: Elemente auf Blockebene (Block-Level). ) und Inline-Element (Inline-Ebene, auch übersetzt als „Inline“-Element). </p> <p> a) Elemente auf Blockebene </p> <p> Das offensichtlichste Merkmal eines Elements, das visuell als Block formatiert ist, besteht darin, dass es den Inhaltsbereich seines übergeordneten Elements standardmäßig horizontal ausfüllt Sowohl auf der linken als auch auf der rechten Seite befinden sich Elemente auf Blockebene standardmäßig in einer eigenen Zeile, wenn keine anderen Elemente vorhanden sind. </p> <p> Typische Elemente auf Blockebene sind: <p>, <p>, <h1> usw. </p> <p> Elemente, die über CSS schweben (Float-Attribut, können nach links oder rechts schweben) und das Anzeigeattribut auf „Block“ oder „Listenelement“ setzen, sind Elemente auf Blockebene. </p> <p> Schwebende Elemente sind jedoch etwas Besonderes. Aufgrund des Schwebens können sich daneben noch andere Elemente befinden. Und „list-item“ (list item <li>) generiert davor ein Punktsymbol oder eine Zahlenfolge. </p> <p> b) Inline-Elemente </p> <p> Inline-Elemente bilden keinen neuen Inhaltsblock, das heißt, um sie herum können sich andere Elemente befinden, wie zum Beispiel <a>, <span>, < ;strong> usw. Sie sind alles typische Elemente auf Inline-Ebene. </p> <p>　 Elemente, deren Anzeigeattribut gleich „inline“ ist, sind alle Inline-Elemente. Fast alle ersetzbaren Elemente sind Inline-Elemente, wie z. B. <img>, <input> usw. </p> <p> Der Typ der Elemente ist jedoch nicht festgelegt. Durch Festlegen des Anzeigeattributs von CSS können Inline-Elemente in Elemente auf Blockebene umgewandelt werden, und Elemente auf Blockebene können auch in Inline-Elemente umgewandelt werden. </p> <p><span style="font-family: Microsoft YaHei">　3. Fazit: </span></p> <p><span style="font-family: 宋体">　 Ersatzelemente haben im Allgemeinen Eigenabmessungen, also Breite und Höhe, die eingestellt werden können. Wenn Sie beispielsweise die Breite und Höhe des Bildes nicht angeben, wird es entsprechend seiner inneren Größe angezeigt, die der Breite und Höhe des Bildes beim Speichern entspricht. </span></p> <p><span style="font-family: 宋体"> Für Formularelemente verfügen Browser auch über Standardstile, einschließlich Breite und Höhe. </span></p><p>Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Unterschieds zwischen Inline-Elementen und Elementen auf Blockebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Erklärung dieser Website</div> <div>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</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Heiße KI -Werkzeuge</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>KI-gestützte App zum Erstellen realistischer Aktfotos</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Online-KI-Tool zum Entfernen von Kleidung aus Fotos.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Ausziehbilder kostenlos</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>KI-Kleiderentferner</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>Erstellen Sie kostenlos Ai Hentai.</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/ai">Mehr anzeigen</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Heißer Artikel</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796780570.html" title="R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Monate vor</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796780641.html" title="R.E.P.O. Beste grafische Einstellungen" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Beste grafische Einstellungen</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Monate vor</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle -Lösung" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle -Lösung</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 Wochen vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796789525.html" title="Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben" class="phpgenera_Details_mainR4_bottom_title">Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 Wochen vor</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/1796780618.html" title="Will R.E.P.O. Crossplay haben?" class="phpgenera_Details_mainR4_bottom_title">Will R.E.P.O. Crossplay haben?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Monate vor</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/article.html">Mehr anzeigen</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Heiße Werkzeuge</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Einfach zu bedienender und kostenloser Code-Editor</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 chinesische Version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/93" title="SublimeText3 chinesische Version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 chinesische Version</h3> </a> <p>Chinesische Version, sehr einfach zu bedienen</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Senden Sie Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/121" title="Senden Sie Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Senden Sie Studio 13.0.1</h3> </a> <p>Leistungsstarke integrierte PHP-Entwicklungsumgebung</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Visuelle Webentwicklungstools</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac-Version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/de/toolset/development-tools/500" title="SublimeText3 Mac-Version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac-Version</h3> </a> <p>Codebearbeitungssoftware auf Gottesniveau (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/ai">Mehr anzeigen</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Heiße Themen</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/gmailyxdlrkzn" title="Wo ist der Login-Zugang für Gmail-E-Mail?" class="phpgenera_Details_mainR4_bottom_title">Wo ist der Login-Zugang für Gmail-E-Mail?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7552</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/cakephp-tutor" title="CakePHP-Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP-Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1382</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/steamdzhmcssmgs" title="Wie lautet das Format des Kontonamens von Steam?" class="phpgenera_Details_mainR4_bottom_title">Wie lautet das Format des Kontonamens von Steam?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>83</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/winactivationkeyper" title="Win11 -Aktivierungsschlüssel dauerhaft" class="phpgenera_Details_mainR4_bottom_title">Win11 -Aktivierungsschlüssel dauerhaft</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>58</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/de/faq/newyorktimesdailybrief" title="NYT -Verbindungen Hinweise und Antworten" class="phpgenera_Details_mainR4_bottom_title">NYT -Verbindungen Hinweise und Antworten</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>22</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>91</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/de/faq/zt">Mehr anzeigen</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/592543.html" title="Was sind Inline-Elemente und Block-Level-Elemente?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202308/17/2023081711295328733.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was sind Inline-Elemente und Block-Level-Elemente?" /> </a> <a href="https://www.php.cn/de/faq/592543.html" title="Was sind Inline-Elemente und Block-Level-Elemente?" class="phphistorical_Version2_mids_title">Was sind Inline-Elemente und Block-Level-Elemente?</a> <span class="Articlelist_txts_time">Aug 17, 2023 am 11:33 AM</span> <p class="Articlelist_txts_p">Inline-Elemente umfassen div, p, h1-h6, ul, ol, li, table, form usw.; Elemente auf Blockebene umfassen span, a, img, strong, em, input, label usw. Die Eigenschaften der beiden Elemente: 1. Inline-Elemente belegen eine Zeile, füllen automatisch die Breite des übergeordneten Containers aus, können Breite, Höhe, innere und äußere Ränder sowie andere Attribute festlegen und andere Elemente auf Blockebene und Inline-Elemente enthalten 2. Inline-Elemente belegen keine exklusive Zeile, Breite und Höhe werden durch den Inhalt bestimmt und der innere und äußere Rand wirken sich nur auf die Anordnung der Elemente selbst usw. aus.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/619476.html" title="Was ist der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202310/16/2023101609503858496.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was ist der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene?" /> </a> <a href="https://www.php.cn/de/faq/619476.html" title="Was ist der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene?" class="phphistorical_Version2_mids_title">Was ist der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene?</a> <span class="Articlelist_txts_time">Oct 16, 2023 am 09:51 AM</span> <p class="Articlelist_txts_p">Es gibt fünf Unterschiede zwischen Inline-Elementen und Elementen auf Blockebene: „Box-Modell“, „Anordnung“, „Inhaltsanzeige“, „relative Position“ und „Standardgröße“: 1. Inline-Elemente generieren keine unabhängigen Boxen, Breite und Höhe Abhängig vom Inhalt generieren Elemente auf Blockebene einen unabhängigen rechteckigen Rahmen, und Attribute wie Breite, Höhe, Ränder und Abstand können festgelegt werden. 2. Inline-Elemente werden horizontal in derselben Zeile angeordnet, Elemente auf Blockebene dagegen von oben nach unten gedrückt werden. 3. Inline-Elemente können keine Elemente auf Blockebene enthalten, während Elemente auf Blockebene andere Elemente auf Blockebene und Inline-Elemente enthalten können.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/470675.html" title="Was sind HTML-Inline-Elemente und Blockelemente?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202102/20/2021022015575660951.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was sind HTML-Inline-Elemente und Blockelemente?" /> </a> <a href="https://www.php.cn/de/faq/470675.html" title="Was sind HTML-Inline-Elemente und Blockelemente?" class="phphistorical_Version2_mids_title">Was sind HTML-Inline-Elemente und Blockelemente?</a> <span class="Articlelist_txts_time">Feb 20, 2021 pm 04:03 PM</span> <p class="Articlelist_txts_p">Zu den HTML-Inline-Elementen gehören: a (Ankerelement), b (fett), br (Zeilenumbruch), Code, em (Hervorhebung), Schriftart (Schriftarteinstellung), i (kursiv), img (Bild), input (Eingabefeld) ), span, strong (fette Hervorhebung), textarea, u usw.; Blockelemente umfassen: Adresse (Adresse), Blockquote (Blockzitat), Mitte (mittig ausgerichteter Block), div, h1~h6 (Titel), hr (Horizontale Trennlinie), p, ul, ol usw.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/634793.html" title="Der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene: ein tiefgreifendes Verständnis der Elementklassifizierung in HTML" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/170329687399445.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene: ein tiefgreifendes Verständnis der Elementklassifizierung in HTML" /> </a> <a href="https://www.php.cn/de/faq/634793.html" title="Der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene: ein tiefgreifendes Verständnis der Elementklassifizierung in HTML" class="phphistorical_Version2_mids_title">Der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene: ein tiefgreifendes Verständnis der Elementklassifizierung in HTML</a> <span class="Articlelist_txts_time">Dec 23, 2023 am 10:01 AM</span> <p class="Articlelist_txts_p">Der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene: Vertiefendes Verständnis der Klassifizierung von Elementen in HTML. In HTML können Elemente in zwei Kategorien unterteilt werden: Inline-Elemente und Elemente auf Blockebene. Um das Layout und den Stil von HTML richtig zu beherrschen, ist es sehr wichtig, ihre Unterschiede zu verstehen. Dieser Artikel bietet ein detailliertes Verständnis der Eigenschaften von Inline-Elementen und Elementen auf Blockebene und stellt spezifische Codebeispiele bereit. Inline-Elemente Inline-Elemente sind Elemente, die in HTML-Dokumenten standardmäßig inline angezeigt werden. Sie nehmen nicht eine ganze Zeile ein, sondern erscheinen je nach Anordnung des Dokumentflusses eng innerhalb einer Zeile. In der Branche üblich</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/680335.html" title="Das Attribut „margin' hat keinen Einfluss auf Inline-Elemente" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/170824539359008.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Das Attribut „margin' hat keinen Einfluss auf Inline-Elemente" /> </a> <a href="https://www.php.cn/de/faq/680335.html" title="Das Attribut „margin' hat keinen Einfluss auf Inline-Elemente" class="phphistorical_Version2_mids_title">Das Attribut „margin' hat keinen Einfluss auf Inline-Elemente</a> <span class="Articlelist_txts_time">Feb 18, 2024 pm 04:36 PM</span> <p class="Articlelist_txts_p">Die Auswirkung des Randes auf Inline-Elemente unterscheidet sich von der auf Elemente auf Blockebene. In Inline-Elementen wirkt sich das Randattribut nur auf die vertikalen oberen und unteren Ränder aus, nicht auf die horizontalen linken und rechten Ränder. Wenn es beispielsweise in HTML ein Absatzelement gibt, können wir einige Stile dafür festlegen und die Auswirkung des Randattributs darauf beobachten. Der HTML-Code sieht so aus:</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/619478.html" title="Welche Inline-Elemente und Elemente auf Blockebene gibt es in HTML?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202310/16/2023101609573984528.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Welche Inline-Elemente und Elemente auf Blockebene gibt es in HTML?" /> </a> <a href="https://www.php.cn/de/faq/619478.html" title="Welche Inline-Elemente und Elemente auf Blockebene gibt es in HTML?" class="phphistorical_Version2_mids_title">Welche Inline-Elemente und Elemente auf Blockebene gibt es in HTML?</a> <span class="Articlelist_txts_time">Oct 16, 2023 am 09:57 AM</span> <p class="Articlelist_txts_p">Häufig verwendete Inline-Elemente und Elemente auf Blockebene in HTML sind: 1. Elemente auf Blockebene umfassen Semantiken wie <div>, <p>, <ul>, <ol>, <li>, <h1>~<h6> und <header>. 2. Inline-Elemente umfassen Tags wie <span>, <a>, <strong>, <em>, <img> und <input>.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/630696.html" title="Was sind Inline- und Block-Level-Elemente?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202311/24/2023112413541576064.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Was sind Inline- und Block-Level-Elemente?" /> </a> <a href="https://www.php.cn/de/faq/630696.html" title="Was sind Inline- und Block-Level-Elemente?" class="phphistorical_Version2_mids_title">Was sind Inline- und Block-Level-Elemente?</a> <span class="Articlelist_txts_time">Nov 24, 2023 pm 01:57 PM</span> <p class="Articlelist_txts_p">Zu den Inline-Elementen gehören a, span, strong, b, em, i, label, img, input, select, textarea, button, abbr, cite, code, big, small, sub, sup usw. Zu den Elementen auf Blockebene gehören div, p, h1-h6, form, ul, ol, dl, dt, dd, li, table, tr, td, th, hr, blockquote, address, menu, pre usw.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/de/faq/634938.html" title="Detaillierte Erläuterung der Verwendungsszenarien und Methoden von CSS-Inline-Elementen und Elementen auf Blockebene" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/170331236737120.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Detaillierte Erläuterung der Verwendungsszenarien und Methoden von CSS-Inline-Elementen und Elementen auf Blockebene" /> </a> <a href="https://www.php.cn/de/faq/634938.html" title="Detaillierte Erläuterung der Verwendungsszenarien und Methoden von CSS-Inline-Elementen und Elementen auf Blockebene" class="phphistorical_Version2_mids_title">Detaillierte Erläuterung der Verwendungsszenarien und Methoden von CSS-Inline-Elementen und Elementen auf Blockebene</a> <span class="Articlelist_txts_time">Dec 23, 2023 pm 02:19 PM</span> <p class="Articlelist_txts_p">Ausführliche Erläuterung von CSS-Inline-Elementen und Elementen auf Blockebene: Entdecken Sie ihre Anwendungsszenarien und Verwendungsmethoden. In CSS können Elemente basierend auf ihren Anzeigeeigenschaften in zwei Typen unterteilt werden: Inline-Elemente und Elemente auf Blockebene. Für Webentwickler ist es sehr wichtig, diese beiden Konzepte zu verstehen, da ihre unterschiedlichen Eigenschaften ihre Anwendungsszenarien und Verwendungsmethoden bestimmen. Inline-Elemente sind Elemente, die nur eine Zeile auf einer Webseite belegen. Zu den gängigen Inline-Elementen gehören <span>, <img> und <input></p> </div> </div> <a href="https://www.php.cn/de/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p> </div> <div class="footermid"> <a href="https://www.php.cn/de/about/us.html">Über uns</a> <a href="https://www.php.cn/de/about/disclaimer.html">Haftungsausschluss</a> <a href="https://www.php.cn/de/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1744943490"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>