CSS에서 display:none과 visible:hidden의 구체적인 차이점에 대한 자세한 설명
- 黄舟원래의
- 2017-07-24 10:36:332213검색
디스플레이:없음은 존재하지 않고 로드되지 않은 것으로 처리됩니다. 즉, 숨겨진 개체를 위해 물리적 공간이 예약되지 않습니다. 즉, 개체가 페이지에서 완전히 사라집니다.
visibility:hidden은 숨기지만 탐색할 때 위치를 유지합니다. 즉, 웹 페이지에서 개체를 보이지 않게 하지만 웹 페이지에서 개체가 차지하는 공간은 변경되지 않습니다.
display:none 속성을 사용한 후 HTML 요소(객체)의 너비, 높이 및 기타 속성 값이 "손실"됩니다.
visible:hidden 속성을 사용한 후 HTML 요소는 (객체)는 시각적으로만 볼 수 있습니다. 보이지 않는(완전히 투명함), 그것이 차지하는 공간적 위치는 여전히 존재합니다. 즉, 높이, 너비 등의 속성 값은 그대로 유지됩니다.
코드 데모:
테이블의 초기 상태:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title></title></head><body>
<table id="table1" style="border: 2px dashed red;background-color: #e2e2e2;padding: 5px">
<tr>
<td>A1 </td>
<td>A2 </td>
</tr>
<tr>
<td>B1 </td>
<td>B2 </td>
</tr>
</table></body></html>효과는 다음과 같습니다.
테이블의 두 번째 행에 있는 tr에 style="display:none"을 추가한 후:
테이블에서 두 번째 줄의 tr에 style="visibility:hidden"을 추가한 후:
display:none 및 visible:hidden은 둘 다 웹 페이지에서 요소를 숨길 수 있지만 둘 사이에는 차이점이 있습니다.
display :none ---숨겨진 개체를 위한 물리적 공간을 예약하지 마세요. 즉, 일반인의 관점에서 개체는 페이지에서 완전히 사라지며 보거나 만질 수 없습니다.
visible:hidden--- 웹 페이지에서 개체가 보이지 않게 하지만 웹 페이지에서 개체가 차지하는 공간은 변경되지 않습니다. 일반인의 용어로는 보이지 않지만 만질 수 있다는 의미입니다.
예:
<html> <head> <title>display:none和visible:hidden的区别</title> </head> <body > <span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br /> <span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span> </body> </html>
위 내용은 CSS에서 display:none과 visible:hidden의 구체적인 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!