Quelles sont les valeurs de l'attribut display dans h5

Les valeurs de l'attribut display dans h5 incluent block, inline, inline-block, none, table, flex, grid, list-item, Heherit, initial, etc. Introduction détaillée : 1. block, utilisez la valeur block pour afficher l'élément au niveau du bloc, c'est-à-dire que l'élément occupera une ligne et la largeur par défaut est 100 % de celle du conteneur parent 2. inline, utilisez l'inline ; valeur pour que l'élément s'affiche en ligne, c'est-à-dire que l'élément n'affichera pas de ligne exclusive, etc.

Le système d'exploitation de ce tutoriel : système Windows 10, ordinateur DELL G3.

En HTML5, l'attribut display est utilisé pour contrôler la façon dont les éléments sont affichés. Il définit la manière dont les éléments sont disposés et présentés sur la page. L'attribut d'affichage peut prendre diverses valeurs. Certaines des valeurs courantes seront présentées ci-dessous.

1. block (élément au niveau du bloc) : utilisez la valeur du bloc pour afficher l'élément au niveau du bloc, c'est-à-dire que l'élément occupera une ligne exclusive et que la largeur par défaut est 100 % du conteneur parent. Les éléments courants au niveau du bloc incluent

,

,

à

, etc.

2. inline (élément en ligne) : utilisez la valeur inline pour afficher l'élément en ligne, c'est-à-dire que l'élément n'occupera pas une ligne par lui-même, mais sera affiché sur la même ligne que les autres éléments. Les éléments en ligne courants incluent , , , , , etc.

3. inline-block (élément de niveau bloc en ligne) : utilisez la valeur inline-block pour afficher l'élément au niveau du bloc en ligne, c'est-à-dire que l'élément est affiché sur la même ligne et des attributs tels que la largeur et la hauteur peut être réglée. Les éléments courants au niveau du bloc en ligne incluent , , , , etc. </p> <p>4. none (élément masqué) : utilisez la valeur none pour masquer l'élément, c'est-à-dire que l'élément ne sera pas affiché sur la page. Lorsque cette valeur est définie, l'élément n'occupera aucun espace. Ceci est utile lorsque vous devez afficher et masquer des éléments de manière dynamique. </p> <p>5. table (élément de table) : utilisez la valeur de table pour afficher l'élément sous forme de tableau, c'est-à-dire que l'élément aura les caractéristiques d'un tableau, y compris les lignes et les colonnes du tableau. Les éléments de tableau courants incluent <table>, <tr>, <td>, etc. </p> <p>6. Flex (mise en page flexible) : utilisez la valeur flex pour organiser les éléments en utilisant une mise en page flexible. La disposition flexible peut ajuster automatiquement la taille et la position des éléments en fonction de la taille du conteneur pour obtenir des effets de disposition flexibles. </p> <p>En plus des valeurs ci-dessus, l'attribut display peut également prendre d'autres valeurs, telles que : </p> <p>-grid (disposition en grille) : utilisez la valeur de grille pour organiser les éléments en utilisant la disposition en grille. La disposition en grille divise la page en lignes et colonnes, ce qui facilite la disposition des éléments. </p> <p>- list-item : utilisez la valeur list-item pour afficher les éléments sous forme d'éléments de liste, c'est-à-dire qu'il y aura une puce ou un numéro devant l'élément. </p> <p>- hériter (hériter de l'attribut d'affichage de l'élément parent) : utilisez la valeur d'héritage pour hériter de l'attribut d'affichage de l'élément parent. </p> <p>- initial (valeur initiale) : utilisez la valeur initiale pour réinitialiser la propriété d'affichage à sa valeur initiale. </p> <p>Ci-dessus sont quelques valeurs d'attribut d'affichage couramment utilisées. En définissant l'attribut d'affichage, nous pouvons contrôler de manière flexible le mode d'affichage des éléments et obtenir divers effets de mise en page. </p><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</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>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Quels sont les inconvénients de l'affichage" href="http://m.php.cn/fr/faq/627949.html">Quels sont les inconvénients de l'affichage</a></span><span>Article suivant：<a class="dBlack" title="Quels sont les inconvénients de l'affichage" href="http://m.php.cn/fr/faq/627970.html">Quels sont les inconvénients de l'affichage</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/371604.html" title="Résoudre le problème selon lequel le type de style de liste de l'élément de liste de l'attribut d'affichage CSS ne peut pas être affiché" class="aBlack">Résoudre le problème selon lequel le type de style de liste de l'élément de liste de l'attribut d'affichage CSS ne peut pas être affiché</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/417849.html" title="Quel framework peut être utilisé pour développer des applications H5 ?" class="aBlack">Quel framework peut être utilisé pour développer des applications H5 ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/450804.html" title="Le H5 peut-il être exporté en vidéo ?" class="aBlack">Le H5 peut-il être exporté en vidéo ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/468985.html" title="Qu'est-ce que la page WeChat h5" class="aBlack">Qu'est-ce que la page WeChat h5</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/500660.html" title="À quoi sert le contrôle d’affichage intelligent Asus ?" class="aBlack">À quoi sert le contrôle d’affichage intelligent Asus ?</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/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</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/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</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/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</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:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " 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>