CSS로 div를 숨기는 방법
- 藏色散人원래의
- 2021-04-25 09:30:5010449검색
CSS로 div를 숨기는 방법: 1. "display:none"을 사용하여 div를 숨깁니다. 2. "visibility: hide;"를 사용하여 div를 숨깁니다.
이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
보통 웹사이트 레이아웃을 할 때 p를 숨기고 싶은데, CSS를 사용하여 p의 표시 및 숨기기를 제어하는 방법을 모르시는 분들이 많으시죠? CSS로 p를 숨기는 방법을 설명하겠습니다.
1 div를 숨기려면 display:none을 사용하세요.
display:none 속성을 사용하면 텍스트와 이미지를 포함한 모든 정보를 숨길 수 있습니다. 구문은 다음과 같습니다.
dc6dce4a544fdca2df29d5ac0ea9906b这里你是看不到的16b28748ea4df4d9c2150843fecfba68
p에서 CSS 스타일을 사용하면 display:none 속성을 사용하여 콘텐츠를 숨길 수 있으며, 동시에 숨겨진 콘텐츠는 공간을 차지하지 않습니다. 일반적으로 우리는 js 통계를 사용합니다. 표시된 아이콘을 숨기는 코드입니다.
2. div
visibility 속성을 숨기려면 visible:hidden을 사용하여 요소가 표시되는지 여부를 지정합니다.
이 속성은 요소에 의해 생성된 요소 상자를 표시할지 여부를 지정합니다. 이는 요소가 여전히 원래 공간을 차지하지만 완전히 보이지 않을 수 있음을 의미합니다. 값 축소는 테이블 레이아웃에서 열이나 행을 제거하기 위해 테이블에서 사용됩니다.
속성 값:
표시되는 기본값. 요소가 표시됩니다.
숨겨진 요소는 보이지 않습니다.
collapse 테이블 요소에 사용되는 경우 이 값은 행이나 열을 삭제하지만 테이블 레이아웃에는 영향을 주지 않습니다. 행이나 열이 차지하는 공간을 다른 콘텐츠에 사용할 수 있습니다. 이 값이 다른 요소에 사용되면 "숨김"으로 렌더링됩니다.
3. div를 숨기려면 opacity: 0을 사용하세요.
opacity 속성은 요소의 투명도를 설정하는 것을 의미합니다. 요소의 경계 상자를 변경하도록 설계되지 않았습니다.
즉, 불투명도를 0으로 설정하면 요소가 시각적으로만 숨겨집니다. 요소 자체는 여전히 자체 위치를 차지하고 웹 페이지 레이아웃에 기여합니다. 이는 가시성: 위의 숨겨진 것과 유사합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--opacity: 0</title>
<style>
div{
height: 20px;
}
.demo{
width: 800px;
height: 60px;
margin: 50px auto;
border: 1px solid red;
}
.hide,span{
opacity: 0;
}
</style>
</head>
<body>
<div>
<div sty>元素隐藏1--opacity: 0</div>
<div>元素隐藏2--opacity: 0</div>
<div>元素隐藏3--opacity: 0</div>
</div>
<div>
<div>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</div>
<div>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</div>
</div>
</body>
</html>렌더링:
[추천 학습: css 비디오 튜토리얼]
위 내용은 CSS로 div를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!