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

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;

3

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 class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><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><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Hintergrundbezogene Eigenschaften in CSS" href="http://m.php.cn/de/faq/358525.html">Hintergrundbezogene Eigenschaften in CSS</a></span><span>Nächster Artikel：<a class="dBlack" title="Hintergrundbezogene Eigenschaften in CSS" href="http://m.php.cn/de/faq/358549.html">Hintergrundbezogene Eigenschaften in CSS</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/347776.html" title="Zusammenfassung von sechs Implementierungsmethoden des JSDOMReady-Ereignisses" class="aBlack">Zusammenfassung von sechs Implementierungsmethoden des JSDOMReady-Ereignisses</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348838.html" title="Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite" class="aBlack">Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/349106.html" title="Reine CSS3-Vollbild-Diashow-Effekte" class="aBlack">Reine CSS3-Vollbild-Diashow-Effekte</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/349108.html" title="Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen" class="aBlack">Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/349109.html" title="Atemberaubende sechseckige CSS3-Menüanimationseffekte" class="aBlack">Atemberaubende sechseckige CSS3-Menüanimationseffekte</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' 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>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>