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. Les paramètres de largeur et de hauteur des éléments en ligne ne sont pas valides (hauteur de ligne). peut être défini), et les marges supérieure et inférieure ne sont pas valides, 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. éléments.

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 qu'ils sont vides, 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> </p> <p> b) Éléments non remplaçables </p> <p> (X) La plupart des éléments HTML sont des éléments non remplaçables, c'est-à-dire que leur contenu est directement affiché à l'utilisateur (comme comme 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> </p> <p> 2. Afficher les éléments </p> <p> En plus de la classification des éléments remplaçables et des éléments non remplaçables, il existe une autre méthode de classification des éléments en CSS 2.1 : au niveau bloc éléments (niveau bloc) et éléments en ligne (niveau en ligne, également traduits par éléments "en ligne"). </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> </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., sont tous des éléments typiques de niveau en ligne. </p> <p>　 Les éléments dont l'attribut d'affichage est é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> </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 l'image, elle 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> </p> <p>Pour plus d'articles connexes sur la différence entre les éléments en ligne et les éléments de niveau bloc, veuillez faire attention au site Web PHP chinois ! <br></p> <p><br></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="Expression régulière pour supprimer les balises HTML en Java" href="http://m.php.cn/fr/faq/353931.html">Expression régulière pour supprimer les balises HTML en Java</a></span><span>Article suivant：<a class="dBlack" title="Expression régulière pour supprimer les balises HTML en Java" href="http://m.php.cn/fr/faq/354009.html">Expression régulière pour supprimer les balises HTML en Java</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/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</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>