Savez-vous comment utiliser l’attribut CSS overflow ? On vous le présente en détail ! Nous avons accumulé une certaine expérience et souhaitons la partager avec vous. Veuillez vous corriger mutuellement.
Valeur de la propriété de débordement CSS :
1. visible : Valeur par défaut, le contenu ne sera pas tronqué et sera présenté en dehors de la boîte de l'élément ;
2. caché : le contenu sera coupé et le contenu restant sera invisible ;
3. défilement : le contenu sera coupé, mais le navigateur affichera des barres de défilement pour afficher le contenu restant ;
4. auto : Si le contenu est coupé, le navigateur affichera des barres de défilement pour afficher le contenu restant ;
Il existe également deux propriétés sœurs de overflow, overflow-y et overflow-x, qui sont rarement utilisées. Examinons chacune de ces valeurs et discutons de l'utilisation et des techniques courantes.
(1) Automatique
La valeur automatique du débordement est très similaire à celle du défilement. La seule chose qu'elle résout est le problème des barres de défilement qui apparaissent lorsque vous n'en avez pas besoin.
(2)Caché
La valeur opposée à la valeur par défaut visible est masquée. Cela cachera tout ce qui sort des sentiers battus. Ceci est très utile pour gérer du contenu dynamique qui peut entraîner des problèmes de mise en page en raison d'un débordement de contenu. Cependant, n'oubliez pas que le contenu masqué à l'aide de cette méthode ne sera pas visible du tout (sauf si vous regardez le code source). Par exemple, si certains utilisateurs définissent la police par défaut de leur navigateur pour qu'elle soit plus grande que ce que vous souhaitiez, vous pousserez du texte en dehors de la zone et le masquerez complètement.
(3)Visible
Si vous ne définissez pas l'attribut de débordement, la valeur par défaut de l'attribut de débordement est visible. De manière générale, il n'y a aucune raison de définir spécifiquement la propriété overflow sur visible, sauf si vous souhaitez remplacer la valeur à laquelle elle est définie ailleurs. La chose importante à retenir ici est que même si le contenu en dehors de la boîte est visible, il n’affecte pas le flux de travail de la page. D'une manière générale, vous n'avez au moins pas besoin de définir une hauteur fixe pour les zones dont le contenu est du texte, vous ne rencontrerez donc pas cette situation.
(4)Défilement
Définir la valeur de débordement d'une boîte sur scroll masquera le contenu rendu à l'extérieur de la boîte, mais fournira une barre de défilement pour faire défiler à l'intérieur de la boîte afin que le contenu restant puisse être affiché. Il convient de noter que l'utilisation du défilement générera simultanément des barres de défilement horizontales et verticales, même si le contenu n'en nécessite qu'une.
Exemple : Utilisation des valeurs d'attribut Visible et Masqué
<!DOCTYPEhtml><html><head><style>div{width:550px;height:100px;margin-top:20px;border:1pxsolidred;}div.hidden{overflow:hidden;}div.scroll{overflow:scroll ;}div.auto{overflow:auto;}</style></head><body><divclass=hidden>visible : valeur par défaut, le contenu débordant ne sera pas traité et le contenu sera affiché en dehors de la zone de contenu de l'élément ; <br>hidden : Masquer le contenu de la zone de contenu de l'élément de débordement ; <br>scroll : Masquer le contenu de la zone de contenu de l'élément de débordement et créer une barre de défilement à gauche et en dessous de l'élément. éléments dans l'élément en faisant glisser la barre de défilement. Contenu ;<br>auto : En cas de débordement de contenu, une barre de défilement sera créée sur le côté gauche de l'élément. Vous pouvez afficher tout le contenu de l'élément en faisant glisser la barre de défilement. ;<br>inherit : hérite de la valeur de l'attribut overflow de l'élément parent. </div><divclass=scroll>visible : valeur par défaut, le contenu débordant ne sera pas traité et le contenu sera affiché en dehors de la zone de contenu de l'élément ;<br>masqué : masquer le contenu de la zone de contenu de l'élément débordant ;<br >défilement : masquez le contenu dans la zone de contenu de l'élément de débordement et créez une barre de défilement sur le côté gauche et en dessous de l'élément. Vous pouvez afficher tout le contenu de l'élément en faisant glisser la barre de défilement ;<br> auto : si un débordement de contenu se produit, ce sera sur le côté gauche de l'élément. Créez une barre de défilement et vous pourrez afficher tout le contenu de l'élément en faisant glisser la barre de défilement ;<br>hériter : hériter de la valeur du débordement. attribut de l’élément parent. </div><divclass=auto>visible : valeur par défaut, le contenu débordant ne sera pas traité et le contenu sera affiché en dehors de la zone de contenu de l'élément ;<br>masqué : masquer le contenu de la zone de contenu de l'élément débordant ;<br >défilement : masquez le contenu dans la zone de contenu de l'élément de débordement et créez une barre de défilement sur le côté gauche et en dessous de l'élément. Vous pouvez afficher tout le contenu de l'élément en faisant glisser la barre de défilement ;<br> auto : si un débordement de contenu se produit, ce sera sur le côté gauche de l'élément. Créez une barre de défilement et vous pourrez afficher tout le contenu de l'élément en faisant glisser la barre de défilement ;<br>hériter : hériter de la valeur du débordement. attribut de l’élément parent. </div></body></html>Résultats en cours d'exécution :
