html 블록 수준 태그, 인라인 태그, 인라인 블록 태그의 표시 모드는 무엇입니까?

이번에는 html 블록 수준 태그, 인라인 태그, 인라인 블록 태그의 표시 모드에 대해 알려드리겠습니다. html 블록 수준 태그, 인라인 태그, 인라인 블록 태그 표시 모드 사용 시 주의사항은 무엇인가요? .실제 사례를 살펴보겠습니다.

오늘 강의에서는 HTML 태그의 표시 모드에 대해 이야기했는데, 크게 블록 수준 태그와 인라인 태그로 나뉩니다. 그런 다음 초보자가 태그를 처음 사용할 때 너비, 높이, 가로 가운데 맞춤 등과 같은 일부 속성이 일부 태그에서 작동하지 않는다는 것을 알게 됩니다. 실제로 이 속성의 사용은 블록 수준 태그에서만 작동합니다. 개인적으로 초보분들이 ​​쉽게 지나칠 수 있는 부분이라 생각해서 적어보았습니다!

예를 들어, p 태그를 가로로 가운데 맞추는 것은 효과가 있지만 글꼴에 가로 가운데로 맞추는 속성을 추가하면 효과가 없는 상황이 있습니다(다음과 같이):

p{ color:red text-align; :center;}

나는 블록 수준 태그 p

나는 인라인 태그 글꼴

실행 미리보기 후에 p는 텍스트를 가로로 가운데 정렬할 수 있지만 글꼴은 그렇지 않습니다. 그러면 위의 문제는 HTML의 표시 모드와 관련됩니다:

표시 모드의 특징:

주로 두 가지로 나뉩니다. 카테고리:

블록 수준 요소: 전용 라인을 차지하고 너비 및 높이 속성 값에 적용됩니다. 너비가 지정되지 않으면 블록 수준 요소의 기본값은 브라우저 너비, 즉 100%입니다.

인라인 요소: 한 줄에 여러 개의 레이블이 존재할 수 있으며 너비와 높이가 영향을 받습니다. 속성 값은 적용되지 않으며 너비와 높이는 내용에 완전히 종속됩니다!

두 가지 모드의 장점을 결합한 표시 모드도 있습니다.

인라인 블록 요소: 결합된 인라인 및 블록 수준 장점은 너비 및 높이 속성 값에 영향을 미칠 뿐만 아니라 여러 레이블을 표시할 수도 있습니다. 한 줄

HTML의 표시 모드는 블록 수준과 인라인으로 구분됩니다. 일반적으로 사용되는 블록 수준은 p, p, h1~h6, ul, li, dl, dt, dd... 일반적으로 사용되는 인라인 수준입니다. 범위, 글꼴, b, u,i,strong,em,a,img,input, 여기서 img 및 input은 인라인 블록 요소입니다.

그러면 '폭이나 글꼴의 너비와 높이를 조절할 수는 없지 않을까?'라고 생각하는 학생들도 있을 것입니다. 자, 이번에는

floating

과 위치 지정을 제쳐두고 display 속성을 통해 서로 변환해 보겠습니다.

1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;

해당 라벨에 대한 표시 속성을 사용하고 해당 값을 취하면 됩니다. 서로 변환되었습니다.

text-align 속성이 유효한지 이전에 말씀드렸는데, 그 이유는 블록 수준 태그가 너비를 제공하지 않으면 블록 수준 요소의 기본값이 브라우저의 너비, 즉 100%가 되기 때문입니다. 100% 너비에서는 센터링이 적용되지만 인라인 요소의 너비는 콘텐츠에 의해 완전히 늘어나므로 너비는 콘텐츠의 너비입니다.

그래서 블록 수준입니다. 상자 중앙에 위치하지만 인라인 요소의 너비로 인해 내용이 넓고 중앙에 배치할 공간이 없으므로 text-align:center; 글꼴이 변환되면 효과가 없습니다. 블록 레벨에 따라 다릅니다:

p{ background:green; color:red; text-align:center;}    
font{background:green;color:red; text-align:center;display:block;}

마찬가지로 블록 레벨이 인라인으로 변환되면 텍스트도 중앙에 표시될 수 없습니다.

HTML에서 인라인 요소는 텍스트 특성을 가진 레이블로 간주됩니다. 블록 수준에서는 텍스트를 가로로 가운데에 배치할 수 있습니다. 그런 다음 블록 수준에서 text-align:center를 사용합니다. ;, 내부의 인라인 태그는 text:

without text-align:center;:

p{ padding:5px;background:green; color:red;}    
font{ background:yellow;}    
<p>    
    <font>我是行内标签font</font> <font>我是行内标签font</font>    
</p>

with text-align:center; after

p{ padding:5px;background:green; color:red;text-align:center;}    
font{ background:yellow;}

본 것 같아요. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 자료:

HTML의 기본 지식, 하이퍼링크로 설정되는 스타일에 대한 자세한 소개

HTML의 기본 지식, CSS 스타일 시트 및 스타일 속성에 대한 자세한 소개

HTMLa 태그의 href 속성을 사용하여 상대 경로와 절대 경로를 지정하세요

위 내용은 html 블록 수준 태그, 인라인 태그, 인라인 블록 태그의 표시 모드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!