Maison > Article > interface Web > Quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ?

Quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ?

青灯夜游original: 2021-03-01 16:35:0339249parcourir

Différence : la définition de la largeur et de la hauteur dans les éléments en ligne n'est pas valide et ne s'enroulera pas automatiquement ; tandis que les éléments au niveau du bloc peuvent définir la largeur et la hauteur et s'enrouler automatiquement. Dans les éléments en ligne, le paramètre de marge est valide dans les directions gauche et droite mais pas vers le haut et vers le bas, et le paramètre de remplissage dans les directions gauche et droite est valide mais pas vers le haut et vers le bas dans les éléments de niveau bloc, la marge et le remplissage le sont ; valide.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Dans les bases du CSS, on rencontre souvent des éléments block et des éléments inline. Dans le développement réel, ils sont souvent confus et difficiles à mémoriser. Alors, quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ? Laissez-moi vous le présenter ci-dessous.

Définition des éléments de niveau bloc et des éléments en ligne

Que sont les éléments de niveau bloc ?

Démarre toujours sur une nouvelle ligne
La hauteur, les marges et le remplissage sont tous contrôlables ;

, ,

~

, , , , , ,  
Que sont les éléments en ligne ? 

 et les autres éléments sont sur la même ligne ; 
 la hauteur, la hauteur de la ligne, les marges et le remplissage ne peuvent pas être modifiés ; >La largeur est la largeur de son texte ou de son image et ne peut pas être modifiée
Les éléments en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne
 Par exemple : , , 
, , , , , , < select>, <sup>, <sub>, <em>, <del></p></li>[Tutoriel recommandé : "</ul>Tutoriel vidéo HTML<p>"]</p>
<p> <a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">La différence entre les éléments en ligne et les éléments de niveau bloc</a></p>
<p>1), les éléments en ligne <strong></strong>① : La définition de la largeur et de la hauteur n'est pas valide </p>
<p>② : Définir les directions gauche et droite de la marge Valide, mais le haut et le bas ne sont pas valides ; le réglage des directions gauche et droite est valide, mais le haut et le bas ne sont pas valides. </p>
<p>③ : ne s'enroulera pas automatiquement </p>
<p>2), élément au niveau du bloc </p>
<p>① : peut définir la largeur et la hauteur </p>
<p>② : réglage de la marge et du remplissage sont tous deux valides </p>
<p>③ : Peut automatiquement envelopper les lignes </p>
<p>④ : Plusieurs blocs, disposés de haut en bas par défaut </p>
<p>Pour plus de connaissances liées à la programmation, veuillez visiter : </p>Vidéo de programmation <p> ! ! </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="Quels sont les attributs de la balise bouton HTML ?" href="http://m.php.cn/fr/faq/471257.html">Quels sont les attributs de la balise bouton HTML ?</a></span><span>Article suivant：<a class="dBlack" title="Quels sont les attributs de la balise bouton HTML ?" href="http://m.php.cn/fr/faq/471283.html">Quels sont les attributs de la balise bouton HTML ?</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/471129.html" title="Comment supprimer le soulignement des hyperliens en HTML5" class="aBlack">Comment supprimer le soulignement des hyperliens en HTML5</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/471130.html" title="Comment définir l'épaisseur de HR en HTML" class="aBlack">Comment définir l'épaisseur de HR en HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/471133.html" title="De quoi est constitué un formulaire en HTML ?" class="aBlack">De quoi est constitué un formulaire en HTML ?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/471154.html" title="Comment supprimer le soulignement du texte en HTML" class="aBlack">Comment supprimer le soulignement du texte en HTML</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>