Compréhension approfondie du débordement CSS : caché, défilant, visible

Lors de la mise en page, si le contenu dépasse la taille de la boîte, vous pouvez utiliser l'attribut CSS Overflow pour masquer le contenu au-delà de l'objet. Vous pouvez également afficher ou masquer la partie excédentaire de la barre de défilement. apprentissage du style de débordement CSS.

1. Valeur de la syntaxe du débordement

débordement : visible | défilement automatique

Bien sûr, le débordement peut être défini indépendamment avec X (débordement -x) et La valeur et l'application du style de barre de défilement dans la direction Y (débordement-y) sont les mêmes que la structure d'utilisation de la syntaxe de débordement.

2. Explication de la valeur du paramètre de débordement

visible : Ne coupez pas le contenu et n'ajoutez pas de barres de défilement. Si cette valeur par défaut est explicitement déclarée, l'objet sera découpé à la taille de la fenêtre ou du cadre contenant l'objet. Et le paramètre d'attribut du clip sera invalide

auto : il s'agit de la valeur par défaut de l'objet body et de la zone de texte. Coupez le contenu et ajoutez des barres de défilement si nécessaire. La valeur par défaut de DIV est également cette valeur, mais vous pouvez la définir lorsque vous devez la définir

masqué : ne pas afficher le contenu qui dépasse la taille de l'objet.

défilement : toujours afficher la barre de défilement

3. Explication spéciale de débordement

Récupérer ou définir comment gérer le contenu lorsque le contenu de l'objet dépasse sa hauteur et sa largeur spécifiées.

Définir l'objet textarea sur la valeur cachée masquera ses barres de défilement.

Pour table, si l'attribut table-layout est défini sur fix, l'objet td prend en charge l'attribut overflow avec la valeur par défaut masquée. S'il est défini sur caché, défilement ou automatique, le contenu dépassant la taille td sera coupé. S'il est défini sur visible, le texte supplémentaire débordera vers les cellules de droite ou de gauche (en fonction du paramètre de propriété de direction). Cette propriété est disponible sur les plateformes MAC à partir de IE5.

4. Focus sur l'apprentissage du Débordement

Débordement : visible Ce style permet de masquer la barre de défilement, mais peut être déplacée de haut en bas avec la souris.

Débordement : caché Masquer le contenu de l'objet qui dépasse la largeur et la hauteur définies

Débordement : défilement Ce style entraînera l'affichage de la barre de défilement, que le contenu dépasse la hauteur ou largeur.

5. Débordement : caché et Débordement : pratique du défilement

Nous utilisons les mêmes paramètres de largeur et de hauteur, un pour masquer le contenu au-delà de la largeur et de la hauteur, et un pour afficher la barre de défilement. Démonstration du cas, nous ajoutons une bordure CSS aux deux objets du cas.

Code CSS :

.divcss5-hidden,.divcss5-scroll{width:300px; height:100px;line-height:25px; border:1px solid #333} 
.divcss5-hidden{overflow:hidden; height:50px} 
.divcss5-scroll{overflow:scroll; margin-top:10px}

Code html :

<div class="divcss5-hidden"> 
隐藏超出的内容但不显示滚动,divcss5的overflow:hidden测试示范 
案例，设置了高和宽后对象，内容多不超出对象 
</div> 
<div class="divcss5-scroll"> 
<img src="http://www.divcss5.com/uploads/allimg/130219/1_130219231214_1.jpg" /> 
</div>

Résumé : Le style CSS Overflow est souvent utilisé pour masquer la barre de défilement et masquer le surdimensionnement. La largeur et hauteur afficher le contenu de l'objet. C'est très simple. Peu importe si vous ne pouvez pas épeler le mot, vous pouvez reconnaître les endroits couramment utilisés lorsque vous le voyez et d'autres structures grammaticales de base peuvent être saisies rapidement. à l'aide du logiciel DW.

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!