집 > 기사 > 웹 프론트엔드 > 인라인 요소와 블록 수준 요소의 차이점은 무엇입니까?

인라인 요소와 블록 수준 요소의 차이점은 무엇입니까?

青灯夜游원래의: 2021-03-01 16:35:0339305검색

차이점: 인라인 요소의 너비와 높이 설정은 유효하지 않으며 자동으로 줄 바꿈되지 않지만 블록 수준 요소는 너비와 높이를 설정하고 자동으로 줄 바꿈할 수 있습니다. 인라인 요소에서 여백 설정은 왼쪽 및 오른쪽 방향에서는 유효하지만 위쪽 및 아래쪽은 유효하지 않으며, 왼쪽 및 오른쪽 방향의 패딩 설정은 유효하지만 블록 수준 요소에서는 위쪽 및 아래쪽이 아닙니다. 여백과 안쪽 여백은 모두 유효합니다. 유효한.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS의 기본에서는 블록 요소와 인라인 요소를 자주 접하게 됩니다. 실제 개발에서는 혼동되고 기억하기 어려운 경우가 많습니다. 그렇다면 인라인 요소와 블록 수준 요소의 차이점은 무엇입니까? 아래에서 소개해드리겠습니다.

블록 수준 요소와 인라인 요소의 정의

블록 수준 요소란 무엇인가요?

항상 새 줄에서 시작합니다.
높이, 줄 높이, 여백 및 패딩을 모두 제어할 수 있습니다.
너비가 설정되지 않은 한 너비는 기본적으로 컨테이너의 100%입니다.
인라인 요소와 기타 블록 요소를 수용할 수 있습니다

예:

, ,

~

, ,

인라인 요소란 무엇인가요?

및 기타 요소는 모두 한 줄에 있습니다.
높이, 줄 높이, 여백 및 패딩은 변경할 수 없습니다.
너비는 텍스트나 그림의 너비이며 변경할 수 없습니다. 인라인 요소에는 텍스트 또는 기타 인라인 요소만 포함될 수 있습니다. ;, , <select>, <sup>, <sub>, <em>, <del></p></li>[추천 튜토리얼: "<li>html 비디오 튜토리얼<p>"]</p> </li> </ul>인라인 요소와 블록 수준 요소의 차이점 <p></p> <p>1) 인라인 요소 <a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程"></a>①: 너비 및 높이 설정이 유효하지 않습니다. </p> <p>②: 여백에 대한 왼쪽 및 오른쪽 방향 설정은 유효하지만 왼쪽 및 아래쪽 패딩 설정은 유효하지 않습니다. 오른쪽 방향은 유효하지만 위쪽 및 아래쪽은 유효하지 않습니다. <strong></strong>3: 자동으로 줄바꿈하지 않음 </p> <p>2), 블록 수준 요소 </p> <p>1: 너비와 높이를 설정할 수 있음 </p> <p>2: 여백 및 안쪽 여백 설정이 유효함 </p> <p>3: 자동으로 줄바꿈 가능 </p> <p>4: 여러 블록, 기본 배열은 위에서 아래로 입니다</p> <p>더 많은 프로그래밍 관련 지식을 보려면 </p>프로그래밍 비디오<p>를 방문하세요! ! </p> </form> </div> </table> </dl> </ol><p>위 내용은 인라인 요소와 블록 수준 요소의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="HTML 버튼 태그의 속성은 무엇입니까?" href="http://m.php.cn/ko/faq/471257.html">HTML 버튼 태그의 속성은 무엇입니까?</a></span><span>다음 기사：<a class="dBlack" title="HTML 버튼 태그의 속성은 무엇입니까?" href="http://m.php.cn/ko/faq/471283.html">HTML 버튼 태그의 속성은 무엇입니까?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</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/ko/faq/471129.html" title="html5에서 하이퍼링크 밑줄을 제거하는 방법" class="aBlack">html5에서 하이퍼링크 밑줄을 제거하는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/471130.html" title="HTML에서 hr의 두께를 설정하는 방법" class="aBlack">HTML에서 hr의 두께를 설정하는 방법</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/471133.html" title="HTML의 양식은 무엇으로 구성됩니까?" class="aBlack">HTML의 양식은 무엇으로 구성됩니까?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/471154.html" title="HTML 텍스트에서 밑줄을 제거하는 방법" class="aBlack">HTML 텍스트에서 밑줄을 제거하는 방법</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/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</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/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</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/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</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:;" class="language course-right-orders chooselan chooselanguage" 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: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><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>