집 >웹 프론트엔드 >HTML 튜토리얼 >html 블록 수준 태그, 인라인 태그, 인라인 블록 태그의 표시 모드는 무엇입니까?

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

php中世界最好的语言원래의: 2018-01-22 11:09:583567검색

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

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

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

p{ color:red text-align; :center;}af6099cf54171f493174e1c227d28eb7나는 블록 수준 태그 p94b3e26ee717c64999d7867364b1b4a382c2f54f4cf245029ffb326befd49b3f240cb830ca84ebaabbd07850110b414d나는 인라인 태그 글꼴e6e38b3c62e8df885fe2e3986461aa63

실행 미리보기 후에 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!