Heim > Artikel > Web-Frontend > Was ist der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene?

Was ist der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene?

青灯夜游Original: 2021-03-01 16:35:0339249Durchsuche

Unterschied: Das Festlegen der Breite und Höhe in Inline-Elementen ist ungültig und wird nicht automatisch umbrochen, während Elemente auf Blockebene Breite und Höhe festlegen und automatisch umbrechen können. In Inline-Elementen ist die Randeinstellung in der linken und rechten Richtung gültig, jedoch nicht nach oben und unten, und die Abstandseinstellung in der linken und rechten Richtung ist gültig, jedoch nicht nach oben und unten. Bei Elementen auf Blockebene gilt dies sowohl für Rand als auch für Abstand gültig.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In den Grundlagen von CSS stoßen wir häufig auf Blockelemente und Inline-Elemente. In der tatsächlichen Entwicklung sind sie oft verwirrend und schwer zu merken. Was ist also der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene? Lassen Sie mich es Ihnen unten vorstellen.

Definition von Block-Level-Elementen und Inline-Elementen

Was sind Block-Level-Elemente?

Beginnt immer in einer neuen Zeile;
Höhe, Zeilenhöhe sowie Ränder und Abstand sind alle steuerbar;
Die Breite beträgt standardmäßig 100 % des Containers, es sei denn, es ist eine Breite festgelegt.
Es kann Inline-Elemente und andere Blockelemente aufnehmen

Zum Beispiel:

, ,

~

, , , , , , 
 
Was sind Inline-Elemente? 

 und andere Elemente befinden sich in einer Zeile; 
Höhe, Zeilenhöhe, Ränder und Abstand können nicht geändert werden; 
Breite ist die Breite des Texts oder Bildes und kann nicht geändert werden
 Inline Elemente können nur Text oder andere Inline-Elemente enthalten

Zum Beispiel: , , 
, , , , < input> , , <select>, <sup>, <sub>, <em>, <del></p>
<p>[Empfohlenes Tutorial: „<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">HTML-Video-Tutorial</a>“]</p>
<p><strong>Inline Der Unterschied zwischen Elementen und Elementen auf Blockebene </strong></p>
<p>1), Inline-Elemente </p>
<p>①: Die Einstellung von Breite und Höhe ist ungültig. </p>
<p>②: Die Einstellung der linken und rechten Richtung für den Rand ist gültig, aber die Auffüllungseinstellung links und unten ist ungültig Die richtige Richtung ist gültig, die Richtung nach oben und unten ist jedoch ungültig. ?? Die Standardanordnung ist von oben nach unten</p>
<p>Weitere Kenntnisse zum Thema Programmierung finden Sie unter: </p>Programmiervideo<p>! ! </p><p>Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Inline-Elementen und Elementen auf Blockebene?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><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 Attribute des HTML-Button-Tags?" href="http://m.php.cn/de/faq/471257.html">Was sind die Attribute des HTML-Button-Tags?</a></span><span>Nächster Artikel：<a class="dBlack" title="Was sind die Attribute des HTML-Button-Tags?" href="http://m.php.cn/de/faq/471283.html">Was sind die Attribute des HTML-Button-Tags?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://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="http://m.php.cn/de/faq/471129.html" title="So entfernen Sie die Unterstreichung von Hyperlinks in HTML5" class="aBlack">So entfernen Sie die Unterstreichung von Hyperlinks in HTML5</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/471130.html" title="So legen Sie die Dicke von hr in HTML fest" class="aBlack">So legen Sie die Dicke von hr in HTML fest</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/471133.html" title="Woraus besteht ein Formular in HTML?" class="aBlack">Woraus besteht ein Formular in HTML?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/471154.html" title="So entfernen Sie Unterstreichungen aus Text in HTML" class="aBlack">So entfernen Sie Unterstreichungen aus Text in 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/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</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/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</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/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai"  >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</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:setlang('fr');" class="language course-right-orders chooselan "  href="javascript:;"><span>Français</span><span>（FR）</span></a><a  onclick="javascript:;" class="language course-right-orders chooselan chooselanguage"  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>