CSS 행 수준 요소와 블록 수준 요소 간을 변환하는 방법

CSS에서는 표시 속성을 사용하여 행 수준 요소와 블록 수준 요소를 변환할 수 있습니다. " 블록 수준 요소의 경우 inline;" 스타일을 행 수준 요소로 변환할 수 있습니다.

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

인라인 요소

span, i, a, img 등 한 줄 안에 표시할 때 일반적으로 너비와 높이를 설정할 수 없는 요소는 인라인 요소입니다.

블록 수준 요소

div, h1, p, li 등 자신의 줄을 차지하고 너비와 높이를 설정할 수 있는 요소는 블록 수준 요소입니다.

블록 수준 요소를 인라인 요소로 변환

블록 수준 요소에 display: inline;을 설정하여 블록 수준 요소를 인라인 요소로 변환합니다. display：inline;就可以让块级元素变成行内元素。

行内元素转换成块级元素

在行内元素中设置display:block;就可以让行内元素变成块级元素。

块级元素或行内元素转换成

块级元素或行内元素中设置display：inline-block;인라인 요소를 블록 수준 요소로 변환

인라인 요소에 display:block;을 설정하여 인라인 요소를 블록 수준 요소로 변환하세요.

블록 수준 요소나 인라인 요소를 다음으로 변환

• 블록 수준 요소나 인라인 요소에 display: inline-block;을 설정하면 블록 수준 요소나 인라인 요소를 인라인 블록으로 바꿀 수 있습니다. 레벨 요소 이며 같은 줄에 표시될 수 있습니다. [추천 튜토리얼:

  CSS 비디오 튜토리얼

  ]

• CSS 표시 속성

• 표시 속성은 요소가 생성해야 하는 상자 유형을 지정합니다.

block 이 요소는 이 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.

인라인 기본값. 이 요소는 요소 앞이나 뒤에 줄 바꿈이 없는 인라인 요소로 표시됩니다. 🎜🎜🎜🎜inline-block 인라인 블록 요소. (CSS2.1에 추가된 새로운 가치) 🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 CSS 행 수준 요소와 블록 수준 요소 간을 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!