CSS에서 display:none과 visible:hidden의 차이점을 깊이 이해하세요.
- yulia원래의
- 2018-09-26 14:37:282650검색
때때로 프로젝트에서 일부 요소를 숨겨야 하는 경우에는 display:none 또는 visible:hidden을 사용합니다. 두 방법 모두 숨겨진 효과를 얻을 수 있는데, 두 방법의 차이점은 무엇인가요? 이 글에서는 CSS에서 display:none과 visible:hidden의 차이점에 대해 설명합니다. 도움이 필요한 친구들이 참고할 수 있습니다.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index4</title>
</head>
<body>
<div>
<!--display:none是隐藏元素，隐藏后它并不会再占用之前所占的区域(也就是说，连它自己的位置都隐藏掉了)-->
<div style="display:none; width:100px;height:100px">小苹果</div>
<div style="width:100px;height:100px; background-color:yellow">A</div>
<!--visibility:hidden是隐藏元素，隐藏后，它还会占用之前所占的区域（也就是说仅仅是隐藏它自己的外观，并不会隐藏自己的位置）-->
<div style="visibility: hidden; width: 100px; height: 100px">圣女果</div>
<div style="width:100px;height:100px; background-color:yellow">B</div>
</div>
</body>
</html>
또한 서버 측 컨트롤에는 Visible 속성이 있습니다.
는 컨트롤이 표시되는지 여부를 나타냅니다. Visible=False인 경우 렌더링 중에 컨트롤이 무시됩니다. 즉, 이 컨트롤은 HTML을 생성하지 않습니다. 코드. 즉, 해당 컨트롤이 전혀 존재하지 않으므로 해당 영역을 차지하지 않습니다.
위 내용은 CSS에서 display:none과 visible:hidden의 차이점을 깊이 이해하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.