CSS의 표시 속성은 블록 수준 요소와 인라인 요소 간의 상호 변환을 어떻게 구현합니까?

HTML에는 블록 수준 요소와 인라인 요소라는 두 가지 유형의 요소가 있다는 것을 알고 있습니다. 표시 속성은 HTML의 블록 수준 요소와 인라인 요소 간의 상호 변환을 실현할 수 있습니다. 더 이상 고민하지 않고 바로 본문으로 들어가겠습니다.

기본적으로

단락(블록 수준 요소)의 기본 표시 값은 블록이지만 인라인 값으로 렌더링될 수 있습니다.

p{ display: inline;}

모직물?

렌더링이 아닌 의미를 위해 HTML 요소를 선택했기 때문입니다. 단락이 콘텐츠에 가장 적합하다고 결정하면 스타일 지정 목적으로만 태그를 변경할 수 없습니다. CSS는 스타일을 구현합니다.

간단히 말해서 디스플레이를 사용하면 의미를 바꾸지 않고도 요소의 유형을 변경할 수 있습니다.

각 표시 옵션에는 특정 렌더링 동작이 있습니다.

block은 전체 너비를 차지합니다.

inline은 일반 텍스트입니다.

inline-block은 이름에서 알 수 있듯이 블록과 인라인 동작 복합체입니다. 두 세계 모두" 옵션

list-item은 사용 가능한 전체 너비를 차지하는 블록과 유사하지만 추가 글머리 기호

를 표시합니다. 테이블, 테이블 행 및 테이블 셀은 모두 매우 구체적인 항목을 가지고 있지만 예기치 않은 동작을 허용합니다. 더 흥미로운 레이아웃

display: block

이렇게 하면 모든 요소가 블록 요소로 변환됩니다.

이 기술은 클릭 가능한 영역을 늘리기 위해 링크에 자주 사용되며 배경색을 설정하여 쉽게 평가할 수 있습니다.

.menu a{ background: red; color: white;}

<ul class="menu">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">视频</a>
  </li>
  <li>
    <a href="#">登录</a>
  </li></ul>

효과는 다음과 같습니다.

이 링크를 블록으로 변환하면 대상 영역이 늘어납니다.

.menu a{ background: red; color: white; display: block;}

효과는 다음과 같습니다.

display: inline

This 모든 요소를 ​​변환합니다. 요소를 일반 텍스트인 것처럼 인라인으로 변환합니다.

목록 항목이 의미상으로는 유용하지만 시각적으로 유용하지 않은 수평 탐색을 만드는 데 자주 사용됩니다.

<ul class="menu">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">视频</a>
  </li>
  <li>
    <a href="#">登录</a>

효과는 다음과 같습니다.

.menu li{ display: inline;}

효과는 다음과 같습니다.

display: list-item

표시되는 유일한 HTML 요소인 list-item은 (놀랍지도 않게) 목록 항목

및 정의 설명

.

글머리 기호(순서가 지정되지 않은 목록

에 있는 경우) 또는 증분 번호(순서가 지정된 목록

에 있는 경우)를 사용하여 목록 항목을 렌더링합니다.

이 글머리 기호와 숫자의 렌더링은 브라우저마다 다르고 CSS에서 스타일을 지정하기 어렵기 때문에 display: list-item 규칙은 절대 사용되지 않습니다. 실제로

1. 는 더 유연하기 때문에 일반적으로 display: block 또는 display: inline으로 렌더링됩니다.

   display: none

   display: none; HTML 요소를 적용하면 마치 코드에 존재하지 않는 것처럼 웹페이지에서 해당 요소가 제거됩니다.

   <p>php中文网</p>
   <p class="class">PHP中文网</p>
   <p>Php中文网</p>

   .class{ display: none;}

   효과는 다음과 같습니다.
   

   

   코드에 문단이 3개 있는데, 두 번째 문단이 전혀 존재하지 않았던 것처럼 2개만 나타납니다.

   visibility: 숨김

   CSS 속성 가시성 및 표시. 약간 비슷합니다. 앱은 visible:hidden;을 사용하여 페이지의 요소를 숨기지만 보이지 않게만 할 뿐이며 여전히 적절한 공간을 차지합니다.

   <p>哈哈哈哈</p>
   <p class="class">哈哈哈哈哈哈</p>
   <p class="class">哈哈哈哈哈哈哈哈</p>
   <p>哈哈哈哈哈哈哈哈啦</p>

   .class{ visibility: hidden;}

   효과는 다음과 같습니다.

   

   코드에 문단이 5개 있는데 2개만 나타나는데 숨겨진 문단이 차지해야 할 공간은 그대로 있는데 보이지 않습니다.

위 내용은 CSS의 표시 속성은 블록 수준 요소와 인라인 요소 간의 상호 변환을 어떻게 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!