Affichage CSS
Affichage et visibilité CSS
L'attribut d'affichage définit la fa?on dont un élément doit être affiché, et l'attribut de visibilité spécifie comment un élément doit être affiché . Visible ou masqué.
Masquer les éléments - display:aucun ou visibilité:hidden
Masquer un élément en définissant l'attribut d'affichage sur "aucun", ou définissez l'attribut de visibilité sur "caché". Notez cependant que ces deux méthodes produiront des résultats différents.
visibilité?: caché peut masquer un élément, mais l'élément caché doit toujours occuper le même espace qu'avant d'être masqué. En d’autres termes, même si l’élément est masqué, il affecte toujours la mise en page.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>這是一個明顯的標(biāo)題</h1>
<h1 class="hidden">這是一個隱藏標(biāo)題</h1>
<p>注意,隱藏標(biāo)題仍然占用空間.</p>
</body>
</html>Exécutez le programme et essayez-le
affichage?: aucun peut être caché Un élément, et les éléments cachés ne prennent pas de place. Autrement dit, non seulement l’élément est masqué, mais l’espace initialement occupé par l’élément dispara?tra également de la mise en page.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>這是一個明顯的標(biāo)題</h1>
<h1 class="hidden">這是一個隱藏的標(biāo)題</h1>
<p>注意,display:none 隱藏不占用空間.</p>
</body>
</html>Exécutez le programme pour l'essayer
Affichage CSS - Blocs et éléments Inline
Un élément block est un élément qui occupe toute la largeur et qui est précédé et suivi de sauts de ligne. Exemples d'éléments de bloc
?:
<h1>
<p>
<div>
Les éléments en ligne n'ont besoin que de la largeur nécessaire et ne forcent pas l'emballage.
Exemples d'éléments en ligne?:
<span>
<a>
Comment modifier l'affichage d'un élément
Vous pouvez modifier les éléments en ligne et les éléments de bloc, et vice versa, pour donner à la page une apparence spécifique . Et respectez toujours les normes du Web.
L'exemple suivant affiche les éléments de liste en tant qu'éléments en ligne?:
<!DOCTYPE html>
<html>
<head>
<style>
li{display:inline;}
</style>
</head>
<body>
<p>這個鏈接列表顯示為一個水平菜單:</p>
<ul>
<li><a href="" target="_blank">HTML</a></li>
<li><a href="" target="_blank">CSS</a></li>
<li><a href="" target="_blank">JavaScript</a></li>
<li><a href="" target="_blank">XML</a></li>
</ul>
</body>
</html>Exécutez le programme pour l'essayer
Exemple
L'exemple suivant utilise l'élément span comme élément de bloc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body>
</html>Exécutez le programme pour l'essayer
