숨기기에 사용되는 세 가지 속성: 1. 가시성, 속성 값이 "hidden"이면 숨겨진 요소 자체가 위치를 차지할 수 있습니다. 2. 표시, 값이 "none"이면 숨겨진 요소 자체가 위치를 차지할 수 없습니다. 3. 오버플로, 값이 "숨겨져" 있으면 상자 너머의 내용을 숨길 수 있습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS
visibility:hidden
에서 속성 및 값 숨기기 요소 자체를 숨기고 웹페이지에서 해당 위치를 차지합니다visibility:hidden
隐藏元素本身,并且在网页中 占位置
display:none
隐藏元素本身,并且在网页中 不占位置 (常用)
overflow:hidden
display:none 요소 자체를 숨기고 웹 페이지에서 공간을 차지하지 않습니다(일반적으로 사용됨) <p><strong></strong></p>
<code>overflow:hidden
상자 너머의 내용을 숨깁니다. (과잉 내용은 숨겨지지만 그렇지 않습니다. 공간 점유) 예 1: 디스플레이:none은 위치를 차지하지 않고 숨깁니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>隐藏元素</title> <style> * { /* 去除页面默认的边距 */ padding: 0; margin: 0; } .box1 { width: 200px; height: 200px; float: left; background-color: orange; margin: 50px 50px; /* 默认显示,不隐藏 */ display: block; } /* 鼠标悬停在box1隐藏box1 */ .box1:hover { display: none; } .box4 { float: left; width: 200px; height: 200px; background-color: pink; margin: 50px 50px; } </style> </head> <body> <div> <p>box1</p> <p>display: none;</p> </div> <div>普通</div> </body> </html>
예 2: 가시성:hidden, 위치를 차지하며 숨깁니다
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>隐藏元素</title> <style> * { /* 去除页面默认的边距 */ padding: 0; margin: 0; } .box2 { float: left; width: 200px; height: 200px; background-color: skyblue; margin: 50px 50px; } /* 鼠标悬停在box2隐藏box2 */ .box2:hover { visibility: hidden; } .box4 { float: left; width: 200px; height: 200px; background-color: pink; margin: 50px 50px; } </style> </head> <body> <div> <p>box2</p> <p> visibility: hidden; <br /> </p> </div> <div>普通</div> </body> </html>
예 3: Overflow:hidden은 상자 너머의 콘텐츠를 숨깁니다 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>隐藏元素</title>
<style>
* {
/* 去除页面默认的边距 */
padding: 0;
margin: 0;
}
.box3 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
margin: 50px 50px;
}
.box4 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
margin: 50px 50px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<p>box3</p>
<p>
内容超出了
</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
</div>
<div>
<p>box4</p>
<p>
overflow: hidden;<br />内容超出,超出部分隐藏
</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
<p>我敲多行~</p>
</div>
</body>
</html>
위 내용은 CSS에서 숨기는 데 사용되는 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!