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中文网(php.cn)</title>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意,隐藏标题仍然占用空间.</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中文网(php.cn)</title>
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏的标题</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中文网(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
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
