Was sind die Werte des Anzeigeattributs in h5?

Die Werte des Anzeigeattributs in h5 umfassen Block, Inline, Inline-Block, None, Table, Flex, Grid, List-Item, Inherit, Initial usw. Detaillierte Einführung: 1. Block: Verwenden Sie den Blockwert, um das Element auf Blockebene anzuzeigen. Das heißt, das Element belegt eine exklusive Zeile und die Breite beträgt standardmäßig 100 % des übergeordneten Containers. 2. Inline: Inline-Werte sorgen dafür, dass das Element inline angezeigt wird, d. h., das Element zeigt keine exklusive Zeile usw. an.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

In HTML5 wird das Anzeigeattribut verwendet, um zu steuern, wie Elemente angezeigt werden. Es definiert, wie Elemente auf der Seite angeordnet und dargestellt werden. Das Anzeigeattribut kann verschiedene Werte annehmen. Einige der gebräuchlichen Werte werden im Folgenden vorgestellt.

1. Block (Element auf Blockebene): Verwenden Sie den Blockwert, um das Element auf Blockebene anzuzeigen. Das heißt, das Element belegt eine exklusive Zeile und die Breite beträgt standardmäßig 100 % des übergeordneten Containers. Zu den gängigen Elementen auf Blockebene gehören

,

,

usw.

2. Inline (Inline-Element): Verwenden Sie den Inline-Wert, um das Element inline anzuzeigen, d. h. das Element belegt keine eigene Zeile, sondern wird in derselben Zeile wie andere Elemente angezeigt. Zu den gängigen Inline-Elementen gehören , , , , usw.

3. Inline-Block (Inline-Block-Level-Element): Verwenden Sie den Inline-Block-Wert, um das Element auf Inline-Block-Level-Weise anzuzeigen, das heißt, das Element wird in derselben Zeile angezeigt und verfügt über Attribute wie die Breite und Höhe einstellbar. Zu den gängigen Inline-Elementen auf Blockebene gehören , , , usw. </p> <p>4. none (verstecktes Element): Verwenden Sie den Wert none, um das Element auszublenden, d. h. das Element wird nicht auf der Seite angezeigt. Wenn dieser Wert festgelegt ist, belegt das Element keinen Platz. Dies ist nützlich, wenn Sie Elemente dynamisch ein- und ausblenden müssen. </p> <p>5. Tabelle (Tabellenelement): Verwenden Sie den Tabellenwert, um das Element als Tabelle anzuzeigen, d. h. das Element weist die Eigenschaften einer Tabelle auf, einschließlich Tabellenzeilen und -spalten. Zu den gängigen Tabellenelementen gehören <table>, <tr>, <td> usw. </p> <p>6. Flex (flexibles Layout): Verwenden Sie den Flex-Wert, um Elemente mithilfe eines flexiblen Layouts anzuordnen. Das flexible Layout kann die Größe und Position von Elementen automatisch an die Größe des Containers anpassen, um flexible Layouteffekte zu erzielen. </p> <p>Zusätzlich zu den oben genannten Werten kann das Anzeigeattribut auch andere Werte annehmen, wie zum Beispiel: </p> <p>-grid (Rasterlayout): Verwenden Sie den Rasterwert, um Elemente mithilfe des Rasterlayouts anzuordnen. Das Rasterlayout unterteilt die Seite in Zeilen und Spalten und erleichtert so die Anordnung von Elementen. </p> <p>- Listenelement: Verwenden Sie den Listenelementwert, um Elemente als Listenelemente anzuzeigen, d. h. vor dem Element steht ein Aufzählungszeichen oder eine Zahl. </p> <p>- erben (Anzeigeattribute des übergeordneten Elements erben): Verwenden Sie den Vererbungswert, um das Anzeigeattribut des übergeordneten Elements zu erben. </p> <p>- initial (Anfangswert): Verwenden Sie den Anfangswert, um die Anzeigeeigenschaft auf ihren Anfangswert zurückzusetzen. </p> <p>Die oben genannten sind einige häufig verwendete Anzeigeattributwerte. Durch Festlegen des Anzeigeattributs können wir den Anzeigemodus von Elementen flexibel steuern und verschiedene Layouteffekte erzielen. </p><p>Das obige ist der detaillierte Inhalt vonWas sind die Werte des Anzeigeattributs in h5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">继承</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">flex</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">table</a> <a href="javascript:void(0);">td</a> <a href="javascript:void(0);">tr</a><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="Was sind die Nachteile der Anzeige?" href="https://m.php.cn/de/faq/627949.html">Was sind die Nachteile der Anzeige?</a></span><span>Nächster Artikel：<a class="dBlack" title="Was sind die Nachteile der Anzeige?" href="https://m.php.cn/de/faq/627970.html">Was sind die Nachteile der Anzeige?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://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="https://m.php.cn/de/faq/371604.html" title="Lösen Sie das Problem, dass der Listenstiltyp des CSS-Anzeigeattributs Listenelement nicht angezeigt werden kann" class="aBlack">Lösen Sie das Problem, dass der Listenstiltyp des CSS-Anzeigeattributs Listenelement nicht angezeigt werden kann</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/417849.html" title="Mit welchem ​​Framework können H5-Apps entwickelt werden?" class="aBlack">Mit welchem ​​Framework können H5-Apps entwickelt werden?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/450804.html" title="Kann H5 als Video exportiert werden?" class="aBlack">Kann H5 als Video exportiert werden?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/468985.html" title="Was ist die WeChat h5-Seite?" class="aBlack">Was ist die WeChat h5-Seite?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/500660.html" title="Wozu dient die Asus Smart Display-Steuerung?" class="aBlack">Wozu dient die Asus Smart Display-Steuerung?</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/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://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><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>