디스플레이와 가시성의 차이

이번에는 디스플레이와 가시성의 차이점과 디스플레이 및 가시성 사용 시 주의사항에 대해 알려드리겠습니다.

가시성 숨겨진 개체는 표시될 때 개체가 차지하는 물리적 공간도 유지하지만 표시는 그렇지 않습니다.

vilibility: hided(숨김), visible(display) style="vislbility:hidden"

display: none(숨김), block(display) style="display:none"

저장할 수 있습니다. 효과를 보려면 코드 아래에 있습니다.

구체적인 단계:

코드 예:

< p style="border:1px solid #000;background:#eee">
< span style="width:200;height:200;visibility:hidden"></span>
←SS属性为visibility:hidden的对象
< /p><br>
< p style="border:1px solid #000;background:#666">
< span style="width:200;height:200;display:none"></span>
←SS属性为display:none的对象
< /p>

특별 팁

가시성 속성을 사용하여 숨겨진 개체를 제어하고 표시될 때 여전히 위치를 차지하지만 디스플레이는 그렇지 않습니다.

특별 참고 사항

display 속성은 요소의 표시 모드를 설정합니다. 해당 스크립트 기능은 없음, 블록 및 인라인입니다.

none은 요소를 숨기고 공간이 표시될 때 요소를 유지하지 않습니다.

블록 모드에서 요소를 표시합니다.

inline 요소를 인라인으로 표시합니다.

inline-block 개체는 인라인 요소로 표시되지만 모든 하위 개체는 블록 요소로 표시되며 인접한 인라인 요소는 같은 줄에 표시되며 공백이 허용됩니다.

list-item은 블록 요소를 목록 개체로 표시하고 항목 구두점을 추가할 수 있습니다. (IE6.0+ 지원 필요)

table-header-group은 요소를 tHead 요소와 동일한 tableheader 그룹으로 표시합니다.

table-footer-group은 요소를 tFoot 요소와 동일한 테이블 바닥글 그룹으로 표시합니다.

visibility 속성은 요소 표시 여부를 설정합니다. 선택적 값은 hide, hide 및 visible입니다.

inherit visibility 속성을 상속합니다. 상위 요소의 설정.

hidden 요소를 숨기지만 요소가 차지하는 공간은 유지합니다.

보이는 표시 요소(기본값).

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

잔물결 애니메이션을 만들기 위한 CSS

css의 배경 첨부 사용에 대한 자세한 설명

위 내용은 디스플레이와 가시성의 차이의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!