Selesaikan perbezaan antara paparan dan keterlihatan dalam Tutorial CSS_Basic

Kebanyakan orang mudah mengelirukan paparan sifat CSS dan keterlihatan Mereka kelihatan sama, tetapi sebenarnya mereka sangat berbeza.
Atribut keterlihatan digunakan untuk menentukan sama ada elemen dipaparkan atau tersembunyi, yang diwakili oleh visibility="visible|hidden" (terlihat bermaksud dipaparkan, tersembunyi bermaksud tersembunyi).
Apabila keterlihatan ditetapkan kepada "tersembunyi", walaupun elemen itu tersembunyi, ia masih menempati kedudukan asalnya. Contoh:

<div onclick="toggleVisibility(this)" style="position:relative"> </div>Barisan pertama teks akan mencetuskan atribut "tersembunyi" dan "kelihatan" Beri perhatian kepada perubahan dalam baris kedua. <div> </div>Oleh kerana keterlihatan akan mengekalkan kedudukan elemen, jadi walaupun baris pertama tidak kelihatan, kedudukan masih ada, dan kandungan baris kedua tidak akan bergerak ke atas atau ke bawah.
[Ctrl+A Pilih semua Nota: Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan

]

Ambil perhatian bahawa apabila elemen Selepas disembunyikan, ia tidak lagi boleh menerima peristiwa lain, jadi dalam sekeping kod pertama, apabila ia ditetapkan kepada "tersembunyi", ia tidak lagi boleh menerima peristiwa respons, jadi mustahil untuk mengklik yang pertama satu dengan tetikus untuk dipaparkan.
Sebaliknya, atribut paparan sedikit berbeza. Atribut keterlihatan menyembunyikan elemen tetapi mengekalkan kedudukan terapungnya, manakala paparan sebenarnya menetapkan ciri terapung elemen.
Apabila paparan ditetapkan untuk menyekat, semua elemen dalam bekas akan dianggap sebagai satu blok, sama seperti elemen

(Anda sebenarnya boleh menetapkan paparan:blok supaya ia berfungsi seperti

.
Menetapkan paparan kepada sebaris akan menjadikannya berkelakuan seperti elemen sebaris --- walaupun ia adalah Elemen Sekat biasa seperti

juga akan digabungkan menjadi aliran keluaran seperti
Lihat kod dan kesan contoh saya di bawah:

<div> <span id="blueText" onclick="toggleDisplay(this)" style="color:blue;position:relative;cursor:hand;"> </span>Klik pada teks </div> biru untuk melihat kesannya.
[Ctrl+A Pilih semua Nota:

Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan
]

Akhir sekali, paparan ditetapkan :none, maka elemen sebenarnya dialih keluar dari halaman, dan elemen di bawahnya akan diisi secara automatik. (Pada masa ini, elemen yang menggunakan paparan: tiada; adalah bersamaan dengan hilang, manakala keterlihatan: tersembunyi; hanya bermaksud tersembunyi dan kedudukan masih ada.)

Atribut paparan ialah blok, sebaris, tiada nilai dan kes penggunaan keterlihatan: tersembunyi; Contoh nyahpepijat: <h1></h1> <p>Atribut paparan ialah blok, sebaris, tiada nilai dan penyahpepijatan menggunakan keterlihatan: tersembunyi;<span id="oSpan" style="background-color: #CFCFCF;"> </span></p>Ini ialah SPAN<p> dalam ayat.<input type="button" value="Inline" onclick="oSpan.style.display='inline'"> <input type="button" value="Block" onclick="oSpan.style.display='block'"> <input type="button" value="None" onclick="oSpan.style.display='none'"> <input type="button" value="Hidden" onclick="oSpan.style.visibility='hidden'"> <input type="button" value="Visible" onclick="oSpan.style.visibility='visible'"> </p> <ul> <li> </li> <li>Tetapkan elemen untuk menyekat, dan garisan akan membalut selepas elemen. </li> <li>Tetapkan elemen kepada sebaris, yang akan menghapuskan pembalut elemen. </li> </ul>Tetapkan elemen kepada tiada untuk menyembunyikan kandungan elemen.
[Ctrl+A untuk memilih semua Nota:

Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semulanya untuk melaksanakan ]
Pada masa yang sama, untuk perbezaan antara paparan:sebaris; dan apungan:kiri;, anda boleh merujuk artikel ini:
(paparan merujuk kepada keadaan paparan, sebaris merujuk kepada sebaris, yang dicirikan sebagai dekat dengan elemen sebaris sebelumnya , biasanya unsur sebaris lalai ialah span, a, em, kuat, dsb. Dan apungan bermaksud terapung, apungan: kiri ialah bentuk terapung untuk elemen peringkat blok, dan ia adalah dua keadaan berbeza)
http. ://www.andymao.com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>terapung & sebaris</title> <style> *{text-align:center;padding:4px;} div,p{text-align:left;} span{/*float:right;*/ background:#f5f5f5;border-left:1px #eee solid;border-top:1px #eee solid;border-right:1px #ccc solid;border-bottom:1px #ccc solid;} ul#inline li{ display:inline; list-style:none;border-left:1px #ccc solid;width:300px; background:#f5f5f5;/* float:left*/;} ul#float li{ float:left;display:inline; list-style:none;border-left:1px #666 solid;width:300px; background:#f5f5f5; } </style> <span style="width:300px;">Span ialah elemen sebaris/sebaris, dan memberikan lebar padanya tidak mempunyai kesan. </span> <span style="width:100px; float:right;">span ialah elemen sebaris/sebaris. Berikannya lebar 100px+float:right; </span> <div> <p>Li ini ditakrifkan sebagai sebaris/sebaris, dan tetapan lebar tidak mempunyai kesan</p> <ul id="inline"> <li>ujian</li> <li>ujian</li> </ul> </div> <div> <p>Li ini ditakrifkan sebagai inline/inline+float:left, dan menetapkan lebar mempunyai kesan</p> <ul id="float"> <li>ujian</li> <li>ujian</li> </ul> </div>

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：Css menggunakan ungkapan js untuk mencapai pertukaran effect_ExperienceArtikel seterusnya：Css menggunakan ungkapan js untuk mencapai pertukaran effect_Experience

Artikel berkaitan

Lihat lagi

• Ringkasan perkara yang perlu anda perhatikan tentang Border semasa menulis CSS
• Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman
• Analisis penggunaan terperinci marquee
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved