CSS 요소 숨기기 및 표시

표시 및 숨기기

1. 소개:

표시: 단락이 인라인 상자를 생성하도록 합니다

가시성: 속성은 요소가 표시되는지 여부를 지정합니다.

2. 표시 속성

값	설명
none	이 요소는 표시되지 않습니다.
block	이 요소는 이 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.
inline	기본값. 이 요소는 요소 앞이나 뒤에 줄 바꿈이 없는 인라인 요소로 표시됩니다.
inline-block	inline-block 요소. (CSS2.1의 새로운 값)
list-item	이 요소는 목록으로 표시됩니다.
run-in	이 요소는 컨텍스트에 따라 블록 수준 요소 또는 인라인 요소로 표시됩니다.
compact	CSS에는 Compact 값이 있었지만 폭넓은 지원이 부족하여 CSS2.1에서는 제거되었습니다.
marker	CSS에는 값 표시자가 있지만 광범위한 지원이 부족하여 CSS2.1에서는 제거되었습니다.
table	이 요소는 테이블 앞뒤에 줄 바꿈이 있는 블록 수준 테이블(f5d188ed2c074f8b944552db028f98a1과 유사)으로 표시됩니다.
inline-table	이 요소는 인라인 테이블(f5d188ed2c074f8b944552db028f98a1과 유사)로 표시되며 테이블 앞뒤에 줄 바꿈이 없습니다.
table-row-group	이 요소는 하나 이상의 행 그룹으로 표시됩니다(92cee25da80fac49f6fb6eec5fd2c22a와 유사).
table-header-group	이 요소는 하나 이상의 행 그룹으로 표시됩니다(ae20bdd317918ca68efdc799512a9b39와 유사).
table-footer-group	이 요소는 하나 이상의 행 그룹으로 표시됩니다(06669983c3badb677f993a8c29d18845와 유사).
table-row	이 요소는 테이블 행으로 표시됩니다(a34de1251f0d9fe1e645927f19a896e8와 유사).
table-column-group	이 요소는 하나 이상의 열 그룹으로 표시됩니다(879b49175114808d868f5fe5e24c4e0b와 유사).
table-column	이 요소는 셀 열로 표시됩니다(581cdb59a307ca5d1e365becba940e05와 유사)
table-cell	이 요소 표시됩니다 테이블로 셀 표시(b6c5a531a458a2e790c1fd6421739d1c 및 b4d429308760b6c2d20d6300079ed38e와 유사)
table-caption	이 요소는 테이블 제목으로 표시됩니다(165ce83cfd62d7f5daa3cc4a4085ce33)
inherit	은 표시 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

3. 가시성 속성

visiblehiddencollapseinherit

4. "display:none" 및 "visibility:hidden"

(1) display:none: 요소가 숨겨진 후 원래 위치를 차지하지 않습니다

(2) visible:hidden: 요소가 숨겨진 후 , 원래 위치를 차지합니다

5. 예

  h1{
          visibility: hidden;//隐藏占用元素空间
          display: none;//隐藏不占用空间
      }
  p{
          display: inline;//改变为内联元素
      }
  h2{
          display: block;//改变块级元素
      }

관련 권장 사항:

CSS 요소의 중심 레이아웃의 간단한 방법에 대한 자세한 설명

값	설명
기본값입니다. 요소가 표시됩니다.
요소는 보이지 않습니다.
테이블 요소에 사용되는 경우 이 값은 행이나 열을 삭제하지만 테이블 레이아웃에는 영향을 주지 않습니다. 행이나 열이 차지하는 공간을 다른 콘텐츠에 사용할 수 있습니다. 이 값이 다른 요소에 사용되면 "숨김"으로 렌더링됩니다.
은 가시성 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

위 내용은 CSS 요소 숨기기 및 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!