Résolvez la différence entre l'affichage et la visibilité dans le didacticiel 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 ]
En même temps, pour la différence entre display:inline; et float:left;, vous pouvez vous référer à cet article :
(display fait référence à l'état d'affichage, inline fait référence à inline, qui se caractérise par être proche de l'élément en ligne précédent, généralement les éléments en ligne par défaut sont span, a, em, strong, etc. Et float signifie flottant, float : left est la forme flottante pour les éléments au niveau du bloc, et ce sont deux états différents)
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>flottant et en ligne</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 est un 茅l茅ment en ligne/en ligne, et lui attribuer une largeur n'a aucun effet. </span> <span style="width:100px; float:right;">span est un 茅l茅ment inline/inline. Donnez-lui une largeur de 100px+float:right, vous pouvez voir qu'il a une largeur. </span> <div> <p>Ce li est d茅fini comme inline/inline, et d茅finir la largeur n'a aucun effet</p> <ul id="inline"> <li>tester</li> <li>tester</li> </ul> </div> <div> <p>Ce li est d茅fini comme inline/inline+float:left, et d茅finir la largeur a un effet</p> <ul id="float"> <li>tester</li> <li>tester</li> </ul> </div>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Css utilise l'expression js pour réaliser l'échange d'effets_ExperienceArticle suivant：Css utilise l'expression js pour réaliser l'échange d'effets_Experience

Articles Liés

Voir plus

• Résumé de ce à quoi vous devez faire attention à propos de Border lors de l'écriture de CSS
• Comment réaliser une sélection multi-styles et un changement de styles en temps réel_Échange d'expérience
• Analyse détaillée de l'utilisation du chapiteau
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别

Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！

À propos de nousClause de non-responsabilitéSitemap

© php.cn All rights reserved