Apakah cara untuk menyembunyikan elemen dalam css

Kaedah: 1. Tetapkan pernyataan "display:none"; 2. Tetapkan pernyataan "visibility:hidden" 3. Tetapkan pernyataan "opacity:0" ; 5. Gunakan "position:absolute;top:-9999px;"

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara menyembunyikan elemen dalam css

paparan:tiada

Menetapkan paparan elemen kepada tiada adalah yang paling kaedah elemen tersembunyi yang biasa digunakan.

.hide {
    display:none;
}

Selepas menetapkan elemen untuk memaparkan:tiada, elemen akan hilang sepenuhnya pada halaman dan ruang yang asalnya diduduki oleh elemen akan diduduki oleh elemen lain, yang bermaksud ia akan menyebabkan penyemak imbas susun semula dan Lukis Semula.

keterlihatan:tersembunyi

Menetapkan keterlihatan elemen kepada tersembunyi juga merupakan kaedah biasa untuk menyembunyikan elemen Perbezaan daripada paparan:tiada ialah selepas elemen hilang daripada halaman, ruang ia menduduki tinggalan akan dikekalkan, jadi ia hanya akan menyebabkan penyemak imbas melukis semula tetapi tidak mengalir semula.

.hidden{
   visibility:hidden
}

keterlihatan: tersembunyi sesuai untuk senario di mana anda tidak mahu reka letak halaman berubah selepas elemen disembunyikan

opacity:0

Saya percaya semua orang tahu maksud atribut kelegapan Ketelusan elemen Selepas menetapkan ketelusan elemen kepada 0, elemen itu juga tersembunyi di mata pengguna kami. Ini adalah kaedah menyembunyikan elemen.

.transparent {
     opacity:0;
}

Satu perkara kaedah ini mempunyai persamaan dengan visibility:hidden ialah elemen masih menduduki ruang selepas disembunyikan, tetapi kita semua tahu bahawa selepas menetapkan ketelusan kepada 0, elemen itu hanya tidak kelihatan, dan ia masih wujud pada halaman.

Tetapkan atribut model kotak seperti ketinggian dan lebar kepada 0

Ini adalah teknik yang agak pelik yang saya ringkaskan, ia adalah untuk menetapkan margin, sempadan, padding, ketinggian dan lebar daripada elemen. Atribut yang mempengaruhi model kotak elemen ditetapkan kepada 0. Jika terdapat sub-elemen atau kandungan dalam elemen, limpahannya: tersembunyi juga harus ditetapkan untuk menyembunyikan sub-elemennya.

.hiddenBox {
    margin:0;
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

Kaedah ini tidak praktikal dan mungkin mempunyai beberapa masalah. Tetapi beberapa kesan halaman yang biasa kami gunakan boleh dilengkapkan dengan cara ini, seperti animasi slideUp jquery, yang menetapkan limpahan elemen: tersembunyi, dan kemudian secara berterusan menetapkan ketinggian elemen dan margin-atas melalui pemasa , margin-bottom, border-. atas, sempadan-bawah, padding-top, padding-bottom adalah 0, sekali gus mencapai kesan slideUp.

kedudukan: mutlak, tetapkan elemen untuk disembunyikan

span{
	position: absolute;
	top: -9999px;
   	left: -9999px;
}

kedudukan: mutlak, prinsip utama menetapkan elemen untuk disembunyikan ialah menetapkan bahagian atas dan kiri elemen cukup besar Nombor negatif menjadikannya tidak kelihatan pada skrin.

Pembelajaran yang disyorkan: "tutorial video css"

Atas ialah kandungan terperinci Apakah cara untuk menyembunyikan elemen dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!