Rumah > Artikel > hujung hadapan web > Menyembunyikan elemen - cabaran CSS
Menyembunyikan elemen - cabaran CSS
- Linda Hamiltonasal
- 2024-11-07 12:22:02432semak imbas
Anda boleh menemui semua kod dalam siaran ini di repo Github.
Anda boleh menyemak visual di sini Menyembunyikan elemen - CodeSandbox
Menyembunyikan unsur
<!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);
}
Atas ialah kandungan terperinci Menyembunyikan elemen - cabaran CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk Menghapuskan Jurang dalam Baris Bootstrap Bertindan?Artikel seterusnya：Bagaimana untuk Menghapuskan Jurang dalam Baris Bootstrap Bertindan?