Explication détaillée de la différence entre les éléments en ligne et les éléments de niveau bloc

1. La différence entre les éléments en ligne et les éléments de niveau bloc

1. Les éléments en ligne n'occuperont pas toute la ligne et sont disposés en une ligne droite. Ils sont tous sur la même ligne, disposés horizontalement

Les éléments au niveau du bloc occuperont une ligne, disposés verticalement ;

　2. Les éléments de niveau bloc peuvent contenir des éléments en ligne et des éléments de niveau bloc ; les éléments en ligne ne peuvent pas contenir d'éléments de niveau bloc.

3. La différence entre les attributs des éléments en ligne et des éléments au niveau du bloc est principalement due aux attributs du modèle de boîte. Le paramètre de largeur des éléments en ligne n'est pas valide, la hauteur n'est pas valide (. la hauteur de la ligne peut être définie), et la marge haut et bas n'est pas valide, le remplissage vers le haut et vers le bas n'est pas valide.

2. Conversion des éléments en ligne et des éléments de niveau bloc

Conversion des éléments en ligne éléments Pour les éléments de bloc : display:block;

Les éléments de bloc sont convertis en Éléments en ligne： display:inline;

3.

Description du problème : Pourquoi la largeur et la hauteur des éléments en ligne tels que img et input peuvent-elles être définies ?

Réponse détaillée :

Les éléments sont la base de la structure du document. En CSS, chaque élément génère une boîte (box, également traduit par « box ») qui contient le contenu de l'élément. Mais différents éléments seront affichés différemment. Par exemple,

et

sont différents, et Différents types sont spécifiés pour différents éléments dans la définition du type de document (DTD), ce qui est l'une des raisons pour lesquelles la DTD est importante pour les documents.

　1. Éléments remplaçables et non remplaçables

À partir des caractéristiques de l'élément lui-même, il peut être divisé en éléments remplaçables et non remplaçables.

a) Élément de remplacement

L'élément de remplacement signifie que le navigateur détermine le contenu d'affichage spécifique de l'élément en fonction de ses balises et de ses attributs.

Par exemple, le navigateur lira les informations sur l'image et les affichera en fonction de la valeur de l'attribut src de la balise , mais si vous affichez le code HTML (X), vous ne pouvez pas voir le contenu réel de l'image ; autre exemple

En fonction de l'attribut type de la balise , décidez si vous souhaitez afficher une zone de saisie, un bouton radio, etc.

　 Les éléments , , , <select>, <object> dans (X)HTML sont tous des éléments de remplacement. Ces éléments n'ont souvent pas de contenu réel, c'est-à-dire un élément vide, par exemple : </p> <p>　<img src="cat.jpg" /><br>　<input type="submit" name= "Submit" value="Submit" /></p> <p>　 Le navigateur affichera ces éléments en fonction de leur type de balise et de leurs attributs. Les éléments remplaçables génèrent également des cases dans leur affichage. </p> <p> b) Éléments non remplaçables </p> <p> La plupart des éléments de (X)HTML sont des éléments non remplaçables, c'est-à-dire que leur contenu est directement affiché à l'utilisateur (comme un navigateur). Par exemple : </p> <p>　<p>Contenu du paragraphe</p></p> <p>　 Le paragraphe<p> est un élément non remplaçable et le texte « Contenu du paragraphe » est entièrement affiché. </p> <p> 2. Afficher les éléments </p> <p> En plus des méthodes de classification des éléments remplaçables et des éléments non remplaçables, il existe d'autres méthodes de classification des éléments en CSS 2.1 : les éléments de niveau bloc (block-level ) et l'élément inline (niveau inline, également traduit par élément "inline"). </p> <p> a) Éléments de niveau bloc </p> <p> La caractéristique la plus évidente d'un élément visuellement formaté en bloc est qu'il remplit la zone de contenu de son élément parent horizontalement par défaut, et sur ses côtés gauche et droit, les éléments de niveau bloc sont sur leur propre ligne par défaut s'il n'y a pas d'autres éléments. </p> <p> Les éléments typiques au niveau du bloc sont : <p>, <p>, <h1> à <h6>, etc. </p> <p> Les éléments qui flottent (attribut float, peuvent flotter vers la gauche ou la droite) via CSS et définissent l'attribut d'affichage sur "block" ou "list-item" sont des éléments de niveau bloc. </p> <p> Mais les éléments flottants sont spéciaux En raison du flottement, il peut y avoir d'autres éléments à côté d'eux. Et "élément de liste" (élément de liste <li>) générera un symbole de point ou une séquence numérique devant lui. </p> <p> b) Éléments en ligne </p> <p> Les éléments en ligne ne forment pas un nouveau bloc de contenu, c'est-à-dire qu'il peut y avoir d'autres éléments autour d'eux, tels que <a>, <span>, < ;strong>, etc. Ce sont tous des éléments typiques de niveau en ligne. </p> <p>　 Les éléments avec un attribut d'affichage égal à "inline" sont tous des éléments en ligne. Presque tous les éléments remplaçables sont des éléments en ligne, tels que <img>, <input>, etc. </p> <p> Cependant, le type d'éléments n'est pas fixe. En définissant l'attribut display de CSS, les éléments en ligne peuvent être transformés en éléments de niveau bloc, et les éléments de niveau bloc peuvent également être transformés en éléments en ligne. </p> <p><span style="font-family: Microsoft YaHei">　3. Conclusion : </span></p> <p><span style="font-family: 宋体">　 Les éléments de remplacement ont généralement des dimensions intrinsèques, ils ont donc une largeur et une hauteur, qui peuvent être paramétrées. Par exemple, si vous ne précisez pas la largeur et la hauteur de img, celle-ci sera affichée en fonction de sa taille intrinsèque, qui est la largeur et la hauteur de l'image lors de son enregistrement. </span></p> <p><span style="font-family: 宋体"> Pour les éléments de formulaire, les navigateurs ont également des styles par défaut, notamment la largeur et la hauteur. </span></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"><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="propriétés liées à l'arrière-plan en CSS" href="http://m.php.cn/fr/faq/358525.html">propriétés liées à l'arrière-plan en CSS</a></span><span>Article suivant：<a class="dBlack" title="propriétés liées à l'arrière-plan en CSS" href="http://m.php.cn/fr/faq/358549.html">propriétés liées à l'arrière-plan en CSS</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><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/1796679768.html" title="Comment résoudre les problèmes d'alignement vertical des colonnes lors de la migration de Bootstrap 3 vers Bootstrap 4 ?" class="aBlack">Comment résoudre les problèmes d'alignement vertical des colonnes lors de la migration de Bootstrap 3 vers Bootstrap 4 ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796679612.html" title="Comment créer un menu circulaire avec des icônes en utilisant du CSS pur ?" class="aBlack">Comment créer un menu circulaire avec des icônes en utilisant du CSS pur ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796679618.html" title="Comment réaliser un habillage de grille en CSS sans requêtes multimédias ?" class="aBlack">Comment réaliser un habillage de grille en CSS sans requêtes multimédias ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796679639.html" title="Comment éliminer l'espace vertical entre les colonnes dans Bootstrap 4 ?" class="aBlack">Comment éliminer l'espace vertical entre les colonnes dans Bootstrap 4 ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/1796679674.html" title="Comment créer un div réactif de forme carrée en CSS ?" class="aBlack">Comment créer un div réactif de forme carrée en CSS ?</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><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>