Quelle est la différence entre overflow : auto et overflow : scroll en CSS ?-tutoriel HTML-php.cn

Quelle est la différence entre overflow : auto et overflow : scroll en CSS ?

WBOY

Libérer： 2023-08-28 11:29:02

avant

1039 Les gens l'ont consulté

overflow: auto 和 overflow: scroll 在CSS中有什么区别？

En CSS, l'attribut 'overflow' est utilisé pour spécifier le débordement du contenu d'un élément HTML. Par exemple, si la hauteur de l'élément div est "500px" et la hauteur du contenu interne est "1000px", nous devons rendre le contenu défilable.

Dans ce tutoriel, nous apprendrons la différence entre les valeurs « auto » et « scroll » de la propriété CSS « overflow ».

Débordement : automatique en CSS

En CSS, overflow : auto définit le débordement des éléments HTML sur auto. Cela signifie que si le contenu du div déborde, il définira « scroll » sur la valeur de la propriété overflow ; sinon, il définira « none » sur la valeur de la propriété overflow.

Grammaire

Les utilisateurs peuvent utiliser la propriété CSS overflow: auto selon la syntaxe suivante.

overflow: auto;

Copier après la connexion

Exemple

Dans l'exemple ci-dessous, nous avons créé un élément HTML div et donné le nom de classe « principale ». De plus, nous définissons une largeur et une hauteur fixes pour l'élément div. De plus, nous définissons la propriété CSS « overflow: auto »

Dans la sortie, l'utilisateur peut constater qu'il affiche des barres de défilement car la taille du contenu est plus grande que la taille de l'élément div.

<html>
<head>
   <style>
      .main {
         height: 100px;
         width: 500px;
         font-size: 1rem;
         overflow: auto;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <h2> <i> overflow: auto </i> in CSS </h2>
   <div class = "main">
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
   </div>
</body>
</html>

Copier après la connexion

Exemple

Dans l'exemple ci-dessous, les dimensions du contenu interne de l'élément div sont plus petites que les dimensions de l'élément div. Dans la sortie, l'utilisateur peut observer que l'élément div ne peut pas défiler car le contenu ne déborde pas.

<html>
<head>
   <style>
      .main {
         height: 200px;
         width: 100px;
         font-size: 1rem;
         overflow: auto;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <h2> <i> overflow: auto </i> in CSS </h2>
   <div class = "main">
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
      <p> TutorialsPoint! </p>
   </div>
</body>
</html>

Copier après la connexion

Débordement : défilement en CSS

"overflow:scroll" affiche toujours les barres de défilement dans les éléments HTML, même si le contenu de l'élément ne déborde pas, et il affiche toujours les barres de défilement horizontales et verticales.

Grammaire

Overflow: scroll;

Copier après la connexion

Exemple

Dans l'exemple ci-dessous, nous avons ajouté du contenu à un élément div qui correspond aux dimensions de l'élément div. De plus, nous utilisons CSS pour définir "overflow:scroll" pour l'élément div.

Dans la sortie, l'utilisateur peut observer que même si le contenu de l'élément div ne déborde pas, il affiche la barre de défilement.

<html>
<head>
   <style>
      .main {
         height: 200px;
         width: 300px;
         font-size: 1rem;
         overflow: scroll;
         border: 2px solid blue;
      }
   </style>
</head>
<body>
   <h2> <i> overflow: scroll </i> in CSS </h2>
   <div class = "main">
      <p> This is a content. </p>
      <p> This is a content. </p>
      <p> This is a content. </p>
      <p> This is a content. </p>
   </div>
</body>
</html>

Copier après la connexion

Différence entre débordement : auto et débordement : défilement

Voici le tableau des différences pour les propriétés CSS overflow:auto et overflow:scroll.

Débordement : automatique	Débordement : Défilement
Afficher les barres de défilement uniquement lorsque le contenu de l'élément HTML déborde ou ne correspond pas aux dimensions de l'élément d'origine.	Il affiche toujours des barres de défilement.

Exemple

Dans l'exemple ci-dessous, nous démontrons ensemble le résultat de overflow:scroll et overflow:automatic. Nous définissons overflow:scroll pour l'élément div avec le nom de classe "scroll" et définissons overflow:auto pour l'élément div avec le nom de classe "auto".

Dans la sortie, l'utilisateur peut observer que le overflow:scroll affiche la barre de défilement, mais pas le overflow:auto.

<html>
<head>
   <style>
      .scroll {
         height: 220px;
         width: 500px;
         font-size: 1rem;
         overflow: scroll;
         border: 2px solid blue;
      }
      .auto {
         height: 200px;
         width: 500px;
         overflow: auto;
         border: 3px dotted red;
         margin: 10px;
      }
   </style>
</head>
<body>
   <h2> Difference between overflow: scroll and overflow: auto in CSS</h2>
   <div class = "scroll">
      <p> overflow: scroll. </p>
      <p> overflow: scroll. </p>
      <p> overflow: scroll. </p>
      <p> overflow: scroll. </p>
      <p> overflow: scroll. </p>
   </div>
   <div class = "auto">
      <p> overflow: auto. </p>
      <p> overflow: auto. </p>
      <p> overflow: auto. </p>
      <p> overflow: auto. </p>
      <p> overflow: auto. </p>
   </div>
</body>
</html>

Copier après la connexion

Les utilisateurs ont appris la différence entre les propriétés CSS « overflow:auto » et « overflow:scroll ». La seule différence entre les deux réside dans l'affichage des barres de défilement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!