CSS에서 요소를 숨기는 방법은 무엇입니까?

방법: 1. "display:none" 문을 설정합니다. 2. "visibility:hidden" 문을 설정합니다. 3. "opacity:0" 문을 설정합니다. 4. 상자 모델 속성을 0으로 설정합니다. "위치:절대" ;top:-9999px;" 진술.

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

css에서 요소를 숨기는 방법

display:none

요소 표시를 없음으로 설정하는 것은 요소를 숨기는 데 가장 일반적으로 사용되는 방법입니다.

.hide {
    display:none;
}

요소를 표시:없음으로 설정하면 해당 요소가 페이지에서 완전히 사라지고 원래 요소가 차지했던 공간이 다른 요소로 채워지게 됩니다. 즉, 브라우저가 리플로우되고 다시 그려지게 됩니다.

visibility: Hidden

요소의 가시성을 숨김으로 설정하는 것도 요소를 숨기는 일반적인 방법입니다. display:none과의 차이점은 요소가 페이지에서 사라진 후에도 해당 요소가 차지하는 공간이 그대로 유지된다는 것입니다. 브라우저가 리플로우 없이 다시 그리게 됩니다.

.hidden{
   visibility:hidden
}

visibility:hidden은 요소가 숨겨진 후 페이지 레이아웃이 변경되는 것을 원하지 않는 시나리오에 적합합니다.

opacity:0

opacity 속성 저는 이것이 요소의 투명도를 나타낸다는 것을 모두가 알고 있다고 믿습니다. 요소의 투명도를 0으로 설정하면 사용자의 눈에도 요소가 숨겨지는 방식입니다.

.transparent {
     opacity:0;
}

이 방법과 visible:hidden의 한 가지 공통점은 요소가 숨겨진 후에도 여전히 공간을 차지한다는 것입니다. 그러나 투명도를 0으로 설정한 후에도 요소는 보이지 않고 페이지에 여전히 존재한다는 것을 우리 모두 알고 있습니다. .

높이, 너비 등의 상자 모델 속성을 0으로 설정

이것은 제가 정리한 다소 이상한 기술입니다. 간단히 말해서 영향을 미치는 여백, 테두리, 패딩, 높이 및 너비와 같은 요소의 속성을 설정하는 것입니다. 요소 상자 모델을 0으로 설정합니다. 요소 내에 하위 요소나 콘텐츠가 있는 경우 하위 요소를 숨기려면 Overflow:hidden도 설정해야 합니다. 이는 트릭입니다.

.hiddenBox {
    margin:0;
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

이 방법은 실용적이지 않으며 문제가 있을 수 있습니다. 그러나 우리가 일반적으로 사용하는 일부 페이지 효과는 요소의 Overflow:hidden을 설정한 다음 타이머, margin-top을 통해 요소의 높이와 여백 상단을 지속적으로 설정하는 jquery의 SlideUp 애니메이션과 같이 이러한 방식으로 완료될 수 있습니다. Bottom, border-top, border-bottom, padding-top, padding-bottom이 0이므로 슬라이드업 효과를 얻습니다.

위치: 절대, 요소를 숨기도록 설정

span{
	position: absolute;
	top: -9999px;
   	left: -9999px;
}

위치: 절대, 요소를 숨기도록 설정하는 주요 원칙은 요소의 상단과 왼쪽을 요소의 상단과 왼쪽을 충분히 큰 음수로 설정하여 요소를 숨길 수 있도록 설정하는 것입니다. 화면.

추천 학습: "css 동영상 튜토리얼"

위 내용은 CSS에서 요소를 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!