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

• JSDOMReady事件的六种实现方法总结
• CSS实现页面各种列布局的示例
• 纯CSS3全屏响应式幻灯片特效
• 纯CSS3超酷彩色3D按钮样式
• 超炫CSS3六边形菜单动画特效

• Maison

• Cours

• Questions et réponses

• Mon

• Maison
• Cours
• Article
• Questions et réponses
• Dictionnaire
• Manuel
• Télécharger
• Sujet

Maison

Article

Questions et réponses

Cours

Sujet

Télécharger

Jeu

Dictionnaire

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）