요소 숨기기 - CSS 문제

Linda Hamilton원래의: 2024-11-07 12:22:02367검색

Hiding an element - CSS challenges

이 게시물의 모든 코드는 Github 저장소에서 확인하실 수 있습니다.

여기에서 시각적 요소를 확인할 수 있습니다. 요소 숨기기 - CodeSandbox

요소 숨기기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Hiding Elements</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>





<pre class="brush:php;toolbar:false">.display-none {
  display: none;
}

.outside-by-absolute {
  position: absolute;
  left: -9999px;
}

.outside-by-relative {
  position: relative;
  left: -9999px;
}

.outside-by-margin {
  margin-left: -9999px;
}

.hide-by-opacacity {
  opacity: 0;
}

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.covering-element {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.hidden-element {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hide-by-clip {
  position: absolute;
  width: 200px;
  height: 200px;
  clip: rect(0px, 0px, 0px, 0px);
}

.hide-by-transform {
  transform: scale(0, 0);
}

위 내용은 요소 숨기기 - CSS 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css this github

성명：

이전 기사：누적된 부트스트랩 행에서 간격을 제거하는 방법은 무엇입니까?다음 기사：누적된 부트스트랩 행에서 간격을 제거하는 방법은 무엇입니까?